select2动态搜索--问题解决

    最近项目中页面模板用到select2，需要动态搜索数据，显示下拉选，参考select2官网，大概写出来，代码如下

 $("#select2-button-addons-single-input-group-sm").select2({
        	width: "off",
        	placeholder: {id:"-1", text:"请输入域账户"},  
            ajax: {
                url: appRoot+"/getLdapUser.do",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        userName: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data) {
                    // parse the results into the format expected by Select2.
                    // since we are using custom formatting functions we do not need to
                    // alter the remote JSON data
                    var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候，可以使用类似此方法创建新的数组对象
                    var arr = data
                    for(item in arr){
                        itemList.push({id: item, text: arr[item]})
                  
                    }
                    return {
                        results: itemList
                    };
                },
                cache: false
            },
           escapeMarkup: function(markup) {
                return markup;
            },// let our custom formatter work
            minimumInputLength: 1,
            templateResult: formatTask,
            templateSelection: formatTaskSelection
        });

其中两个参数：

templateResult: formatTask,
templateSelection: formatTaskSelection

对应的两个方法要重写

        function formatTask(userName) {
            if (userName.loading) return userName.text;

            var markup = "<div class='select2-result-user clearfix'>" +userName.text + "</div>";
            return markup;
        }

        function formatTaskSelection(userName) {
        	return userName.text;
        }

    这样写遇到问题：

    在选择选项时总是选中一个选项，但是显示的是错误的选项，比如：我当前选中“北京”，下拉选第一个是“上海”，我选择上海，还是显示“北京”，搞了两天，最终找到问题所在，问题代码是如下几行：

                    var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候，可以使用类似此方法创建新的数组对象
                    var arr = data
                    for(item in arr){
                        itemList.push({id: item, text: arr[item]})
                  
                    }

因为select2判断选中必须要求数据格式为{id:0,text:'ANTS'}这样，通过id来判断选中项，如上面代码，第一次搜索，选中“北京”，遍历创建新格式的时候，“北京”对应id为0，那么id为0的选项为选中项，也就是“北京”。当我不刷新页面重新搜索“上海”的时候，又进行遍历创建新格式，这时候“上海”对应id也为0，这时候select2就认为id为0的选项是选中项，这时候虽然select显示北京，但是实际选中项为上海。

解决：

设置全局i，每次遍历设置id为i，再进行i++操作，这样id就不会重复，不会出现上面问题；

        var i = 0;
        $("#select2-button-addons-single-input-group-sm").select2({
        	width: "off",
        	placeholder: {id:"-1", text:"请输入域账户"},  
            ajax: {
                url: appRoot+"/getLdapUser.do",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        userName: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data) {
                    // parse the results into the format expected by Select2.
                    // since we are using custom formatting functions we do not need to
                    // alter the remote JSON data
                	var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候，可以使用类似此方法创建新的数组对象
                    var arr = data
                    for(item in arr){
                        itemList.push({id: i, text: arr[item]})
                        i++;
                    }
                    return {
                        results: itemList
                    };
                },
                cache: false
            },
           escapeMarkup: function(markup) {
                return markup;
            },// let our custom formatter work
            minimumInputLength: 1,
            templateResult: formatTask,
            templateSelection: formatTaskSelection
        });