jQuery AJAX 在页面加载时加载 json 内容，宁愿在搜索框中输入时加载它答案

【问题标题】：jQuery AJAX loads json contents at page load, would rather load it when typing in search boxjQuery AJAX 在页面加载时加载 json 内容，宁愿在搜索框中输入时加载它
【发布时间】：2012-02-02 23:24:06
【问题描述】：

我不确定为什么会发生这种情况，但是当我的页面加载时，搜索结果会立即出现 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);
  }
});

我怎样才能做到只有当用户在 input#search 框中键入时才请求 json 数据？

【问题讨论】：

标签： php jquery ajax json codeigniter

【解决方案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);
    });
});

【讨论】：

【解决方案2】：

将您的 ajax 调用封装到 button.click() 事件中，或者如果您希望在用户键入时调用它，请将其放入 textbox.keypress() 事件中。

【讨论】：

【解决方案3】：

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

这应该可以工作：http://jsfiddle.net/XNbrX/

我没有测试过。

【讨论】：

【解决方案4】：

我不知道我是否理解你，但我认为你想在每次按键时运行此代码（真的是向上键）以加载搜索框值每次更改的结果。如果我是对的，请将您的代码放入“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);
      }
    });
});

【讨论】：

我之前试过这个，问题是每次按键都需要json。投票支持上述解决方案。