我们可以使用 jQuery UI 自动完成来填充现有的选择框吗？答案

【问题标题】：Can we use jQuery UI autocomplete for populating an existing select box?我们可以使用 jQuery UI 自动完成来填充现有的选择框吗？
【发布时间】：2012-10-30 20:54:26
【问题描述】：

有没有办法使用jQuery UI 自动完成不打开建议下拉菜单但填充现有的选择框？

可以使用类似的解决方法

http://www.barelyfitz.com/projects/filterlist/

或

http://andrew.hedges.name/experiments/narrowing/

但是我们可以使用 jQuery UI 吗？

【问题讨论】：

您的示例链接看起来像简单的过滤器，而不是自动完成。
不，它们在我们输入时进行过滤，但我想要的是反向功能...一个用于输入的文本框和一个由自动完成插件填充的选择框（起初为空）。简单地说，不是打开建议列表，而是用结果填充现有的选择框。

标签： jquery-ui select autocomplete filtering

【解决方案1】：

您可以使用渲染器检索过滤后的数据，然后对它们做任何您想做的事情

$('#myAutocomplete').data( "autocomplete" )._renderItem = function( ul, item ) {
    $('#myCustomElement').append( "<a>" + item.label + "<br>" + item.desc + "</a>" )

    //Cancel the suggestion rendering
    //return void since 1.9 else just return false
    return $('');
};

灵感来自http://jqueryui.com/autocomplete/#custom-data

编辑

添加小提琴解释如何避免建议列表：http://jsfiddle.net/GF5c4/

【讨论】：

感谢您的回答，我之前确实阅读过该内容并尝试实施，但无法阻止建议框打开和后续功能。事实上，我只需要一个填充的选择框：选择和其他功能不应该被激活。
即使你返回$('')？当它删除建议时，如果您对所有过滤的建议都这样做，您不会显示任何内容，是吗？
没有打开 jsfiddle 页面，但我得到的线索是 _renderItem 为每个结果调用一次...开始尝试以这种方式再次感谢 :)
没办法只得到第一个项目，并且中断还显示一个高度较低的空建议框......我会尝试别的......
赞成提供线索，但我不能接受作为答案，因为 return $('');不是这样做的正确方法...

【解决方案2】：

经过几个小时后，我终于弄明白了。在重新挖掘自动完成的数据绑定作为 Bouillou 重定向我之后，我做了这些以实现我的目标。

首先，我通过添加我的搜索功能来替换搜索功能，以添加用于清除所有先前选择框内容的行。这是我的新搜索功能：

     search: function( event, ui ){
         $("#links_list option").remove(); // This line is added
         var str = '';
         for(var attr in event){
             str += attr.toString() + '\n';
         }
         console.log(str);

         var str2 = '';
         for(var attr in ui){
             str2 += attr.toString() + '\n';
         }
         console.log(str2);
     },

然后我调整了.data 绑定和_renderItem。 return $(''); 正在破坏这个过程，只返回一个带有空建议框的建议。（我也不想看到。）

然后我将_renderItem函数中原来的return(.....)改成这样：

        return $('<option value="'+item.value+'">'+item.label+'</option>')
        .appendTo("#links_list");

您可以在下面看到示例屏幕结果。

【讨论】：