在焦点上选择自动完成中的多个值

时间:2014-02-04 16:28:17

标签: javascript jquery autocomplete jquery-ui-autocomplete

我已经使用jQuery UI为多个值实现了自动完成功能。它工作正常,但问题是我不想从下拉列表中明确选择值(使用选项卡)。我的要求是,当我浏览下拉列表时,我的搜索框应该填充。然后我进入昏迷状态并再次从下拉列表中继续搜索。

我基本上尝试了jqueryUI自动完成中的那段代码,但是焦点已经被抑制了。我想要的是,不是选择标签上的项目,我们应该能够使用焦点选择它,然后给出一个逗号并继续搜索。

.autocomplete({
    minLength: 0,
    source: function( request, response ) {
        // delegate back to autocomplete, but extract the last term
        response( $.ui.autocomplete.filter(productNames, extractLast(request.term)));
    },

    focus: function() {
        // prevent value inserted on focus
        //this.value = ui.item.value;
        return false;
    },

    select: function( event, ui ) {
        var terms = split( this.value );
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " ); 
        return false;
    }

2 个答案:

答案 0 :(得分:1)

使用自动建议选择多个值并使用逗号分隔选择与jquery UI自动完成,您必须进行大量更改。

而你可以使用: MagicSuggest清洁自动建议使用逗号进行多重选择和分离

演示:国家选择自动建议

  

http://nicolasbize.com/magicsuggest/tutorial/3/

文件:

  

http://nicolasbize.com/magicsuggest/doc.html

答案 1 :(得分:0)

您是否尝试过TextExt而不是JQuery自动完成?它看起来更符合您的要求:http://textextjs.com/manual/examples/filter-with-suggestions.html