jQuery AJAX loads json contents at page load, would rather load it when typing in search box

Question

I'm not sure why this is happening, but when my page loads, there's an XHR request immediately for the search results. It's invisible to the user, but it's loading a fairly large chunk of json data.

Here's my code:

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

How can I make it so the json data is only requested when the user types in the input#search box?

Answer 1

It looks like you want to load a list autocomplete results and then initialize the autocomplete plugin only if the user starts typing. To do this, bind a keyup function to the search box, if the results have not been loaded, then load the results and initialize the plugin.

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

You need to bind a keyup event listener to your input box. If you've inserted this code right inside your html page without a event listener, the code will execute right after your page loads.

This should probably work: http://jsfiddle.net/XNbrX/

I haven't tested it.

Answer 4

I don't know if I understand you, but I think that you want to run this code on every key press (really key up) to load results on every change of search box value. If I'm right, put your code into function which is triggered on 'onkeyup' event.

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