Избегайте несколько вызовов сервера, «сам-фильтрацию» JqueryUI автозаполнение

Question

Рассмотрят «Метод А: нет Аякса»:

$(function() { 
    var emails = [ 
     "john@beatles.com", 
     "george@beatles.com", 
     "paul@beatles.com", 
     "ringo@beatles.com" 
    ]; 

    $("#invitees").autocomplete({ 
      source:emails 
    }); 
}); 

Это дается относительно небольшой «нефильтрованного» массива. Функция автозаполнения фильтрует ее для вас по мере ввода. Я хочу получить эти данные один раз, тем самым требуя только одного вызова в базу данных.

Рассмотрим «Метод B:„внутренний“URL:.

$("#invitees").autocomplete({ 
    source:"/api/get/users" 
}); 

Это не работает, как я ожидаю, что это Независимо от того, что я типа, весь список всегда есть теперь, после исследования чтения. docs, другие вопросы S/O и каждый пример, который я могу найти, - они обычно заключают с чем-то вроде этого:

«Данные должны быть отфильтрованы на стороне сервера. Автозаполнения виджет добавляет термин параметр в URL, поэтому полученный URL что-то вроде: /search.php?term=whatityped

Я могу справиться с этим, но это не полностью происходит в «Method A», это? Для больших наборов данных я получаю: нет необходимости предварительно загружать 100 000 результатов. Но в этом случае я хочу иметь возможность запускать один запрос и делать с ним. Таким образом, если мобильный пользователь стоит в пустыне с «одной полосой» обслуживания, его телефон не будет блокироваться, пока сервер неоднократно запрашивает новые данные каждый раз, когда он набирает письмо, верно?

Когда запрос идет на внутренний URL: '/ API/получить/пользователей' ... вот соответствующая часть кода PHP:

function get($className,$param1="all",$param2=""){ 
    //above parameters will be refactored... 
    $stmt=$this->db->prepare('SELECT username FROM users'); 
    $stmt->execute(); 
    $this->data=$stmt->fetchAll(PDO::FETCH_COLUMN); 
    echo json_encode($this->data); 
} 

Эта функция возвращает:

["john@beatles.com","george@beatles.com","paul@beatles.com","ringo@beatles.com"] 

Итак, еще раз, если я явно это сделать, фильтрация работает:

var emails = [ 
     "john@beatles.com", 
     "george@beatles.com", 
     "paul@beatles.com", 
     "ringo@beatles.com" 
    ]; 

    $("#invitees").autocomplete({ 
      source:emails 
    }); 

, но это не делает:

$("#invitees").autocomplete({ 
    source:"/api/get/users" 
}); 

Что мне здесь не хватает?

PS: Это неопубликованная попытка метода C, кстати, «ajax callback»: (Примечание: оно предназначено для принятия ассоциативного массива из PHP, но дело в том, что он также не является " фильтр ")

$("#invitees").autocomplete({ 
    source: function(request,response){ 
     $.ajax({ 
      url:"/api/get/users", 
      dataType:"json", 
      data:{ 
       maxRows:5, // ? does not work 
       //name_startsWith: request.term // ? does not work 
      }, 
      error: function(xhr,status){ 
       alert(status); 
      }, 
      success: function (data){ 
       // alert(data); 
       response($.map(data,function (item){ 
        return{ 
         label: item.username, 
        }; 
       })); 
      } 
     }); 
    } 
}); 
//ensures autocomplete is not set to "off" 
$('input[name=invitees]').attr('autocomplete','on'); 

Для полноты, вот мой HTML:

<label for="invitees">Invite by email: </label> 
<input id="invitees" name="invitees"/> 

Answer 1

Вы можете поместить функцию автозаполнения внутри функции обратного вызова и передавать возвращаемые данные в этом.

Пример:

 $.getJSON('/myJSONdata', function(data) { 
      $("#input_field").autocomplete({ 
      source: data 
      }); 
     }); 

Это будет назначить функцию автозаполнения в нужных полях после обратного вызова завершена, и данные будут назначены так же, как если бы это был обычный текст, написанный в функцию.

Функция автозаполнения, очевидно, не будет работать до тех пор, пока обратный вызов не завершится успешно, так что это то, что вы можете иметь в виду.