jquery Auto Complement Feature Plug in flexselect Usage Sample

This article illustrates the usage of jquery auto-completion function plug-in flexselect. Share it for your reference, as follows:

I'm doing something these days. Need to use the function of automatic completion. That is, the text item of the select control can be written. The default select text box is read-only and cannot be written. Find an jQuery plug-in on the Internet: flexselect can complete this function.

Put the plug-in into the project. Then reference this plug-in in the page.

<script src="${pageContext.request.contextPath}/js/jquery.flexselect-0.2/jquery.flexselect.js"  type="text/JavaScript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flexselect-0.2/liquidmetal.js"  type="text/javascript"></script>
<link href="${pageContext.request.contextPath}/js/jquery.flexselect-0.2/flexselect.css" rel="stylesheet" type="text/css" >

Then write this code in the js script:

<script type="text/javascript">
jQuery(document).ready(function(){
 $("select[class*=flexselect]").flexselect();
});
</script>

It started as follows:

<script type="text/javascript">
var jq = jQuery.noConflict();
jq(function(){
 jq("select[class*=flexselect]").flexselect();
 jq("#province").change(function (){
 jq("#city").empty();
 if($("#province").val() != "") {
  ajaxPost("${pageContext.request.contextPath}/test/queryCityByProvince.do",backCity,{"province":jq("#province").val()});
 }
 });
});

But in this case, it conflicts with one of the other js. At present, I don't know what happened, and it needs to be studied!

In addition, if select is dynamically generated through js. Then add the following sentence at the corresponding position: $("select [class*=flexselect]"). flexselect ();

function backQuery(data){
 var result=data[0]['resultList'];
 var html="";
 html+="<td width='25%'>serial Grouping <font color='red'>*</font>:</td>";
html+="<script type='text/javascript'>$(\"select[class*=flexselect]\").flexselect()\;<\/script>"; // Note: If you don't add this 1 Sentence, there will be no effect ~ ~ 
html+="<td width='75%'><select name='serialTeamName' class='flexselect' style='width:200px'>";.
for(var i=0;i<result.length;i++){
 html+="<option value="+result[i]['name']+">"+result[i]['name']+"</option>";
}
html+="</select></td>";
$("#serialGroupTr").append(html);

For more readers interested in jQuery related content, please check the topics of this site: "Summary of jQuery Extension Skills", "Summary of jQuery Common Plug-ins and Usage", "Summary of jQuery Drag Effects and Skills", "Summary of jQuery Table (table) Operation Skills", "Summary of Ajax Usage in jquery", "Summary of jQuery Common Classic Special Effects", "Summary of jQuery Animation and Special Effects Usage" and "Summary of jquery Selector Usage"

I hope this article is helpful to everyone's jQuery programming.