web-dev-qa-db-ja.com

jQueryUIはテキストボックスで複数の値をオートコンプリートします

シンプルなオートコンプリート検索機能が必要ですが、ユーザーが複数の値を入力できるようにする必要もあります。私はjQueryUIのオートコンプリートウィジェット（ 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
        });
    });
jquery-uiautocompletejquery-ui-autocomplete
6
Daniel Grima

同じテキストボックス内の複数の文字列の問題を解決し、文字列の先頭に一致する提案のみを表示する正規表現を含めるために、次のことを行いました。

    $('#search').autocomplete({
        minLength: 1,
        source: function (request, response) {
            var term = request.term;

            // substring of new string (only when a comma is in string)
            if (term.indexOf(', ') > 0) {
                var index = term.lastIndexOf(', ');
                term = term.substring(index + 2);
            }

            // regex to match string entered with start of suggestion strings
            var re = $.ui.autocomplete.escapeRegex(term);
            var matcher = new RegExp('^' + re, 'i');
            var regex_validated_array = $.grep(items, function (item, index) {
                return matcher.test(item);
            });

            // pass array `regex_validated_array ` to the response and 
            // `extractLast()` which takes care of the comma separation

            response($.ui.autocomplete.filter(regex_validated_array, 
                 extractLast(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;
        }
    });

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

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

これを試して：

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

参照 [〜＃〜]デモ[〜＃〜]

12
Nitish Kumar