This is one of the disadvantages of posting codes: the search box is almost broken by netizens! ! ! Some people deliberately enter spaces, some people enter or 1=1, some people alert, some people enter html... and it seems that they are still playing, so let them go, as long as they are happy.
In projects, the automatic completion function of the input box is often used, just like search boxes such as Baidu and Taobao: When the user enters the initial letter and keyword, the background will quickly return the related entries and display them to the front desk for users to choose and improve the user experience. Of course, the completion function of this project is not comparable to the technology of these major manufacturers, but it is more than enough for on-site searches.
There are two main automatic completion plug-ins that we have come into contact with : autocomplete and typeahead . This site uses typeahead.
jQueryUI-Autocomplete
Automatic completion plug-in-bootstrap-3-typeahead
Related parameter description:
source: function(query,process){}. query represents the string in the current text input box. In this method, data can be requested from the background (a json object in the form of an array) through ajax, and then the returned object is used as a parameter of the process;
formatItem : function(item){}. The specific json object that returns the data is converted into a string format, which is used to display it in the prompt list, and the return value is: string;
setValue : function(item) {}. When an item on the prompt list is selected, set the value displayed in the text input box and the value that actually needs to be obtained. Return value format: {'data-value':item["item property of the value displayed in the input box"],'real-value':item["item property of the actual value that needs to be obtained"]}, later, this value can be obtained through the real-value property of the text input box;
items : The maximum number of result sets for automatic completion prompts, default: 8;
minLength: The matching process will be performed only when the string in the current text input box reaches the property value. Default: 1;
delay : After specifying the number of delay milliseconds, data is requested from the background to prevent frequent requests from the background from being frequently caused by fast input. Default: 500
The specific code is as follows:
First introduce js file
<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" role="search" target="_blank" method="get" action="/Search/Index"><div><input type="text" id="searchWords" name="searchWords" data-provide="typeahead" autocomplete="off" placeholder="Please enter the keyword to search for"></div><button type="submit" id="searchbtn">Search</button></form>
js for processing related search terms:
//Search automatically complete; register the search box with the automatic association completion 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>/, ""); //Be sure to return here, otherwise you will not display it}, afterSelect: function (item) {//The time after the item is selected, item is the currently selected item alert(item);},items: 8, //Show 8 delays: 500 //Delay time});},Background processing/Search/GetHotSearchItems:
#region 2.0 jquery typeahead plug-in asynchronously obtains search hot words and automatically completes the search box; ActionResult GetHotSearchItems()/// <summary>/// 2.0 jquery typeahead plug-in asynchronously obtains search hot words and automatically completes the search box>//// Every time search, the details of the user search are included in the library>//// Timed task counts the number of search terms every 10 minutes and updates the statistics to the SearchRank table//// </summary>/// <returns>JSON</returns>public ActionResult GetHotSearchItems(){//2.1 Get the current search term "query"string query = Request["query"];//2.2 Query the hot word collection of this field from the database IBLL.ISearchRankService hotService = OperateHelper.Current.serviceSession.SearchRankService;//2.3 Retrieve the hot word collection containing this search term from the database, sort it by searches, and return the data to typeahead.jsList<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);}} #endregionLet's do it for now.