Сосредоточиться на текстовом поле после отправки, используя ASP. NET Core MVC

Question

Я пытаюсь ввести динамическую c функцию поиска в моем проекте. Я создал форму поиска в своем представлении, которая отправляет на keyup, но проблема, с которой я не сталкиваюсь, заключается в том, что, когда представление перезагружается, текстовое поле больше не находится в фокусе, и поэтому пользователь должен нажать на него, чтобы очевидно, не идеален.

Мое представление настроено следующим образом:

<form id="searchForm" asp-action="Index" method="get">

    <div class="row">
        <div class="col-9">
            <input type="text" id="fooSearch" name="searchString" value="@ViewData["currentFilter"]" class="form-control" />
        </div>
        <div class="col-3">
            <div class="row">
                <div class="col-6">
                    <input type="submit" value="Search" class="btn btn-outline-secondary form-control" />
                </div>
                <div class="col-6">
                    <a asp-action="Index" asp-route-recent="true" class="btn btn-outline-secondary form-control">Recent</a>
                </div>
            </div>
        </div>
    </div>
</form>

со следующим JQuery сценарием для отправки на keyup

        $(function () {
            $('#fooSearch').keyup(function () {
                $('#searchForm').submit();
            });
        });
    </script>

Может ли кто-нибудь помочь мне сохранить фокус на текстовом поле поиска при загрузке DOM?

Answer 1

Во всех случаях при первой загрузке или перезагрузке (отправке) фокус должен быть на текстовом поле поиска, поэтому я думаю, что вы можете просто сфокусировать текстовое поле на загрузке.

$(function() { $("#fooSearch").focus();});

Проблема, с которой вы можете столкнуться является то, что курсор не будет в конце ключевых слов. Поэтому я считаю, что лучше всего использовать Ajax для обновления результатов каждый раз, когда пользователь меняет ключевые слова. Возможно, стоит подождать несколько секунд перед каждым обновлением.

Answer 2

Если вы используете html5, вы можете просто добавить автофокус к тегу html, например:

<input type="text" id="fooSearch"  autofocus ="autofocus" name="searchString" value="@ViewData["currentFilter"]" class="form-control" />

Answer 3

Чтобы вернуть фокус на панель поиска, вы можете использовать jQuery focus(), например:

$("#fooSearch").focus();

Теперь, где вы разместите это, зависит от того, является ли отправка вашей формы синхронной ( и делает перезагрузку страницы) или асинхронной.

Если отправка асинхронная, вы можете поместить это в ваш обработчик событий keyup, сразу после кода, который отправляет:

$('#fooSearch').keyup(function () {
    $('#searchForm').submit();
    $("#fooSearch").focus(); //focus back on the search bar
});

В противном случае вам нужно будет позвонить focus() из события onload:

$(document).ready(function() {
    $("#fooSearch").focus();
});