html - オートコンプリートデータリストで文字が開始文字である値のみを選択

Question

オートコンプリートフィールドにデータリストを使用しています。その正常に動作します。リストに値james、reeta、maryがあります。オートコンプリート ボックスに「r」と入力すると、値 reeta と mary が返されます。これは、mary にも文字「r」が含まれているためです。しかし、オートコンプリートをこのように機能させたくありません。メアリーではなくリータだけが欲しいのは、入力された文字を開始文字とする値を意味します。

Answer 1

オプションを使用sourceして、独自の検索を実装します。

var dataSource = ['mary', 'reeta', 'james'];

$("input").autocomplete({
    minLength: 1,
    source: function(request, response) {

        var matcher = new RegExp( '^' + $.ui.autocomplete.escapeRegex(request.term), "i" );
        var filteredData = $.grep( dataSource, function(value) {
            return matcher.test( value.label || value.value || value );
        });
        response(filteredData);
    }
});

例http://jsfiddle.net/AU92X/8/

または、書き換えるだけでグローバルにすることもできます$.ui.autocomplete.escapeRegex:

var dataSource = ['mary', 'reeta', 'james'];

$("input").autocomplete({
    minLength: 1,
    source: dataSource
});

var escapeRegexp = $.ui.autocomplete.escapeRegex;
$.extend( $.ui.autocomplete, {
    escapeRegex: function( value ) {
        return '^' + escapeRegexp(value);
    }
});

例http://jsfiddle.net/AU92X/10/