7

シンプルなオートコンプリート検索機能が必要ですが、ユーザーが複数の値を入力できるようにする必要もあります。jQuery UI のオートコンプリート ウィジェット ( http://jqueryui.com/autocomplete/ ) を使用していますが、これまでのところ、提案の最初の文字のみを検索するようにソースを設定しました。ここで追加したいのは、ユーザーが同じテキスト ボックスから複数の項目を検索できる機能です。(つまり、コンマの後に提案が再度表示されます)

私はこれをどのように行うことができるかを検索しようとしています。私が見つけた唯一のものは、追加できるオプションですmultiple: true( http://forum.jquery.com/topic/multiple-values-with-autocomplete )。問題は、ドキュメントに記載されていないため、オプションが変更されたのか、存在しないのかわかりません。

これは私のコードです:

    var items = [ 'France', 'Italy', 'Malta', 'England', 
        'Australia', 'Spain', 'Scotland' ];

    $(document).ready(function () {
        $('#search').autocomplete({
            source: function (req, responseFn) {
                var re = $.ui.autocomplete.escapeRegex(req.term);
                var matcher = new RegExp('^' + re, 'i');
                var a = $.grep(items, function (item, index) {
                    return matcher.test(item);
                });
                responseFn(a);
            }
        });
    });

私が試したこと：

    var items = [ 'France', 'Italy', 'Malta', 'England', 
        'Australia', 'Spain', 'Scotland' ];

    $(document).ready(function () {
        $('#search').autocomplete({
            source: function (req, responseFn) {
                var re = $.ui.autocomplete.escapeRegex(req.term);
                var matcher = new RegExp('^' + re, 'i');
                var a = $.grep(items, function (item, index) {
                    return matcher.test(item);
                });
                responseFn(a);
            },
            multiple: true
        });
    });
4

2 に答える 2

13

これを試して：

  function split( val ) {
    return val.split( /,\s*/ );
  }

  function extractLast( term ) {
     return split( term ).pop();
   }

   $( "#search" )
        .autocomplete({
             minLength: 0,
             source: function( request, response ) {
                 response( $.ui.autocomplete.filter(
                     items, extractLast( request.term ) ) );
             },
             focus: function() {
                 return false;
             },
            select: function( event, ui ) {
                var terms = split( this.value );
                terms.pop();
                terms.push( ui.item.value );
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
            }
        });

デモを見る

于 2013-10-05T17:31:23.653 に答える