HTML5 Fuzzy matching search box

Source: Internet
Author: User

Using Bootstrap3-typeahead.js

Here's the file.


<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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.