web端select2模糊查询

模糊查询是一种常见的查询条件，具体如何实呢？请听详细介绍：

步骤：

第一步：

引用select2插件的js,cs.这个自己可以下载。

第二步：

实现标签：

<select class="form-control select2 pull-left" id="id" name="id"  data-placeholder="查询">
</select>

第三步：

js:

//初始化 能够实现查询  

$.fn.modal.Constructor.prototype.enforceFocus = function () {}
$(".select2").select2({
theme: "classic",
    language: "zh-CN",
    width:'resolve'

});

接下来是请求后台的方法：

function getAa(sel, url){
sel.select2({
language : "zh-CN",
placeholder:"请输入代理商信息",
        minimumInputLength:1,   //至少输入n个字符，才去加载数据
        maximumSelectionLength:1,
        maximumInputLength:50, //限制最大字符
        tags: true,
        multiple:true,
        allowClear:true,
        ajax: {
            url: url,
            dataType: 'json',
            type : 'POST',
            delay: 250,
            data: function (params) {
              return {
              user_name : params.term //传入后台的参数（键值对）
            };

        },

        processResults: function (data, page) {   //返回前台并处理其返回的数据
        var results = [];
        if (!data.result) {
alertErrorAtBottomRight(data.errorMsg);
}else{
if(data.data != null){
        $.each(data.data, function (i, v) {
                    var o = {};
                    o.id = v.id;
                    o.text = v.user_name;
                    results.push(o);
                });
        }
}
            return {
              results: results
            };
        },
        cache: true
     },
     escapeMarkup: function (markup) {return markup; }, 
     templateResult: formatRepo // 显示查询结果
    });

}

function formatRepo (repo) {//显示查询结果
    if (repo.loading) return repo.text;
    var markup = '<option value="'+repo.id+'">'+repo.text+'</option>';
    return markup;
}

注意：由于模糊查询是当你输入字符串时它会自动去后台查询，所以刚开始页面加载时就需要初始化 这样保证他能随时去后台查询。

getAa($("#id"), url);

至于control：

只需要写模糊查询方法即可。