HTML5 Fuzzy matching search box

Using Bootstrap3-typeahead.js

Here's the file.

Reference:

<type= "Text/javascript"  src= "@Url. Content ("xxxxx/ Bootstrap3-typeahead.js ")" CharSet= "UTF-8"></script>

Input control

<id= "Local_data"  autocomplete= "Off"  data-provide = "Typeahead" type = "text" style = "Background:white"                                class= "Input-sm Form-control"  placeholder= "Input keywords to search"/> 

JS Sample Code

varInitsearchlabel =function () {    varResultkeyandvalue = {}; $("#local_data"). Typeahead ({source:function(query, process) {//query is the value entered            varNames =NewArray (); $.ajax ({type:"GET", URL:"XXXXXXXX", datatype:"JSON", ContentType:"Application/json; Charset=utf-8 ", Cache:false, Traditional:true, Async:false, Success:function(Result) {result=json.parse (Result); Processing the resulting JSON data,varResultlist =Json.parse (result);
If the resulting data is an array of objects rather than an array of strings, the search results to be displayed are processed into an array of strings and returned;
If other parameters of the selected object are also required in the later processing, the selected string can be made into a dictionary alternate with the other parameters used for(vari = 0; i < resultlist.length; i++) {Names.push (resultlist[i].name);                    }                    returnprocess (names); }, Error:function(Result) {}}); }, Updater:function(item) {
Check for future data processing.            Item is the selected string,resultkeyandvalue is the alternate Dictionaryreferred to by the success function, where the required parameters are taken out. varinfo =Resultkeyandvalue[item];varName = info["Name"]; $.ajax ({type:"GET", URL:"Yyyyyyyyyyyyyyy", datatype:"JSON", ContentType:"Application/json; Charset=utf-8 ", Cache:false, Traditional:true, Async:false, Success:function(Result) {result=json.parse (result);}, Error:function(Result) {}}); returnitem; }, Items:100,//display of search results delay:The interval at which the request is executed after the data in the//input control has changed    });}

This method matches the complete string, and does not reach multiple keyword matching methods in the Baidu input box.

HTML5 Fuzzy matching search box