jQuery UI Autocomplete 自动完成

JS代码:

            //操作人自动补全框
            $('#txtUser').autocomplete({//jqueryUI里封装的自动完成插件
                source:[{label:'A',value:'1',show:'A1'},{label:'B',value:'2',show:'B2'}],
                    function (request, response) {
                    /*1.source后面可以直接跟json数据集合如['A','B'],或键值对[{label:'A',value:'1',show:'A1'},{label:'B',value:'2',show:'B2'}],
                    2.source后面直接跟视图或页面返回json数组,需要注意的是autocomplete会自动发送地址/A/B?term=输入字符串,根据参数我们在控制器里过滤后就可以筛出数据
                    3.autocomplete会默认显示value, 如果要显示自动以show值, $('#txt').val(ui.item.show); e.preventDefault()//终止默认显示的value
                    4.此demo使用的function(request,response),request有一个term属性,response是一个函数,在你自行处理并获得数据后,将json数据交给该函数处理,以便autocomplete根据数据显示列表
                    5.如何使用:var data=['处理后的数据'];response(data);或者response写个匿名函数内部筛选或处理后return需要的数据集合
                    6.总结:source的三种筛选方法:1后面跟/A/B(?term=c会自动跟随),后台筛选后的数据.2使用function(request,response){ajax获取如下}.3把json总数据放在隐藏域中,然后在function(request,resp){response(函数筛选数据)}(此方法避免数据量过大时每输入一个字访问次数据库,但是有数据不及时问题)*/
                    $.ajax({
                        url: '/Tool/GetOperUsers',
                        data: {uName:request.term},
                        type: 'POST',
                        dataType: 'JSON',
                        success: function (RData) {
                            response($.map(RData, function (item, index) {
                                return {
                                    label: item.BelongCompanyName,value:item.id,show:item.BelongCompanyName+'-'+item.id
                                }
                            }));
                        },
                    })
                },
                minLength: 0,
                delay: 200,//延迟
                select: function (e, ui) {//e是jquery对象,里面包含供我们使用的鼠标对象,显示屏对象,键盘对象等等,ui里只有一个我们选中的item对象,里面有label和value包含自动以show的值
                    //选中下拉框之后要做的事,一般在这里可以显示我们自定义的show值,但是后面别忘了加e.preventDefault()
                 var show = ui.item.show;
                  $('#txtUser').val(show);
                  e.preventDefault();
                },
                change: function (e, ui) {
                    //文本框里的值变化后要做的事,一般在这里可以控制如果文本框的值不是下拉框中的数据,我们就清空它,代码如下
                    if (ui.item !== null) {
                        $('#txtUser').val(ui.item.label);
                    } else {
                        $('#txtUser').val('');
                    }
                }
            }).click(function () {
                //默认情况下,点击文本框是不会弹出只能提示的,所以我们要加个点击事件,让它仍然弹出只能提示
                var $elm = $(this);
                //this是js对象,$(this)是jquery对象包含js所有功能和jquery封装了的其他方法
                //$elm.autocomplete('close');//关闭下拉
                //$('#AddUser').removeAttr('readonly')//移除只读
                $elm.autocomplete('search', '');//调用search方法,调用数据源显示菜单,如何调用autocomplete('方法','参数1','参数2')
            });

后台代码:

        /// <summary>
        /// 获取创建人的自动完成数据源
        /// </summary>
        /// <param name="uName">条件框</param>
        /// <returns></returns>
        public JsonResult GetOperUsers(string uName)
        {
           IList< OperLogModel >listData= operLogService.GetOperUsers(uName);
            return Json(listData);
        }

如何获取值:

创建一个隐藏域,每选中值就在select事件中更改隐藏域的值为ui.item.value,取值取隐藏域的值

如何赋值

创建一个隐藏域,赋值的时候,让自动文本框的值=text,隐藏域的值=value

单个自动完成或者使用bootstrap3-typeahead.js 点击打开链接

扩展功能:多选取值赋值(选完一个数据后,再生成一个自动完成框)

同上,隐藏域中取值ids,隐藏域中赋值ids.

扫描二维码关注公众号，回复： 182473 查看本文章

或者使用select2插件点击打开链接

jQuery UI Autocomplete 自动完成

猜你喜欢