附上事件的jquery自动完成

我有这样的：附上事件的jquery自动完成

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

来源

2012-01-26 Youss

你是什么意思 “一下东西的时候”。点击什么？完全外部元素或自动完成的一部分？ –

自动完成功能将json结果作为ul，li在元素下以'term'作为id。所以Youss想知道如何检索该选择的价值和使用它（我认为） –

Didier Ghys嗨，我的意思是单击列表项目会给出另一个搜索/结果（按该项目的值） – Youss

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

使用如下：

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

如果你想一个元素在菜单中选择每次开始一个新的建议，你可以使用select事件。

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

属性ui.item是被选择的数据项：当选择了推荐列表，或者通过cliking一个项目，或具有键盘的元件则trigerred。

我已经设置了一个演示，其中cliking一个按钮，任期联想搜索到 “数据 - ” 属性：

DEMO

延伸阅读：

"search" method of autocomplete

来源

2012-01-26 10:48:04

嗨，感谢您的重播。我想我正在寻找一种方法来使用'select'事件，它将把列表项的值放入输入中，而不是关闭它必须再次请求的ul li，这将导致不同的（xml）列表[link ] http://jqueryui.com/demosplete/#event-select [链接] – Youss

自动完成插件绝对没有这样工作，所以...祝你好运。在用户体验和可用性方面也没有多大意义。请记住，人们喜欢使用他们熟悉的东西。 –

我有点在我的片段与丢失）和}，但你应该使用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*/ 
    } 
});

编辑：我添加了一些意见为自己检查是否有失踪的托架（笑）

来源

2012-01-26 10:27:48

谢谢回复。我实际上需要在单击列表项时执行搜索，而不是提交按钮像'$（“li a”）。click（）;'或'$（“。ui-menu-item a”）。click（）; '这将触发第二个请求 – Youss

洛尔，不知道你想用它来再次搜索。虽然我是第一个使用“select”解决方案的人：P –

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

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

Demo

来源

2012-01-26 16:03:52 ShankarSangoli

感谢allot，这是我的头编码:) – Youss

看起来像很多[解答]（http://stackoverflow.com/a/9016998/123127）我给了5个小时前... –

对不起，我接受你的回答（在我的脑海里，很少有时间让我感到困惑......） – Youss

附上事件的jquery自动完成

回答

相关问题