easyui combobox开启搜索自动完成功能的实例代码

combo.json

[{
 "id":-1,
 "text":" ",
 "spell":""

},{
 "id":1,
 "text":"类型1",
 "spell":"lx1"
},{
 "id":2,
 "text":"类型2",
 "spell":"lx2"
},{
 "id":3,
 "text":"类型3",
 "spell":"lx3"
},{
 "id":4,
 "text":"类型4",
 "spell":"lx4"
},{
 "id":5,
 "text":"类型5",
 "spell":"lx5"
}]

下面是代码示例

<form>
  <input type="text" id="combox1">
</form>
/**
   * easyui combobox 开启搜索功能,自动装载选中的项目处理函数
   */
  function onComboboxHidePanel() {
    var el = $(this);
    el.combobox('textbox').focus();
    // 检查录入内容是否在数据里
    var opts = el.combobox("options");
    var data = el.combobox("getData");
    var value = el.combobox("getValue");
    // 有高亮选中的项目, 则不进一步处理
    var panel = el.combobox("panel");
    var items = panel.find(".combobox-item-selected");
    if (items.length > 0) {
      var values = el.combobox("getValues");
      el.combobox("setValues", values);
      return;
    }
    var allowInput = opts.allowInput;
    if (allowInput) {
      var idx = data.length;

      data[idx] = [];
      data[idx][opts.textField] = value;
      data[idx][opts.valueField] = value;
      el.combobox("loadData", data);
    } else {
      // 不允许录入任意项, 则清空
      el.combobox("clear");
    }
  }
  $("#combox1").combobox({
    required: true,
    editable: true,
    missingMessage: '请选择装载物料',
    valueField: "id",
    textField: "text",
    method: 'get',
    url: 'combo.json',
    mode: "local",
    onHidePanel: onComboboxHidePanel,
    filter: function (q, row) {
      //定义当'mode'设置为'local'时如何过滤本地数据,函数有2个参数:
      //q:用户输入的文本。
      //row:列表行数据。
      //返回true的时候允许行显示。
      //return row[$(this).combobox('options').textField].indexOf(q) > -1;
      return row["spell"].indexOf(q) >= 0;
    }
  });

以上这篇easyui combobox开启搜索自动完成功能的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • jquery easyui combobox模糊过滤(示例代码)

    修改jquery easyui combobox模糊过滤 复制代码 代码如下: filter:function(q,row){ var opts=$(this).combobox("options"); //return row[opts.textField].indexOf(q)==0;// return row[opts.textField].indexOf(q)>-1;//将从头位置匹配改为任意匹配 },formatter:function(row){ var opts=$

  • Easyui的combobox实现动态数据级联效果

    实现从数据库中动态获取对应的List集合,并在Easyui的combobox中显示出来. 实现的效果如下: 1.数据库的表设计如图所示 2.数据库中填写相关的数据,如图所示.如图所示[法律法规]是所属栏目,因此他的字段parentid是0.[中国公民出国].[内地居民往来港澳]是属于法律法规的类别.因此他们的字段parentid是对应1,[法律法规]的字段categoryid是1. 3.相关的配置:已经在前面的博客中写了http://www.jb51.net/article/86381.htm

  • EasyUI Combobox设置默认值 获取text的方法

    $('#xxx').combobox('setValue',11); $('#epsId_combo').combobox('selectedIndex',0); <pre class="html" name="code"><select id='xxx' class="easyui-combobox" style="width: 180px;"> <option value='1'>第一个

  • EasyUI中combobox默认值注意事项

    在修改数据时,需要先加载数据. 在加载combobox数据的时候,从后台传来的应该int类型的数据. html代码 复制代码 代码如下: <tr>    <td style="text-align: right;">院系:</td>        <input type="hidden" id="belongsvalue" value="${fbook.belongs}" />

  • jQuery EasyUI API 中文文档 - ComboBox组合框

    扩展自 $.fn.combo.defaults. 用 $.fn.combobox.defaults 重写了 defaults. 依赖 combo 用法 <select id="cc" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option>

  • EasyUI学习之Combobox级联下拉列表(2)

    本文实例为大家分享了EasyUI Combobox级联下拉列表的具体代码,供大家参考,具体内容如下 1. html代码 <fieldset> <legend>信息查询</legend> <div style="white-space: nowrap; padding: 5px;"> <label>学校:</label> <input class="easyui-combobox" type

  • Easyui form combobox省市区三级联动

    使用方法 $(function () { //省市区三级联动 $.citySelect({ $province: $('#province'), $city: $('#city'), $County: $('#county') }); $('#ff').form('load', { 'province': '广东省', 'city': '深圳市', 'county': '罗湖区' }); }); <form id="ff" method="post">

  • jQuery+easyui中的combobox实现下拉框特效

    1.第一种写法:Input框中显示: 复制代码 代码如下: <input id="cc" class="easyui-combobox" name="name" data-options="valueField:'value',textField:'text',data:[{'value':'1','text':'java'},{'value':'2','text':'C#'}]"/> 2. 第二种用法,在list

  • 如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上

    使用onEndEdit事件(该事件可以获取到editor对象,onAfterEdit事件获取不到Editor对象) 通过editor拿到输入数据并保存. int ci = 0; for(Column col : columnList ){ for(Combobox cbb : col.getCombobox()){ if(cbb != null){ str += "var ed" + ci + " = $j(\"#"+RandomNumber+"

  • jQuery EasyUI编辑DataGrid用combobox实现多级联动

    我在项目中设计课程表的时候需要用到老师和分类之间的多级联动. 首先是一张效果图: 下面是实现的代码: <body> <script type="text/javascript"> $(function(){ var editing ; //判断用户是否处于编辑状态 var flag ; //判断新增和修改方法 $('#set_schedule').datagrid({ idField:'id' , fitColumns: false , url:'schedul

随机推荐