Question

我有这个：

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

Answer 1

使用select事件，然后通过传递可从事件参数中获取的值来触发自动完成搜索。

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

<强> Demo

Answer 2

我在我的代码段中对于}和}有点迷失，但你应该使用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*/
    }
});

编辑：我为自己添加了一些评论，以检查是否有丢失括号（lol）

Answer 3

你的问题不是很清楚。据我了解，该插件提供了一种“搜索”方法，以编程方式启动搜索，就像您直接在输入字段中输入一样。

使用如下：

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

进一步阅读：

"search" method of autocomplete

将事件附加到jquery自动完成

3 个答案: