Вот код, который может помочь вам.
Используется библиотека jquery Javascript. Предполагается, что вы получаете полный HTML-код списка результатов, который вы хотите отобразить пользователю. Вам понадобится больше Javascript для динамического отображения / скрытия поля со списком. Вам также понадобится серверный скрипт, который получает набор результатов поиска на основе некоторого поискового текста. Этот сценарий должен находиться по URL-адресу, определенному в теге # searchPartialUrl (который можно скрыть). Текст для поиска должен быть введен с именем # searchText .
Мне нравится этот метод, потому что вы можете хранить свой код JS в отдельном файле и использовать его повторно. Вашему серверу просто нужно создать представления HTML, которые содержат всю информацию о целевых асинхронных данных в обычных тегах HTML.
Я также ввел задержку между проверкой ключевых событий, чтобы вы не отправляли запросы на свой сервер постоянно. (Я получил этот метод из другого ответа на stackoverflow, но я не могу найти его сейчас. Я дам кредит, когда я это сделаю.)
// This function is used to delay the async request of search results
// so we're not constantly sending requests.
var mydelay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
var asyncSearchForm = function(onSuccess) {
var keyupWrapper = function(keyCode) {
// if this key was an arrow key, then
// ignore the press
for (var i = 37; i <= 40; i++)
if (keyCode == i)
return;
// get all the search info from the form
var searchText = $('#searchText').val();
var searchPartialUrl = $('#searchPartialUrl').val();
// make the ajax call
$.ajax({
type: "POST",
url: searchPartialUrl,
data: {
searchText: searchText
},
dataType: "html",
// on success, the entire results content should be replaced
// by the results returned
success: function(data, textStatus, jqXHR) {
$('#searchResults').html(data);
onSuccess();
},
// on error, replace the results with an error message
error: function(jqXHR, textStatus, errorThrown) {
$('#searchResults').html('<p>An error occurred while getting the search results.</p>');
}
});
};
onSuccess = (typeof (onSuccess) == 'undefined') ? function() { } : onSuccess;
// On each key-up event, we'll search for the given input. This event
// will only get triggered according to the delay given, so it isn't
// called constantly (which wouldn't be a good idea).
$('#searchText').keyup(function(e) {
// delay between each event
mydelay(function() {
// call key up
keyupWrapper(e.keyCode);
}, 500);
});
}
Обновление:
Вы сказали, что используете C #. Если вы используете MVC, вам нужно действие в вашем контроллере, чтобы стать целью для вашего асинхронного запроса. Вот пример:
[HttpPost]
public ActionResult GetSearchResults(string searchText)
{
// Here, you should query your database for results based
// on the given search text. Then, you can create a view
// using those results and send it back to the client.
var model = GetSearchResultsModel(searchText);
return View(model);
}