084_自动补全插件typeahead

Posted 2021-03-03 pogusanqian

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]);
            }
        });