прикрепить событие к автозаполнению jquery - PullRequest
1 голос
/ 26 января 2012

У меня есть это:

$("#term").autocomplete({
  minLength: 2,
  source: function( request, response ) {
    $.ajax({
      url: 'http://query.yahooapis.com/v1/public/yql',
      dataType: 'JSONP',
      data: {
        format: 'json',
        q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q=' + escape(request.term) + '"'
      },
      success: function(data) {
        response($.map(data.query.results.toplevel.CompleteSuggestion, function(item) {
          return { label: item.suggestion.data, value: item.suggestion.data };
        }));
      }
    });
  }
});

Таким образом, автозаполнение имеет встроенную функцию для события keyup.Но как мне дать ту же самую «функцию (запрос, ответ)» при нажатии чего-либо (в данном случае = ul li)?Как мне прикрепить событие onclick для выполнения автозаполнения?

вот текущая версия: JsBin

Ответы [ 3 ]

2 голосов
/ 26 января 2012

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

select: function(e, ui){
    $("#term").autocomplete('search', ui.item.value);
}

Демо

1 голос
/ 26 января 2012

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

Используется следующее:

$('#term').autocomplete('search', 'Napoleon');

Если вы хотите начинать новое предложение каждый раз, когда элемент выбирается в меню, вы можете использовать событие select.Он срабатывает, когда элемент выбирается из списка предложений, либо щелкая мышью по элементу, либо с помощью клавиатуры:

$("#term").autocomplete({
    ...,
    select: function(e, ui) {
        $('#term').val(ui.item.value).autocomplete('search', ui.item.value);
    }
});

Свойство ui.item является выбранным элементом данных.

Я настроил демонстрацию, в которой при нажатии кнопки будет выполняться поиск термина, связанного с атрибутом «data-»:

DEMO

Дополнительное чтение:

1 голос
/ 26 января 2012

Я немного растерялся с) и} в моем фрагменте, но вы должны использовать опцию select

$("#term").autocomplete({
    source: function(request, response){
        $.ajax({
            url: 'http://query.yahooapis.com/v1/public/yql',
            dataType: 'JSONP',
            data: {
                format: 'json',
                q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q=' + escape(request.term) + '"'
            },
            success: function(data) {
                response($.map(data.query.results.toplevel.CompleteSuggestion, 
                    function(item) {
                        return { label: item.suggestion.data, value: item.suggestion.data };
                    }));
            } /* end succes function */
            }); /* end ajax function */
    }, /* end source function */
    minLength: 2,
    select: function(event, ui) {
       $("#term").val(ui.item.value); /* to set the clicked value in the input */
       $("#btn").click(); /* to submit the form, replace with your button*/
    }
});

РЕДАКТИРОВАТЬ: Я добавил несколько комментариев для себяпроверьте, нет ли там скобок (смеется)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...