Select2 下拉单自动补全

Select2 下拉单自动补全

1、下载select2所需要的js包

官网地址：http://ivaynberg.github.io/select2/

2、select2的开发 新增

前台开发：

js

<script src="<%=path%>/js/common/select2.js"></script>
<link href="<%=path%>/css/common/select2.css" rel="stylesheet"/>
<script src="<%=path%>/js/common/select2_locale_zh-CN.js"></script>
$(document).ready(

function() {
$("#showCountry").select2();

}

var show_country = "";

//jquery获取选中的值，一直获取不到，想到的临时解决办法，修改了底层select2.js的方法，添加name="selectdata"

/***

   formatted=this.opts.formatSelection(data, choice.find("div"), this.opts.escapeMarkup);
            if (formatted != undefined) {
                choice.find("div").replaceWith("<div><input type='text' style='display:none;' name='selectdata' value="+data.id+"></input>"+formatted+"</div>");
            }
**/

$('input[name="selectdata"]').each(function() {

show_country += $(this).val() + ",";
});


html

<tr class="sw_tr_ctn">
<td class="ctn_word" align="right">XXXXXXXXX：</td>
<td class="ctn_input" colspan="3" align="left"><select id="showCountry" multiple style="width: 60%;" class="populate">
<c:forEach var="obj2" items="${countries}" varStatus="status">
<option value="${obj2.code_value}">${obj2.code_name}</option>
</c:forEach>
</select><span class="required">*</span></td>
</tr>

修改：

js

$(document).ready(
function() {
/*******************************************************************
* 异步加载
*/
var id = $('#id').val();
$.post(path + "/publicity/getshow_country_code", {
id : id
}, function(data) {
var codestr = data.split(",");
var obj22 = [];
for ( var i = 0; i < codestr.length; i++) {
obj22.push(codestr[i]);
}
$('#show_country').select2("val", obj22);
});

}

html

  <tr class="sw_tr_ctn">
             <td class="ctn_word" align="right">XXXXXXXXX：</td>
             <td class="ctn_input" colspan="3" align="left">
             
             <select id="show_country" name="show_country" multiple style="width:60%;" class="populate">
<c:forEach var="obj2" items="${countries}" varStatus="status">
<option value="${obj2.code_value}">${obj2.code_name}</option>
</c:forEach>
</select>
<font class="required">*</font>
</td>
            
         </tr>