Блог

У меня есть функция поиска, которую я пытаюсь реализовать. Я хотел бы, чтобы пользователь мог вводить свой «Поиск», и ajax срабатывает при вводе пользовательских типов, чтобы помочь с поиском их «Поиска».

Я хотел бы, чтобы пользователь мог вводить свой «Поиск», и ajax срабатывает при вводе пользовательских типов, чтобы помочь с поиском их «Поиска».

Это то, что у меня есть; Это работает, но требует, чтобы пользователь нажал поиск.

                     jQuery(document).ready(function($) {
                        // Let us trigger the search if the user clicks on the search button.
                        $('.btnSearch').click(function(){
                            makeAjaxRequest();
                        });
                        // Let us trigger the search if the user submit the form by an enter.
                        $('form').submit(function(e){
                                e.preventDefault();
                                makeAjaxRequest();
                            return false; 
                        });

                        function makeAjaxRequest() {
                            $.ajax({
                                url: 'searchAction.php',
                                data: {name: $('input#name').val()},
                                type: 'get',
                                success: function(response) {
                                    $('table#resultTable tbody').html(response);
                                }
                            });
                        }
                    });
  

Вам нужно привязать вашу функцию к keyup -событию поля ввода.

Добавляем следующую строку кода внутри $(document).ready() -функции

 $( "#name" ).keyup(makeAjaxRequest);
  

может помочь вам.

Чтобы выполнять AJAX-запрос только для минимальной длины трех символов в поле ввода, вы можете изменить свою makeAjaxRequest() функцию следующим образом:

 function makeAjaxRequest() {
  if($('input#name').val().length > 2) {
    $.ajax({
      url: 'searchAction.php',
      data: {name: $('input#name').val()},
      type: 'get',
      success: function(response) {
        $('table#resultTable tbody').html(response);
      }
    });
  }
}
  

Вероятно, вы не захотите выполнять поиск в keyup, поскольку для этого пользователю потребуется выполнить 5 вызовов ajax для поиска слова «Привет».

Рассмотрим панель поиска Google: Он автоматически покажет результаты поиска, когда посчитает, что знает, чего вы хотите, но не при каждом нажатии клавиши.

Я написал небольшой плагин событий для jQuery, который делает это. Это всего лишь 20 строк полностью отформатированного кода. Скопируйте его и измените по своему вкусу или используйте как есть.. Вот пример:

     <script src='//raw.githubusercontent.com/Pamblam/textChange/master/textChange.js'>
    <script>
        jQuery(document).ready(function($) {
            $('input#name').textChange(makeAjaxRequest);
            function makeAjaxRequest() {
                $.ajax({
                    url: 'searchAction.php',
                    data: {name: $('input#name').val()},
                    type: 'get',
                    success: function(response) {
                        $('table#resultTable tbody').html(response);
                    }
                });
            }
        });
    </script>
  

 $("input").keyup(function(){
  $("#keyup").text("keyup: " $(this).val());
});
$("input").textChange(function(){
  $("#textchange").text("textchange: " $(this).val());
});  

 b{display:block;}  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='//raw.githubusercontent.com/Pamblam/textChange/master/textChange.js'></script>

<b>Type a few words:</b>
<input autofocus />
<div id='keyup'>keyup: </div>
<div id='textchange'>textchange: </div>  

Это может быть возможно с помощью автозаполнения пользовательского интерфейса Jquery.

https://jqueryui.com/autocomplete/