Php jQueryAjax在页面加载时加载json内容，而不是在搜索框中键入时加载

我不知道为什么会发生这种情况，但当我的页面加载时，会立即出现一个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数据只在用户在“输入搜索”框中键入时才被请求？

将ajax调用包装到按钮中。单击（）事件，或者如果希望在用户键入时调用它，则将其放入textbox.keypress（）事件中。

需要将keyup事件侦听器绑定到输入框。 如果在没有事件侦听器的情况下将此代码直接插入html页面中，则代码将在页面加载后立即执行

这可能会起作用：

---

我还没有测试过它。

我不知道我是否理解您的意思，但我认为您希望在每次按键（真正的按键）时运行此代码，以便在每次更改搜索框值时加载结果。 如果我是对的，将代码放入函数中，该函数在“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);
      }
    });
});

---

看起来您希望加载一个自动完成结果列表，然后仅在用户开始键入时初始化自动完成插件。为此，将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);
    });
});

---

我以前尝试过这个方法，问题是每次按键时都会请求json。投票赞成上述解决方案。