jQuery UI Автозаполнение на клавиатуре?

Question

Я работаю с библиотекой jQuery UI библиотеки autocomplete. У меня есть два поля формы на веб-странице - один из них - внутренний поиск, и один ищет контент, который моя компания управляет на стороннем сайте через REST API.

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

То, что меня попросили сделать, это объединение двух полей в одно «основное» поле поиска и скрыть два отдельных поля. Он будет искать как источников данных для ввода пользователем, так и отображать результаты в отдельных окнах с автозаполнением под полем.

Моя идея заключается в том, что если бы я мог просто изменить метод триггера для автозаполнения с «focus» на «keyup», это будет работать очень хорошо, или если бы я мог «подделать» триггер фокусировки, не отправив курсор в скрытое поле ,

Любые идеи по этому вопросу?

Update:

Вот код, который я пытался, и он не работает. Это то, что заставило меня думать, что я зависим от фокусного события.

$(function(){ 
// run autocomplete on form fields 
searchAutocomplete('/support/results_json/','#keywords'); 
searchAutocomplete('/support/zdresults_json/','#zd_search'); 
//$('#ee_searchform').hide(); // will need this later 
//$('#zd_searchform').hide(); // will need this later 
$('<form id="support_search" class="group" method=""><fieldset><legend>Search Support</legend><ol><li><label for="support_keywords">Keywords</label><input type="search" value="" name="support_keywords" id="support_keywords" /></li><li class="submit"><input type="submit" name="support_submit" id="support_submit" value="Search" /></li></ol></form>').insertAfter('#zd_searchform'); 

$('#support_keywords').keyup(function() { 
    var value = $('#support_keywords').val(); 
    $('#keywords').val(value); 
    $('#keywords').keyup(); 
}); 
}); 

Таким образом, вы можете видеть, я беру два поля формы, что HTML содержит, и убедитесь, что они называют функцию рабочего автозаполнения. Затем я использую jQuery для добавления другой формы в DOM, и когда он получает ключ, он добавляет его содержимое в одно из других полей и дает этому поле ключ. Однако это не вызывает автозаполнение.

Большое спасибо.

Answer 1

Моя первая мысль здесь, чтобы скрыть исходные поля (в центре внимания, если вы хотите) и ввести новый один до или в сочетании с отдельными фокус событий, то предлагаем вам управлять источник автозаполнения:

source: function(request, response) 
    { 
     // do both your ajax calls here and combine your results prior to providing to your field 
    } 

ТОГДА, вы можете обрабатывать результаты, используя некоторую комбинацию:

source: function(request, response) 
      {response(rows);},//where rows is an array of results 
search:function(event, ui){}, 
focus:function(event, ui){}, 
open:function(event, ui){}, 

и, наконец,

select: function(event, ui) 
      {}//handle what to do with the selection of/from the results list 

Это поможет избежать любого причудливого/сложного управления состоянием входа, и вы сможете управлять представлением результатов.

EDIT: Пример нескольких concats АЯКСА (очень простые и не сортировки и т.д.)

Смотрите эту скрипка страницу для некоторых вещей (не работает, как есть в связи с JSON Аякс не присутствует, но вы можете работать с это я надеюсь) http://jsfiddle.net/MarkSchultheiss/Z6rVE/

Как написано, он принимает JSON с MyCode, описание и SourceTable

[{"MyCode":"code","Description":"my desc","SourceTable":"mysource"},{"MyCode":"code","Description":"my desc","SourceTable":"mysource"}] 

вам просто нужно каждый источник, чтобы сказать о SourceTable (или добавить новый материал, вам может понадобиться)