jQuery UI Автозаполнение при включении? - PullRequest
Новая
       8

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

0 голосов
/ 16 декабря 2011

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

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

Однако меня попросили объединить два поля в одно «главное» поле поиска и спрятать два отдельных поля. Он будет искать в обоих источниках данных для ввода пользователя и отображать результаты в отдельных полях ui-autocomplete под полем.

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

Есть идеи по этому поводу?

Обновление:

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

$(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, и когда он получает keyup, он добавляет его содержимое в одно из других полей и дает этому полю keyup. Однако это не вызывает автозаполнение.

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

1 Ответ

0 голосов
/ 16 декабря 2011

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

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

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

РЕДАКТИРОВАТЬ: Пример нескольких ajax concats (очень просто и без сортировки и т. д.)

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

Как написано, он предполагает наличие json с MyCode, Description и SourceTable 

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

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

...