EasyUi模糊匹配搜索框combobox

现在项目当中很多已经应用了Jquery-easyUi这个界面框架了，所以，学习一点easyUI的常用工具就显得很重要了，现在介绍的就是我在项目中用到的easyUi的模糊匹配组合框combobox.

combobox这个工具可以在用户输入一点前面的数据就会快速的查询出符合当前查询数据的所有数据。

这个工具只要在引入easyUI   jar包的Jsp页面中引用就可以了。

用法：

 

1、 需要引入class=" easyui-combobox”

2、 参数设置需要在data-options中设置

3、 属性参数配置：

valueField：基础数据值名称绑定到Combobox(提交值)

textField：基础数据的字段名称绑定的Combobox（显示值）

mode:定义当文本改变时如何加载列表数据，当设置为remote模式下，什么类型的用户将被发送http请求参数名为'q'的服务器，以获取新的数据。

url：从远程URL来加载列表数据

method：http方法检索列表数据

data：列表中被加载的数据

filter：定义如何过滤本地数据“模式”设置为'local'

formatter：定义如何呈现行

loader：定义如何从远程服务器加载数据

具体代码如下：

<td class="DF_GTable_RTD_Style">
                        <input class="easyui-combobox" name="username" id="userId" data-options="required:true,valueField:'ID',textField:'name',panelHeight:'auto',panelMaxHeight:300,panelMinHeight:200" url="../../Controller/user.ashx?Action=GetUserNameList" style="width: 100%" />  
                    </td>

$(function () {

$.extend($.fn.combobox.methods, {
                selectedIndex: function (jq, index) {
                    if (!index) {
                        index = 0;
                    }
                    $(jq).combobox({
                        onLoadSuccess: function () {
                            var opt = $(jq).combobox('options');
                            var data = $(jq).combobox('getData');

                            for (var i = 0; i < data.length; i++) {
                                if (i == index) {
                                    $(jq).combobox('setValue', eval('data[index].' + opt.valueField));
                                    break;
                                }
                            }
                        }
                    });
                }
            });
            //下拉框:表格样式
            $('#userId').combobox({
                prompt: '输入关键字自动检索',
                filter: function (q, row) {
                    var opts = $(this).combobox('options');
                    return row[opts.textField].indexOf(q) > -1;//将从头位置匹配改为任意匹配 
                },
                onHidePanel: function () {
                    var valueField = $(this).combobox("options").valueField;
                    var val = $(this).combobox("getValue");  //当前combobox的值
                    var allData = $(this).combobox("getData");   //获取combobox所有数据
                    var result = true;      //为true说明输入的值在下拉框数据中不存在
                    for (var i = 0; i < allData.length; i++) {
                        if (val == allData[i][valueField]) {
                            result = false;
                        }
                    }
                    if (result) {
                        $(this).combobox("clear");
                    }

                }
            }).combobox('selectedIndex', 0);

});