Это один из недостатков кодов публикации: окно поиска почти сломано пользователями сети! ! ! Некоторые люди сознательно входят в пространство, некоторые люди входят или 1 = 1, некоторые люди предупреждают, некоторые люди входят в HTML ... и кажется, что они все еще играют, поэтому отпустите их, если они счастливы.
В проектах часто используется функция автоматического завершения блока ввода, точно так же, как окно поиска, такие как Baidu и Taobao: Когда пользователь входит в первоначальную букву и ключевое слово, фон быстро вернет соответствующие записи и отобразит их на стойку регистрации для пользователей, чтобы выбрать и улучшить пользовательский опыт. Конечно, функция завершения этого проекта не сопоставима с технологией этих основных производителей, но этого более чем достаточно для поиска на месте.
Есть два основных плагина автоматического завершения, с которыми мы вступили в контакт : AutoCoplete и Typeahead . Этот сайт использует Typeahead.
jQueryui-Autocopplete
Автоматическое завершение плагина-в Bootstrap-3-типах
Связанный параметр Описание:
Источник: функция (запрос, процесс) {}. Запрос представляет строку в текущем вводе текста. В этом методе данные могут быть запрошены на фоне (объект JSON в форме массива) через AJAX, а затем возвращаемый объект используется в качестве параметра процесса;
Formatitem : function (item) {}. Конкретный объект JSON, который возвращает данные, преобразуется в формат строки, который используется для отображения его в списке подсказок, а возвращаемое значение: String;
setValue : function (item) {}. Когда выбран элемент в списке подсказок, установите значение, отображаемое в окне ввода текста, и значение, которое фактически необходимо получить. Формат возвращаемого значения: {'Value': item [«свойство элемента значения, отображаемое в окне ввода»], «реальная стоимость»: элемент [«свойство элемента фактического значения, которое необходимо получить»]}, позже, это значение может быть получено через свойство реального значения текстового входного окна;
Элементы : максимальное количество наборов результатов для автоматических подсказок завершения, по умолчанию: 8;
Minlength: процесс сопоставления будет выполняться только тогда, когда строка в текущем вводе текста достигнет значения свойства. По умолчанию: 1;
Задержка : после указания количества задержки миллисекунды, данные запрашиваются на фоне, чтобы предотвратить частые запросы на фоне часто вызваны быстрым вводом. По умолчанию: 500
Конкретный код заключается в следующем:
Сначала представить файл JS
<script src = "~/scripts/jquery-1.9.0.js"> </script> <script src = "~/scripts/bootstrap.js"> </script> <script src = "~/content/js/bootstrap3-typeahead.js"> </script>
HTML -код:
<form id = "searchform" rol = "search" target = "_ blank" method = "get" action = "/search/index"> <div> <input type = "text" id = "searchwords" name = "searchwords" provide = "typeahead" Autocomplete = "off" wepsTord = "Пожалуйста, введите ключевое слово для поиска"> </divehead ". id = "searchbtn"> search </button> </form>
JS для обработки, связанных с терминами поиска:
// Поиск автоматически завершен; Зарегистрируйте окно поиска с помощью автоматической ассоциации события AutoComplate: function () {jQuery ('#Searchwords'). TypeaHead ({Source: Function (Query, Process) {// Query - это входное значение jQuery.getJson ('/search/gethotsearchitems', {"Query": Query}, function (depants) {deceplic); {return item.replace (/<a (.+?) <// a>/, "");Фоновая обработка/поиск/gethotsearchitems:
#region 2.0 jquery plug-in plug-in aSynchronals получает поиск горячих слов и автоматически завершает окно поиска; 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 Получить текущий поисковый термин «Query» string Query = request ["Query"]; // 2.2 Запрос коллекции горячих слов этого поля из базы данных ibll.isearchrankservice hotservice = hoperatehelper.currant.servicessession.searchrankranceService. Содержит этот поисковый термин из базы данных, сортируйте его по поиску и возвращает данные в typeahead.jslist <searchrank> hotlist = hotservice.getdatalistby (s => s.keyword.contains (query), s => s.searchtimes); if (hotlist! H.SearchTimes}). Tolist (); ArrayList List2 = new ArrayList (); int i = 1; foreach (var in list1) {list2.add (string.format ("<a class =/" cat/"href =/"#/"> {0} </a> {1}", i, item.name); Jsonrequestbehavior.allowget);} else {return json ("", jsonrequestbehavior.allayget);}} #endregionДавайте сделаем это на данный момент.