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

Question

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

可以使用类似的解决方法

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

或者

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

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

Answer 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/

Answer 2

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

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

        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);
        },
   

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

然后我把原来return(.....)的in_renderItem函数改成这样：

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

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