jQuery UI Autocomplete 自动完成

最新推荐文章于 2020-05-20 22:19:14 发布

Nemo_XP

最新推荐文章于 2020-05-20 22:19:14 发布

阅读量591

点赞数

CC 4.0 BY-SA版权

分类专栏： UI插件

本文链接：https://blog.youkuaiyun.com/spw55381155/article/details/80062069

UI插件专栏收录该内容

4 篇文章

订阅专栏

html引用

JS代码(为避免重名:把姓名和Id组合作为区分):

 //操作人自动补全框
        $('#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+'-'+item.id,value:item.id,show:item.BelongCompanyName//label默认下拉值和选中值,show自定义值格式
                            }
                        }));
                    },
                })
            },
            minLength: 0,
            delay: 200,//延迟
            select: function (e, ui) {//e是jquery对象,里面包含供我们使用的鼠标对象,显示屏对象,键盘对象等等,ui里只有一个我们选中的item对象,里面有label和value包含自动以show的值
                //选中下拉框之后要做的事,一般在这里可以显示我们自定义的show值,但是后面别忘了加e.preventDefault()
                $('#txtUser').val(ui.item.show);
                e.preventDefault();
            },
            change: function (e, ui) {
                //文本框里的值变化后要做的事,一般在这里可以控制如果文本框的值不是下拉框中的数据,我们就清空它,代码如下
                if (ui.item !== null) {
                    $('#txtUser').val(ui.item.show);
                } 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.

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