在纯JavaScript中实现自动完成下拉菜单

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在纯JavaScript中实现自动完成下拉菜单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4211字，纯文字阅读大概需要7分钟。

内容图文

这是我的HTML

<h2>Please Enter the Value in the Box(click on the desired value)</h2>
<input id='value' type="text" autocomplete="on" placeholder="country" />
<div id="dropdown">
    <select name="list" id="list"></select>
</div>

这是我的JavaScript

var arr = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz Republic","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania","Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","St. Lucia","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
var input = document.getElementById('value');
var optionsVal = document.getElementById('list');

input.addEventListener('keyup', show);
optionsVal.onclick = function(){
    setVal(this);
};

//shows the list
function show(){
    var dropdown = document.getElementById('dropdown');
    dropdown.style.display = 'none';

    optionsVal.options.length = 0;

    if(input.value){
        dropdown.style.display = 'block';
        optionsVal.size = 3;
        var textCountry = input.value;

        for(var i = 0; i < arr.length; i++){
            if(arr[i].indexOf(textCountry) !== -1){
                //addvalue
                addValue(arr[i],arr[i]);

            }
        }

    }
}

function addValue(text,val){
    var createOptions = document.createElement('option');
    optionsVal.appendChild(createOptions);
    createOptions.text = text;
    createOptions.value = val;
}

//Settin the value in the box by firing the click event
function setVal(selectedVal){
    input.value = selectedVal.value;
    document.getElementById('dropdown').style.display='none';
}

我遇到的这个问题是检查输入值并在下拉列表中显示值时涉及的逻辑.例如,如果我输入“ u”,则仅显示“安圭拉安圭拉”国家,而不显示任何带有“ u”的国家.我知道问题出在我要检查indexOf的地方,但是我被困在这里.

另外,如何使下拉列表大小动态地保持找到的值？您的反馈也将在改善整体问题上大有裨益

解决方法:

为什么不使用匹配而不是indexOf？
额外的好处是,搜索不区分大小写. http://jsfiddle.net/e6220t92/2/.Fiddle还尝试增加选择框的大小.

    //CODE
    var testableRegExp = new RegExp(RegExp.escape(textCountry),"i");
    if (arr[i].match(testableRegExp ) )
    {
       //logic
    }
    //CODE

//Use this function to replace potential characters that could break the regex
RegExp.escape= function(s) {
    return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
};

内容总结

以上是互联网集市为您收集整理的在纯JavaScript中实现自动完成下拉菜单全部内容，希望文章能够帮你解决在纯JavaScript中实现自动完成下拉菜单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端