javascript - 使用 JQuery 从 JSON 文件搜索/自动完成(只需要获取以给定字母开头的结果)

Question

我在输入框中输入内容时创建了国家/地区搜索。

HTML 是

Country<div class="holder_form"><input id="country" name="country" type="text" placeholder="Country" value="">
<ul id="country_wrapper"></ul>

Javascript 是

var countries={
    "1": {
        "name": "Afghanistan"
    },
    "2": {
        "name": "India"
    },
    "3": {
        "name": "Canada"
    },
    "4": {
        "name": "Estonia"
    },
    "5": {
        "name": "Greece"
    },
    "6": {
        "name": "Kenya"
    },
    "7": {
        "name": "Liberia"
    },
    "8": {
        "name": "Nepal"
    }
}

    $("#country").keyup(function (e) {
     var country = $( "#country" ).val();
     var len = country.length; 
     if(len <=0 && country!=''){     
        return false;
     }
     else if(len > 0){


        var matches = [];
            for (var i in countries) {
                var countriesMatch = countries[i].name.toLowerCase();
                if ( (countriesMatch.indexOf(country.toLowerCase()) != -1) ) {

                        matches.push( {'id': i, 'name': countries[i].name} );
                }
            }

        var content='';
        if ( matches.length == 0 ) {
             $('#country_wrapper').css('margin-top','20');
             content = '<li style="font-weight:bold;font-size: 18px;"><div class="nomatchfound">No match found</div></li>';
             $('#country_wrapper').html(content).show();

            return;
        }
         for (var i in matches) { 
             content += '<li style="font-weight:bold;font-size: 18px;"><a data-id="' + matches[i].id + '" class="country-select-item"><div id='+matches[i].name+' class="matchfound">'+matches[i].name+'</div></a></li>';
            }
            $('#country_wrapper').html(content).show();

        $('.matchfound').click(function(e) {
            var countryName = $(this).text(); 
            $( "#country" ).val(countryName);
            $('#country_wrapper').html('')
            $('#country_wrapper').css('display','none');

            });

    }


});

这是 Jsfiddle demo

效果很好...:)

但我只需要显示以我在输入框中按下的字母(字母)开头的国家/地区名称

即，

在这里，当我按下“a”键时，它会显示所有带有字母“a”的国家/地区名称。但我只需要获取列表中以“a”开头的国家/地区名称。这怎么可能？提前致谢

Answer 1

使用RegExp创建新的正则表达式

var matchMe = new RegExp('^' + 国家/地区, 'i');字符 ^ 只会在开头搜索，选项 'i' 是“不区分大小写”，因此在比较之前不需要将它们小写

还有用于全局搜索的“g”选项和用于多行搜索的“m”选项

了解更多关于正则表达式的信息 http://www.w3schools.com/js/js_regexp.asp

然后在条件下使用它

if (countries[i].name.search(matchMe) > -1 )

修改后的代码 - 第 37 和 40 行 http://jsfiddle.net/f5g0nr8h/