JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<label><input type="text" data-toggle="ddFilter" data-list="ddTowns"></label>

JavaScript

var ddTowns = [
'Adfs','Adgdfdf','Advfgfgf','Abdfsdg',
'Annddfdf','Abdfg','Alkjlkgj','Blkjlj',
'Bfdfl','Bkjljkf','Bsfgop','Blkjhh',
'Ckdjhfhkd','Ckdjhfkss','Cgkjhsk','Cdfdflkk',
'Clfkjlks','Clkdjlkjld','Ckjgfk','Cskjg',
'Cdlgklf','Csjgffd','Cdljg','Cdfdlfkjk'];

function dropDownFilter(){
  $('[data-toggle="ddFilter"]').each(function(){
    var $input = $(this), arr = eval($input.attr('data-list')), $label = $input.parents('label').eq(0), li = '';
    for (var i=0; i<arr.length; i++) {
      li = li + '<li>' + arr[i] + '</li>';
    }
    $label.after('<ul class="ddFilterList">'+li+'</ul>');
    var $list = $label.parent().find('ddFilterList').eq(0);
    $input.on('keyup',function(e){
      console.log('key = ' + e.key + '; keycode = ' + e.keyCode);
    });
  });
}

$(function(){
	dropDownFilter();
});