我们可以使用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(.....)函数中的原始_renderItem更改为：

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

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