支持搜索、自定义输入的下拉框组件--combobox组件使用文档

easyui插件–combobox组合框

官方下载

官网下载
Jquery EasyUI 官网API
Jquery EasyUI 中文网API

使用说明

1、引入依赖的css和js文件

<link rel="stylesheet" href="<c:url value="/public/lib/easyui/easyui.css" />" type="text/css">
<link rel="stylesheet" href="<c:url value="/public/lib/easyui/icon.css" />" type="text/css">
<script src="<c:url value="/public/lib/jquery/jquery-1.12.1.min.js"/>"></script>
<script src="<c:url value="/public/lib/easyui/jquery.easyui.min.js" />" type="text/javascript"></script>

2、初始化元素

（1） 使用带有预定义的元素创建组合框（不推荐）

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aitem1">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>
<!--或者使用带有预定义的input进行创建-->
<input  id="cc"  class="easyui-combobox"  name="dept"
  data-options="valueField:'id',textField:'text',url:'get_data.php'">

（2）使用原生html，通过js进行创建

 <select id="cc">
    <option value="1">1</option >
    <option value="2">2</option >
    <option value="3">3</option >
</select>
<!-- 或者使用input读取json文件 -->
<input  id="cc"  name="dept"  value="aa">

//select初始化
$('#cc').combobox({});
//input json动态获取数据初始化
$('#cc').combobox({
   url:'combobox_data.json',
   valueField:'id',
   textField:'text'
});

说明：使用json格式的数据注意对数据的配置，如以上的初始化数据示例：

[{"id":1,"text":"text1"},
{"id":2,"text":"text2"}]

常用属性–combobox扩展属性

名称	类型	描述	默认值
★valueField	String	绑定远程数据的key值	value
★valueText	String	绑定远程数据时的value值	text
★ url	String	从远程加载数据时的url地址	null
★method	String	从远程获取数据时的加载方式	post
★data	Array	用于加载的数据列表	none
mode	String	数据加载的模式，分为local本地加载和remote远程加载	local
loader	json Load	定义如何从远程服务器加载数据	null

常用属性 – 继承自combo插件

名称	类型	描述	默认值
★ width	number	组件的宽度	auto
★height	number	组件的高度	22
★panelWidth	number	下拉面板的宽度	null
★panelHeight	number	下拉面板的高度	200
★multiple	boolean	是否支持多选	false
separator	String	多选时文本的分隔符	，
★editable	boolean	是否支持输入	true
★disabled	boolean	是否禁用文本域	false
★readonly	Boolean	是否使文本域只读	false
★hasDownArrow	Boolean	是否显示向下的箭头	true
★value	String	组件的默认值	null
delay	number	从最后一个键的输入事件起所产生的延时效应	200

事件 — combobox扩展事件

名称	参数	描述
onBeforeLoad	param	在请求发生之前触发，return false 则取消该动作
onLoadSuccess	none	远程加载数据成功后触发
onLoadError	none	远程加载数据失败后触发
★onSelect	recordd（列表项）	当选择一个列表项时触发
★onUnselect	recordd（列表项）	当取消一个列表项时触发

事件 — 继承自combo组件

名称	参数	描述
★onShowPanel	none	当下拉面板显示时触发
★onHidePanel	none	当下拉面板隐藏时触发
★★★onChange	（newValue, oldValue）	当值发生改变时触发

方法 — combobox扩展

名称	参数	描述
getData	none	返回加载的数据
loadData	data	加载本地列表数据
reload	url	请求数据的url，会重置上一次的url
setValues	values	多选赋值
★★★setValue	value	单选赋值
★★★clear	null	清除组合框的值
select	value	选择指定的选项
unSelect	value	取消指定的选项

方法 — 继承自combo组件

名称	参数	描述
textbox	none	返回文本框的对象
destory	none	销毁组件
resize	width	调整组件的宽度
showPanel	none	显示下拉面板
hidePanel	none	隐藏下拉面板
disable	none	禁用组件
enable	none	启用组件
clear	none	清除组件的值
reset	none	重置组件的值
★★★getValues	none	获取组件的值的数组
★★★getValue	none	获取组件的值