Как реализовать поиск текстового поля как в стеке переполнения сайта?

Question

У меня есть текстовое поле поиска на веб-странице.Когда пользователь нажимает клавишу ввода после ввода текста в это текстовое поле, тогда должна выполняться функция поиска.Как это сделать?

Answer 1

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

Answer 2

Я реализовал эту функцию очень легко! У меня есть текстовое поле поиска и кнопка с style ="display:none". Эти элементы управления окружены панелью ASP, в качестве идентификатора кнопки я установил свойство панели DefaultButton. Теперь при вводе текста и нажатии клавиши ввода выполняется функция поиска, присутствующая в событии нажатия кнопки, а также кнопка также не видна пользователю !!!

Answer 3

в основном вы можете сделать это так: мне нравится использовать jquery для большинства javascript для совместимости с разными браузерами

$("#btnID").keypress(function(event){
            //filter enter key only
            if(event.keyCode == 13){
                //do something here
            }
            return true;
        });

Answer 4

Если в форме есть только одно поле ввода, то форма будет отправлена ​​при нажатии клавиши ввода, даже если кнопки «Отправить» нет.

например,

<form action="/search">
    <input type="text" value="search text">
</form>

будет отправлено, когданажата кнопка ввода.

Answer 5

Если это единственное текстовое поле в вашей форме, то нажатие клавиши ввода приводит к запуску обработчика onsubmit. Но это представит всю страницу. Если вы хотите выполнить команду ajax onsubmit и не обновить всю страницу, убедитесь, что ваш обработчик onsubmit возвращает false.

Для отправки обычной полной страницы формы при нажатии Enter:

  <form action="/doit">
     <input type="text" value=""/>
  </form>

Для отправки формы ajax при нажатии Enter можно использовать что-то вроде этого кода jquery:

  $("form").submit(function() {
     $.ajax(...);
     return false;
   });