select2使用

下载的版本是select2-4.0.6

页面引用select2.css、jquery、select2.js

前台代码

<select name="custSid" id="custSid" class="js-data-example-ajax" style="width:200px;">
    <c:if test="${not empty cdt.custSid}">
        <option value="${cdt.custSid}" selected="selected">${cdt.custName }</option> <!-- 没找默认值回显方法，这样写可以 -->
        <option value="" >请输入客户名称</option>
    </c:if>
    <c:if test="${empty cdt.custSid}">
        <option value="" selected="selected">请输入客户名称</option>
    </c:if>
</select>

js代码

    $(function(){
	
        // 重置
	$("#reset").click(function reset(){
	    $("#custSid").val("").trigger("change");
	});
	
	$("#custSid").select2({
	    ajax: {
                url: "url.do",
	        dataType: 'json',
		delay: 250,
		data: function (params) {
		    var query = {
	                custName: params.term //  params.term 搜索输入内容
		    }
		    return query;
		},
	        processResults: function (data) {
		    return {
		        results: data
	            };
		},
		cache: true
	    },
	    minimumInputLength: 1, // 输入几个字执行搜索
	    // placeholder: '请输入客户名称', // 要给默认值(回显)所以必须注释掉。
	    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
	    templateResult: function formatRepo (repo) { // 返回结果回调-列表显示
		return repo.text;
	    },
	    templateSelection: function (repo) { // 选中项回调
		$("#custName").val(repo.text);// 为了把text带到后台，回显用。
		return repo.text;
	    }
        });
    });

后台ajax返回值

 [
    {
      "id": 1,
      "text": "Option 1"
    },
    {
      "id": 2,
      "text": "Option 2"
    }
  ]