Я использую автозаполнение jQuery с текстовым полем под asp.net mvc 2, и все работает отлично. Я печатаю в поиске, и он возвращает список результатов. Но если я наберу некоторые символы, затем вернусь назад и сотру весь текст из текстового поля, я хочу, чтобы появился список элементов по умолчанию. К сожалению, вызов ajax на мой контроллер не запускается после возврата и удаления всего текста.
Одна вещь, которую я должен упомянуть, я использую автозаполнение немного по-другому. Я использую функцию автозаполнения, чтобы действовать как механизм фильтрации. Когда пользователь вводит текстовое поле, выполняется ajax-вызов, и результаты вводятся в тег div. Я не хочу, чтобы стандартный раскрывающийся список отображался под текстовым полем, я просто хочу использовать функциональность, предоставляемую автозаполнением, для динамического отображения списка элементов на странице при вводе строки фильтра.
Я делаю это потому, что список результатов исчисляется сотнями, и благодаря возможности ввода нескольких символов, возвращая отфильтрованный результат, можно значительно быстрее найти элемент в списке.
Чтобы обойти это, я попытался подключиться к событиям onchange / onkeypress / onkeyup и т. Д. Textbox и проверить, есть ли текст в текстовом поле, и если нет, отобразить список по умолчанию. Но опять же он не хочет работать на меня. Как будто события текстового поля не запускаются при удалении текста из текстового поля.
Я хотел бы найти способ, чтобы при удалении текста в текстовом поле поиск по умолчанию выполнялся автоматически.
Вот мой HTML ...
<% using (this.Html.BeginForm("Filter", "Guilds"))
{%>
Filter:
<input type="text" name="SearchFilterText" value="" id="filterTextBox" onkeyup="onfilterchange();" />
<%
}%>
<script type="text/javascript">
$(function () {
$("#filterTextBox").autocomplete({
source: [""],
search: function (event, ui) {
populatelist();
return true;
},
minLength: 1,
delay: 300
});
});
</script>
<div id="success">
<% Html.RenderPartial("GuildList", this.Model); %>
</div>
<div id="error">
</div>
вот мой сценарий в разделе заголовка ....
function populatelist() {
var url = "/FilteredGuilds///";
$.ajax({
url: url + $("#filterTextBox").val(),
dataType: "html",
success: function(response, status, xhr) {
$('#success').html(response);
$("#error").html("");
},
error: function(response, status, xhr) {
if (status == "error") {
$("#success").html("");
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
}
});
}
function onfilterchange(){
if($("#filterTextBox").val() == null | $("#filterTextBox").val() ==""){
populatelist();
}
}
А вот и мой контроллер действий ...
[HttpGet]
public PartialViewResult Filter(string realm, DateTime date, string filter)
{
var guildNames = this._repository.GetGuildNames(date, realm);
if (string.IsNullOrEmpty(filter)) return PartialView("GuildList", guildNames);
return PartialView("GuildList", guildNames.Where(x => x.Name.ToLower().Trim().Contains(filter.ToLower().Trim())).ToList());
}