JSFiddle - React, Tailwind, and code Playground

by luizz

HTML

<form>

<input id="busca" name="busca" type="text"/>

<select data-nome="Estado" name="est_id" id="est_id">
<option value="">Selecione...</option>
<option value="1">AC</option>
<option value="2">AL</option>
<option value="4">AP</option>
<option value="3">AM</option>
<option value="5">BA</option>
<option value="6">CE</option>
<option value="7">DF</option>
<option value="8">ES</option>
<option value="9">GO</option>
<option value="10">MA</option>
<option value="13">MT</option>
<option value="12">MS</option>
<option value="11">MG</option>
<option value="14">PA</option>
<option value="15">PB</option>
<option value="18">PR</option>
<option value="16">PE</option>
<option value="17">PI</option>
<option value="19">RJ</option>
<option value="20">RN</option>
<option value="23">RS</option>
<option value="22">RO</option>
<option value="21">RR</option>
<option value="24">SC</option>
<option value="26">SP</option>
<option value="25">SE</option>
<option value="27">TO</option>
</select>
    
<select data-nome="Categoria" name="pagina_cat_id" id="pagina_cat_id">
<option value="17">Solidário</option>
<option value="16">Urbanisticos</option>
<option value="15">Arquitetonicos</option>
</select>

</form>

JavaScript

$.fn.datalistOpt = function(select){
    
    var self = (this instanceof jQuery ? this:$(this)), selef = (select instanceof jQuery ? select:$(select));

    if(self.length >= 1 && selef.length >= 1){
               
        var buscar = selef.find('option');
        
        if(buscar.length >= 1){
            
            var datalist = $('<datalist id="dl-'+self.attr("id")+'"><select id="dls-'+self.attr("id")+'"/></datalist>').find('select').bind('select click change blur',function(){ console.log(this.value) }).end();
            
            self.parent().append(datalist).end().attr("list", "dl-"+self.attr("id"))
                
            self.unbind('input.datalist').bind('input.datalist',function(){
                
                var str = $(this).val();
               
                if(str.replace(/^\s+|\s+$/g, '') != ''){
                   
                    var regx = new RegExp('^'+str, 'gi'), limit = new Array();
                    
                    datalist.find('select').empty();
                    
                    $.each(buscar, function(){
                        _self = $(this);
                         nome = (_self.parent().attr('data-nome')  ? _self.parent().attr('data-nome'):'')
                        if(limit.length < 25 && this.value != '' && this.value > 0 && regx.test(_self.text()) ){
    
                             limit[limit.length] = '<option value="'+_self.text()+'">'+(nome != '' ? nome:_self.text())+'</option>';
                        }
                    });    
                    
                    datalist.find('select').html(limit.join('\n'));
                        
                }
               
            });
        }
    }        
    
    };

//Call Plugin
$('#busca').datalistOpt('#est_id,#pagina_cat_id');