Как добавить “живой поиск” к ajax форме? asp.net mvc

515

12 апреля 2017, 14:18

есть вот такая ajax-форма

  @using (Ajax.BeginForm("FilterSearch", "EventDetails", FormMethod.Post, new AjaxOptions
    {
        UpdateTargetId = "thisplace"}))
    {
        <div class="form-group1" id="search" >
            <label class="col-sm-5 control-label">A word or phrase to search:</label>
            <div class="col-sm-7">
                @Html.EditorFor(model => model.Filter.SearchingItem, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter to search.." } })
            </div>
        </div>
<input type="submit" value="Search" class="btn btn-default" />
}

по нажатию кнопки Search ищем информацию и выводим её. Как сделать так чтобы оно искало еще во время ввода данных в поле, без нажатия кнопки поиска?

Answer 1

$('#search input').on('keyup', function() {
  // Здесь вызвать поиск
});

Смысл в том, что вам просто нужно отловить event на изменение значения в вашем input.

on.('change') здесь не подойдет, т.к. он сработает только после .blur на вашем input.

on.('keydown') так же не подойдет, т.к. он будет срабатывать на 1 символ раньше - если в input значение 123 и вы жмете 4, то сначала обрабатывается ваш keydown, а только потом меняется значение в input.

и для отправки формы:

$('#search input').on('keyup', function () {
    $("#Filter_SearchingItem").submit();
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Обновление DIV после загрузки страницы

Как с помощью jQuery обновить DIV после загрузки страницы?

255

jQuery

Листалка списка jQuery. Как реализовать?

Подскажите кто знает как реализовать листание списка?

266

CSS

Опустить текст из слайдера под него

Вечер добрый

266

CSS

'Font Awesome' в медиа запросах

Как уменьшить шрифтовые иконки 'Font Awesome' в медиа запросах, возможно ли это вообще?

223