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

我不确定为什么会发生这种情况，但是当我的页面加载时，会立即为搜索结果发出XHR请求。它对用户是不可见的，但它加载了相当大的json数据块。jQuery AJAX在页面加载时加载json内容，宁愿在搜索框中输入时加载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数据仅要求当用户在输入＃搜索框？

来源

2012-02-02 dallen

看起来要加载列表自动完成的结果，然后初始化只有当用户开始输入的自动完成插件。为此，如果结果尚未加载，则将搜索框绑定到搜索框，然后加载搜索结果并初始化插件。

$(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); 
    }); 
});

来源

2012-02-02 23:33:42 ggreiner

太棒了，谢谢。说得通。 – dallen 2012-02-02 23:42:32

将ajax调用换成button.click（）事件，或者如果您希望在用户输入时调用它，请将其放入textbox.keypress（）事件中。

来源

2012-02-02 23:28:31

您需要将键入事件侦听器绑定到您的输入框。如果你已经在HTML页面中插入了这段代码而没有事件监听器，代码将在页面加载后立即执行。

这也许应该工作：http://jsfiddle.net/XNbrX/

我没有测试它。

来源

2012-02-02 23:32:42 tftd

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

来源

2012-02-02 23:33:20

我以前试过这个，问题是每次按下按键时都会请求json。为上面的解决方案投票。 – dallen 2012-02-02 23:43:24

好的。我不明白你好:) – 2012-02-03 08:28:35

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

回答

相关问题