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开启搜索自动完成功能的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2016-11-05

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 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'>第一个

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

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

EasyUI中combobox默认值注意事项

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

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

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自定义标签 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+"

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

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

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模糊过滤(示例代码)

修改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=$

Jquery easyui 下loaing效果示例代码

复制代码 代码如下: //采用jquery easyui loading css效果 function ajaxLoading(){     $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");  

js和jquery实现监听键盘事件示例代码

项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e

jQuery EasyUI window窗口使用实例代码

需求:点击[增加]按钮,弹出窗口,并对所有输入项内容进行校验,校验通过就提交给后台的action处理,没有通过校验就弹窗提示. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>管理取派员</title> <!-- 导入jquery核心类库 --> <script type="text/javascript"

jquery ajax 同步异步的执行示例代码

大家先看一段简单的jquery ajax 返回值的js 代码 复制代码 代码如下: function getReturnAjax{ $.ajax({ type:"POST", http://www.jb51.net/userexist.aspx", data:"username="+vusername.value, success:function(msg){ if(msg=="ok"){ showtipex(vusername.id,

ajax jquery 异步表单验证示例代码

文件目录:  html代码: 复制代码 代码如下: <html> <head> <title>异步表单验证</title> <script type='text/javascript' src='jquery.js' ></script> <script> function checkname(){ //$("input[name='name']").val() $.ajax({ type:"

jQuery循环滚动新闻列表示例代码

最近由于项目原因,学习了下jquery,实现了一个小小的功能,就是点击公告的上一条下一条来查看滚动条.具体代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta ht

jQuery中读取json文件示例代码

json文件是一种轻量级的数据交互格式.一般在jquery中使用getJSON()方法读取. $.getJSON(url,[data],[callback]) url:加载的页面地址 data: 可选项,发送到服务器的数据,格式是key/value callback:可选项,加载成功后执行的回调函数 1.首先建一个JSON格式的文件userinfo.json 保存用户信息.如下: [ { "name":"张国立", "sex":"男&q

etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例

基于角色的权限管理一般有5张表构成,如下图,这里我们要实现对角色role进行授权操作,简单来说就是要对rolemenu进行添加操作,这里前端主要用easyui-combobox来实现权限多选. 总体思路是先初始化combobox,绑定所有的权限:然后根据当前的角色获取该角色已经拥有的权限,设置combobox选中这些权限:最后修改好权限了,获取combobox的选中值发送到后端进行保存. 1.控件初始化 先是前端html,设置combobox的value是角色id,text是角色name,代码如

jQuery简易图片放大特效示例代码

DEMO点击圆形图片,图片方法,将水的图片放置与下层,鼠标移上去的时候,图片高与宽同比增大,并且图片向左上移动 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or