为jQuery自动完成添加限制

时间:2012-09-24 14:30:30

标签: jquery autocomplete

我正在开发一个新的本地项目,我的数据库中添加了许多街道名称。我将这些用于使自动完成脚本工作。到目前为止一切都很好,但是,我需要对现有脚本进行2次修改。

第一个:添加matcher.slice(0,10)以使用我当前的代码//确保一次只显示10条建议 第二个:阻止输入字段中的自由键入。因此,如果街道名称是Čačanska,则阻止像Čačanskablah这样的新条目。下面添加了jsfiddler示例

<script>
    $(function() {
var names = [ "Čačanska", "Čajetinska", "Čantavirski Put", "Čapajeva", "Čavoljska", "Čede Žice", "Čikerijska", "Đakovska", "Đerđa Dože", "Đerđa Lukača", "Đerda Dože", "Đerdapska", "Đeri Ferenca", "Đevđelijska", "Đorđa Natoševića", "Đorda Natoševica", "Đule Valija", "Đurđinska", "Đurdinska", "Đure Đakovića", "Đure Daničića", "Đure Stantića", "Šabačka", "Šajkaška", "Šamačka", "Šandora Lifke", "Šandora Petefija", "Šantićeva", "Šarplaninska", "Šebešićka", "Šekspirova", "Šenoina", "Šibenska", "Šidska", "Šime Ivića", "Šime Tikvickog", "Šimeta Tikvickog", "Široki Progon" ];

 var accentMap = {
            "š": "s",
            "ć" : "c",
            "č" : "c",
            "ž" : "z",
            "đ" : "d",
            "s" : "š",
            "c" : "č",
            "c" : "ć",
            "z" : "ž",
            "d" : "đ",
            "Š": "S",
            "Ć" : "C",
            "Č" : "C",
            "Ž" : "Z",
            "Đ" : "D",
            "S" : "Š",
            "C" : "Č",
            "C" : "Ć",
            "Z" : "Ž",
            "D" : "Đ"
        };
        var normalize = function( term ) {
            var ret = "";
            for ( var i = 0; i < term.length; i++ ) {
                ret += accentMap[ term.charAt(i) ] || term.charAt(i);
            }
            return ret;
        };

        $( "#addr" ).autocomplete({
            source: function( request, response ) {
                var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
                response( $.grep( names, function( value ) {
                    value = value.label || value.value || value;
                    return matcher.test( value ) || matcher.test( normalize( value ) );
                }));

                }
        });
    });
</script>

第一个例子:http://jsfiddle.net/andrewwhitaker/vqwBP/

第二个例子:http://jsfiddle.net/prCsm/

基本上,我想将这两个示例添加到我现有的代码中,但无论我做什么,自动完成都会停止工作..提前感谢!

1 个答案:

答案 0 :(得分:0)

当我在等待某人帮助我时,我仍然在努力解决这个问题......

“一次显示10个结果”的解决方案如下

$( "#addr" ).autocomplete({
    source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
        var results = $.grep( names, function( value ) {
            value = value.label || value.value || value;
            return matcher.test( value ) || matcher.test( normalize( value ) );
                       })
            results = results.slice(0,10);
        response( results );
        }
});