Реализация выпадающего меню автозаполнения в простом JavaScript

Question

Вот мой 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' только страны 'Anguilla, Antigua' появляется вместо любой страны с 'u' в ней. Я знаю, что проблема заключается в том, где я проверяю indexOf, но я застрял здесь.

Также как я могу сохранить динамический размер выпадающего списка до найденных значений? Ваша обратная связь будет полезна для улучшения общей проблемы

Answer 1

Почему бы не использовать match вместо 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, '\\$&'); 
}; 

Answer 2

Проблема в том, что после фильтрации входных элементов необходимо изменить размер списка опций.

Вы можете сделать это путем удаления строки:

optionsVal.size = 3; 

И изменения для цикла, который фильтрует варианты, чтобы добавить изменение размера, который имеет такой же размер, как отфильтрованные результаты:

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

Это немного уродливым, если нет вариантов, и действительно долго, когда вы вводите что-то вроде «a», но я думаю, что это то, что вам нужно.

Измененное шоу() функция:

//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'; 
    var textCountry = input.value; 

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

    } 
}