Я использую автозаполнение jQuery с текстовым полем под asp.net mvc 2, и все работает нормально. Я набираю поиск, и он возвращает список результатов. Но если я наберу несколько символов, затем вернусь назад и сотру весь текст из текстового поля, я хочу, чтобы появился список элементов по умолчанию. К сожалению, вызов ajax для моего контроллера не запускается после возврата и удаления всего текста.
Одна вещь, которую я должен упомянуть, я использую автозаполнение немного по-другому. Я использую функцию автозаполнения, чтобы действовать как механизм фильтрации. Когда пользователь вводит текст в текстовое поле, выполняется вызов ajax, и результаты вводятся в тег div. Я не хочу, чтобы стандартный раскрывающийся список появлялся под текстовым полем, я просто хочу использовать функциональность, предоставляемую автозаполнением, для динамического отображения списка элементов на странице, когда я набираю строку фильтра.
Я делаю это, потому что список результатов исчисляется сотнями, и возможность ввести несколько символов и вернуть отфильтрованный результат значительно ускоряет поиск элемента в списке.
Чтобы обойти это, я попытался подключиться к событиям onchange / onkeypress / onkeyup в текстовом поле и т.д. и проверить, есть ли текст в текстовом поле, и если его нет, отобразить список по умолчанию. Но опять же не хочет у меня работать. Как будто события текстового поля не срабатывают, когда текст удаляется из текстового поля.
Я хотел бы найти способ, чтобы при удалении текста в текстовом поле поиск по умолчанию выполнялся автоматически.
Вот мой 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()); }