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內容

回答

相關問題