The method of using bootstrap Typeahead plug-in to realize automatic completion of search box _javascript skill

This is one of the disadvantages of pasting code: the search box is!!! by netizens. There are intentional input spaces, there are input or 1=1, alert, there is HTML chaos .... And it seems to be playing, let them go, as long as happy.

In the project, often use the input box automatic completion function, like Baidu, Taobao and other search box like: When users enter the first letter, keyword, the background will quickly return to the relevant entries and display to the foreground, so that users choose to enhance the user experience. Of course, the completion of this project and the technology of these manufacturers are not comparable, but for the site search is more than enough.

Access to the automatic completion of the total plug-in has two main : AutoComplete and Typeahead. This station uses is Typeahead.

Jqueryui-autocomplete

Automatic complement full plug-in-bootstrap-3-typeahead

Related parameter Description:

Source:function (query,process) {}. Query represents the string in the current text input box, in which you can request data (in the form of an array of JSON objects) with Ajax backwards, and then use the returned object as a parameter to the process;

Formatitem: Function (item) {}. Converts a specific JSON object that returns data to a string format that is displayed in a hint list, returning a value: a string;

setValue: Function (item) {}. When you select an item in the prompt list, set the value displayed in the Text entry box and the value that you want to get actually. Return value format: {' data-value ': item[' the input box displays the item property of the value], ' real-value ': item[' the Item property that actually needs to get the value '}, the value can be obtained later by the Real-value property of the text input box;

Items: The maximum number of result sets for automatic prompt completion, default: 8;

minlength: The string in the current text input box reaches the value of the property to match processing, the default: 1;

Delay: Specifies the number of delay milliseconds to request data back to the table to prevent too fast input causing frequent back-desk requests, default: 500

The specific code is as follows:

First JS file introduced

<script src= "~/scripts/jquery-1.9.0.js" ></script> 
<script src= "~/scripts/bootstrap.js" > </script> 
<script src= "~/content/js/bootstrap3-typeahead.js" ></script>

HTML code:

<form id= "Searchform" class= "Navbar-form navbar-right" role= "search" target= "_blank" method= "get" action= "/Search/" Index ">
<div class=" Form-group ">
<input type=" text "id=" Searchwords "name=" Searchwords "class=" Form-control "data-provide=" Typeahead "autocomplete=" Off "placeholder=" Please enter the keyword to search >
</div>
< Button type= "Submit" class= "BTN" id= "searchbtn" >
search
</button>
</form>

JS for processing related search terms:

Search automatic completion; Register Automatic association with the search box to complete the event
autocomplete:function () {
jQuery (' #searchWords '). Typeahead ({
Source: function (query, process) {
//query is the input value
jquery.getjson ('/search/gethotsearchitems ', {"Query": query}, function (data) {
process (data);}
,
updater:function (item) {return
item.replace/<a (. +?) <\/a>/, ""); Here must return, otherwise select Do not display
},
afterselect:function (item) {
//Select the time after the item, item is currently selected item
alert (item);
} ,
Items:8,//show 8
delay:500//Delay Time
});

Background processing/search/gethotsearchitems:

#region 2.0 jquery Typeahead plug-in to get search hot word asynchronously, automatic complement search box; ActionResult Gethotsearchitems ()///<summary>///2.0 jquery typeahead plugins get search hot words asynchronously, auto-fill search box >/// Each search will be the details of the user's search warehousing >///Scheduled task every 10 minutes to count the number of search terms, update the statistics to Searchrank table///</summary>///<returns>json </returns> public ActionResult Gethotsearchitems () {//2.1 First get the current search word "query" string query = request["Query"];//2.2 from number According to the Library query this field of hot Word collection ibll.
Isearchrankservice hotservice = OperateHelper.Current.serviceSession.SearchRankService; 2.3 The collection of hot words containing this search term is retrieved from the database and sorted by number of searches, returning the data to typeahead.js list<searchrank> hotList = Hotservice.getdatalistby (s =
> s.keyword.contains (query), S => s.searchtimes); if (hotList!= null) {var list1 = hotlist.select (h => New {name = H.keyword, times = H.searchtimes}).
ToList ();
ArrayList list2 = new ArrayList ();
int i = 1; foreach (var item in List1) {List2. ADD (String.
Format ("<a class=\" cat\ "href=\" #\ ">{0}</a>{1}", I, Item.name));
i++; Return Json (List2, JSONREQUESTBEHAVIOR.ALlowget); 
else {return Json ("", Jsonrequestbehavior.allowget);}} #endregion

Let's do it first.