Implementation of fuzzy query based on select traversal JSON file AutoFill

HTML page

<TR>    <TDAlign= "Left"><span>Accusation</span>        <inputtype= "text"name= "Ay"ID= "Ay"value=""placeholder= "After entering the content, the return key can be blurred search!" "onclick= "Showay ()"onkeypress= "Checkenter (event,this);"style= "width:340px;height:26px;position:relative;top:2px;left:-1px;"/>        <SelectID= "Selectay"style= "width:340px;height:26px; overflow:hidden;position:relative;top:-8px;left:92px;display:none;"onchange= "Changeay ()"onblur= "Outfocus (this)"></Select>    </TD></TR>

JS file

1 //-----Selection method of fuzzy query2 functionCheckayvalue () {3     varay = document.getElementById ("Ay"). Value;4     if(ay!= "" && ay!=NULL){5 Selectay (ay);6}Else{7 Showay ();8     }9 }Ten //Fuzzy query Start One functionSelectay (ay) { A$ ("#selectAy"). CSS ({"Display": "None")});  -     varJsonfile = "Minshi.json"; -     if(Ajtype.indexof ("civil")!=-1) {jsonfile = "Minshi.json";} the     Else if(Ajtype.indexof ("criminal")!=-1) {jsonfile = "Xingshi.json";} -     Else if(Ajtype.indexof ("administrative")!=-1) {jsonfile = "Xingzheng.json";} -     Else if(Ajtype.indexof ("compensation")!=-1) {jsonfile = "Peichang.json";} -     Else if(Ajtype.indexof ("execution")!=-1) {jsonfile = "Zhixing.json";} +  -     varAyname= ""; + $.ajax ({ AUrl:apppath + "clientpage/json/ay/" + jsonfile,//JSON file location atType: "GET",//Request method is get -DataType: "JSON",//return Data format as JSON -Successfunction(data) {//the method to execute after the request is completed successfully -                //except for the first time, empty the option in select -$ ("#selectAy"). empty ();  -                //traversing a JSON array in$.each (data,function(I, item) { -                     vars =item.id.indexOf (ay); to                     if(S!=-1) { +Ayname=Item.name; -$ ("#selectAy"). Append ("<option value=\" "+ ayname +" \ ">" + ayname + "</option>"); the                     } *                 }); $                 if(ayname==NULL|| Ayname = = ""){Panax Notoginseng Afterselectay (); -document.getElementById ("Ay"). value=NULL; the}Else{ + Changeay (); A                 } the            } +     }); - } $ functionChangeay () { $document.getElementById ("Ay"). value= -document.getElementById ("Selectay"). Options[document.getelementbyid ("Selectay")). Selectedindex].value;  -  }   theNS4 = (document.layers)?true:false; - functionCheckenter (event,element) {Wuyi     varCode = 0; the     if(NS4) code =Event.which; -     ElseCode =Event.keycode; Wu     if(code==13){ -$ ("#ayContent"). CSS ({"Display": "None")}); About Checkayvalue (); $$ ("#selectAy"). CSS ({"Display": "")}); -$ ("#selectAy"). CSS ({"Background-color": "#F2F8FD"}); -     } - } A functionAfterselectay () { +Layer.msg (' No search results matching your input requirements, please re-enter to search! ‘); the } - functionOutfocus () { $$ ("#selectAy"). CSS ({"Display": "None")}); the } the //end of fuzzy query

Reference: drop-down box for a simple approach to select and input functions

Bootstrap Frame dropdown Box Select search function

This article is for personal records only.

Can be used for reference.

2017-11-1 08:36:00 Modify

2017-11-13 08:36:19 Upload

Implementation of fuzzy query based on select traversal JSON file AutoFill