jquery Automatic completion feature plug-in Flexselect usage example _jquery

This example describes the jquery automatic completion function plug-in flexselect usage. Share to everyone for your reference, specific as follows:

I'm doing a thing these days. Need to use automatic completion of the function. That is, the text item of the Select control lets it write. The default Select text box is read-only and cannot be written. Find a jquery plugin on the Web: Flexselect can complete this feature.

Put the plugin in the project. Then refer to the plugin 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 the code in the JS script:

<script type= "Text/javascript" >
jQuery (document). Ready (function () {
 $ ("Select[class*=flexselect]") . Flexselect ();
});
</script>

At first it was written:

<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, with one of the other JS conflict. We don't know what's going on yet.

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

function Backquery (data) {
 var result=data[0][' resultlist '];
 var html= "";
 html+= "<td width= ' 25% ' >serial group <font color= ' Red ' >*</font>:</td>";
html+= "<script type= ' text/javascript ' >$ (\" Select[class*=flexselect]\ "). Flexselect () \;<\/script>"; Note: If you do not add this sentence, it will not effect ~ ~
html+= "<td width= ' 75% ' ><select name= ' serialteamname ' ' class= ' flexselect ' 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);

More interested readers of jquery-related content can view the site topics: "jquery Extended Tips," "jquery common Plug-ins and Usage summary", "jquery drag-and-drop effects and tips summary", "jquery table (table) Operation Tips Summary", " A summary of Ajax usage in jquery, a summary of common classic effects in jquery, a summary of jquery animation and special effects usage, and a summary of jquery selector usage

I hope this article will help you with the jquery program design.