Live search

Live search with dropdown menu

by Pasha Bosoy

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form id="filter-sidebar" action="#" method="post">
            <div class="filter-select-wrap">
                <input id="filter-address" class="filter-select filter-tax" name="location" data-address='["location_1","alabama","alaska","anchorage","arizona","arkansas","birmingham","california","chandler","colorado","connecticut","denver","florida","georgia","gilbert","glendale","hartford","hawaii","hollywood","honolulu","huntsville","idaho","illinois","indiana","indianapolis","iowa","kansas","kentucky","little-rock","los-angeles","louisiana","louisville","massachusetts","mesa","michigan","minnesota","mobile","montgomery","moreno-valley","naperville","nebraska","nevada","new-hampshire","new-jersey","new-orleans","new-york","newark","ohio","olathe","orlando","palmdale","paterson","pennsylvania","peoria","philadelphia","pittsburgh","reno","rhode-island","rochester","rochester-new-york","rockford","sacramento"]' type="text" placeholder="All Locations"/>
                <ul class="ul-addresses"></ul>

            </div>
</form>

JavaScript

//функция поиска совпадений вводимых символов
function findEl(el, array, value) {
   var coincidence = false;
   el.empty();//очищаем список совпадений
   for (var i = 0; i < array.length; i++){
         if (array[i].match('^'+value)){//проверяем каждый елемент на совпадение побуквенно
            el.children('li').each(function (){//проверяем есть ли совпавшие елементы среди выведенных
               if(array[i] === $(this).text()) {
                  coincidence = true;//если есть совпадения то true
               }
            });
            if(coincidence === false){
               el.append('<li class="js-filter-address">'+array[i]+'</li>');//если нету совпадений то добавляем уникальное название в список
            }
         }
   }
}

var filterInput = $('#filter-address'),
   filterUl = $('.ul-addresses');
//проверка при каждом вводе символа
filterInput.bind('input propertychange', function(){
   if($(this).val() !== ''){
      filterUl.fadeIn(100);
      findEl(filterUl,$(this).data('address'),$(this).val());
   }
   else{
      filterUl.fadeOut(100);
   }
});
//при клике на елемент выпадалки присваиваем значение в инпут и ставим триггер на его изменение
filterUl.on('click','.js-filter-address', function(e){
   $('#filter-address').val('');
   filterInput.val($(this).text());
   filterInput.trigger('change');
   filterUl.fadeOut(100);
});