码迷,mamicode.com
首页 > 其他好文 > 详细

084_自动补全插件typeahead

时间:2020-03-30 21:41:29      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:post   sele   proc   有限公司   strong   百度   sel   action   custom   

typeahead

     var name2id={};//创建这个name2id对象就是为了创建一个name与id的映射关系,以name为属性名,以id为属性值。
        $("#create-accountName").typeahead({
            source:function (query,process) {//这个function就是为了查询出数据,query是我们输入的模糊查询值,prpcess是一个函数。
                $.ajax({
                    url:‘workbench/transaction/getCustomerByName.do‘,
                    data:{
                        customerName:query,
                    },
                    type:‘post‘,
                    dataType:‘json‘,
                    success:function (data) {
                        var array=[];//定义了一个数组,这个数组的内容全是公司的名字,会显示再下拉列表框中的。
                        $.each(data,function (index,obj) {
                            array.push(obj.name);
                            //js中,对象获取属性有有两种方式:obj.name或者obj[name];
                            //第二种方式主要用于属性名是变量。这其实和js是弱类型语言有关,因为弱类型对象没有类,可以直接声明属性
                            //这里其实也可以使用map集合,以name为键,以id为值。
                            name2id[obj.name]=obj.id;
                        });
                        //这个process()就是为了将数组的内容展现在页面中
                        process(array);
                    }
                });
            },

            afterSelect:function(item) {//item就是我们选中的name(百度有限公司),这个变量我们可以自定义。选中的值是怎么传过来的,这就是插件内部的事了。
                $("#create-customerId").val(name2id[item]);
            }
        });

 

084_自动补全插件typeahead

标签:post   sele   proc   有限公司   strong   百度   sel   action   custom   

原文地址:https://www.cnblogs.com/pogusanqian/p/12601160.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!