jQuery AJAX загружает содержимое json при загрузке страницы, лучше его загрузить при вводе в поле поиска

Question

Я не уверен, почему это происходит, но когда моя страница загружается, сразу появляется XHR-запрос для результатов поиска. Он невидим для пользователя, но загружает довольно большой кусок данных json.

Вот мой код:

$.ajax({
  type: "POST",
  url: "http://localhost:8888/index.php/ajax/get_client",
  dataType: "json", data: "{}",
  success: function(data) {
    $('#search').autocomplete({
        source:data,
        minLength:2,
        delay:0,
        appendTo:'header',
        selectFirst:true,
        select:function(event, ui) {
            $("input#search").val(ui.item.value);
            $("#search").closest('form').submit();
        }
    });
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown);
  }
});

Как мне сделать так, чтобы данные json запрашивались только тогда, когда пользователь вводит в поле ввода input #?

Answer 1

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

$(document).ready(function(){
    var searchInput = $("input#search");
    function loadData(onSuccess){
        $.ajax({
          type: "POST",
          url: "http://localhost:8888/index.php/ajax/get_client",
          dataType: "json", data: "{}",
          success: onSuccess,
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
          }
        });
    }
    function initializeAutocomplete(data){
         searchInput.addClass('loaded').autocomplete({
            source:data,
            minLength:2,
            delay:0,
            appendTo:'header',
            selectFirst:true,
            select:function(event, ui) {
                searchInput.val(ui.item.value).closest('form').submit();
            }
        });
    }
    searchInput.keyup(function(){
        if($(this).is(".loaded")) return;
        loadData(initializeAutocomplete);
    });
});

Answer 2

Вам необходимо привязать слушатель события keyup к вашему полю ввода. Если вы вставили этот код прямо в html-страницу без прослушивателя событий, код будет выполнен сразу после загрузки вашей страницы.

Это, вероятно, должно работать: http://jsfiddle.net/XNbrX/

Я не проверял.

Answer 3

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

$('input#search-box').keyup(function() {
    $.ajax({
    type: "POST",
      url: "http://localhost:8888/index.php/ajax/get_client",
      dataType: "json", data: "{}",
      success: function(data) {
        $('#search').autocomplete({
            source:data,
            minLength:2,
            delay:0,
            appendTo:'header',
            selectFirst:true,
            select:function(event, ui) {
                $("input#search").val(ui.item.value);
                $("#search").closest('form').submit();
            }
        });
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
      }
    });
});

Answer 4

Оберните ваш ajax-вызов в событие button.click () или, если вы хотите, чтобы он вызывался, пока пользователь печатает, поместите его в событие textbox.keypress ().