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数据？

Answer 1

看起来您想要加载列表自动完成结果，然后仅在用户开始输入时初始化自动完成插件。为此，将键盘功能绑定到搜索框，如果尚未加载结果，则加载结果并初始化插件。

$(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

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

Answer 3

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

这应该可行：http://jsfiddle.net/XNbrX/

我还没有测试过。

Answer 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);
      }
    });
});

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

4 个答案: