Dessa vez precisei de um campo autocomplete na tag. Pesquisei pelo autocomplete do jquery, mas não obtive muito sucesso devido achar complicado a implementação para guardar o valor da opção escolhida, pois nem sempre o valor da opção selecionada é o mesmo do texto exibido no mesmo.

Veja o exemplo de como implementei no meu código. 

HTML: 

Aqui terá apenas que criar a tag select e adicionar no mesmo modelo identico abaixo, ressaltando que os atributos id e name da tag podem ser o nome que desejar, pois não irá impactar no autocomplete.

<select id="campo-select" name="campo-select" onclick="naytech_autocomplete(this.id)" style='width:100%;height:40px'>
                    <option>--SELECIONE--</option>
</select>

PHP:

Aqui criei um array com valores estáticos somente para mostrar o exemplo de como deve ficar o mesmo com os índices antes de retornar ao javascript. O nome dos índices é padrão, não podem ser alterados, já os seus valores podem ser alterados.

Só lembrando que esses valores também podem vim de uma consulta no banco de dados, arrumando o arrei do mesmo da forma que está abaixo antes de retornar ao javascript.

$texto = $_REQUEST['texto'];
$array[] = ['id_opcao'=>5,'opcao'=>"ActionScript"];
$array[] = ['id_opcao'=>10,'opcao'=>"AppleScript"];
$array[] = ['id_opcao'=>15,'opcao'=>"BASIC"];              
$array[] = ['id_opcao'=>20,'opcao'=>"ColdFusion"];
$array[] = ['id_opcao'=>25,'opcao'=>"Erlang"];
$array[] = ['id_opcao'=>30,'opcao'=>"Fortran"];

foreach($array as $k=>$v){
    if(stristr($v['opcao'],$texto)){
        $retorno[] = $v;
    }
}

exit(json_encode($retorno))

JAVASCRIPT

Este código é só copiar e colocar dentro do seu código javascript que está dentro arquivo onde contém o campo select. Nada pode ser alterado deste código.

function naytech_autocomplete(id){
////AQUI CRIA O CAMPO QUE SERÁ DIGITADO O TEXTO COM UM GIF LOAD CONCATENADO, LEMBRANDO DE COLOCAR O GIF NO CAMINHO CERTO INFORMADO NO IMG ABAIXO////////

$("#"+id).before("<input style='width:100%;height:40px' placeholder='digite tr&ecirc;s ou mais letras para buscar a op&ccedil;&atilde;o desejada' id='buscar-select' onkeypress=criarListaAutoComplete('"+id+"') ><img id='loadList' src='carregando.gif' style='display:none'/><ul style='list-style:none;margin:0;padding:0;background:#fff;overflow-x: auto;max-height:150px;' id='buscar-select-list' style='display:none;width:100%;border:1px solid #e0e0e0'></ul>");

$("#"+id).css("display","none");

$("#buscar-select").focus();

///////AQUI ENTRA QUANDO FOR APAGANDO O TEXTO DO CAMPO, CADA VEZ Q APAGAR UMA LETRA A CONSULTA É REFEITA

$('#buscar-select').keydown(function(e) {

if (e.keyCode === 8 || e.keyCode === 46) ///tecla de backspace e delete

        {

           $("#"+id).html("<option selected value=''>--SELECIONE--</option>");

           criarListaAutoComplete(id);

          }

});

                

}<!-- FECHA A FUNÇÃO naytech_autocomplete -->

 
function opcaoSelecionado(id,id_select){

////AQUI COLOCA NA TAG SELECT A OPCAO ESCOLHIDA. ESTE CAMPO FICA ESCONDIDO, POIS FICA APARECENDO SOMENTE O INPUT ONDE É DIGITADO O TEXTO DA PESQUISA, MAIS NA HORA DO SUBMIT O VALOR DA TAG SELECT É RECONHECIDO

            var texto = $("li#li_"+id).text();
            var cd = $("li#li_"+id).attr("value");
            $("#buscar-select").val(texto);
            $("ul#buscar-select-list").hide().html("");
            $("select#"+id_select).html('<option selected value="' +cd + '">' + texto + '</option>');
}<!-- FECHA A FUNÇÃO opcaoSelecionado-->
       
function criarListaAutoComplete(id_select){
               setTimeout(function(){
                var texto = $("#buscar-select").val();
                var idSelect = $("#"+id_select).attr("id");
                if (texto.length >= 3) { ////limita a busca na base a partir de 3 letras digitadas
                    $.ajax({
                        url: "listar-opcoes-select.php",
                        data: {texto: texto},
                        type:"post",
                        dataType:"json",
                        beforeSend:function (){$("#buscar-select").focus();$("img#loadList").show();},
                        complete:function(){$("img#loadList").hide();},
                        success: function (resp) {
 ////////// O RETORNO DO PHP TEM QUE SER UM ARRAY COM ESSES ÍNDICES, EXEMPLO: $array[] = array("id_opcao"=>1,"opcao"=>"Primeira opcao").
                            $("ul#buscar-select-list").hide().html("");
                            if(resp.length>0){
                                    for (var i = 0; i < resp.length; i++) {
                                        $("ul#buscar-select-list").append('<li class="buscar-select-list-li" id="li_'+i+'" onclick=opcaoSelecionado('+i+',"'+idSelect+'") style="background:#eee;cursor:pointer;margin-bottom:5px;margin-left:7px;margin-top:5px;padding:10px;margin:0;border-bottom:1px solid #fff" value="'+ resp[i].id_opcao +'">' +  resp[i].opcao + '</li>');
                                    }
                                    
                                    $("ul#buscar-select-list").show();
                                    $("ul#buscar-select-list li").mouseover(function(){
                                        $(this).css({"background":"#ccc"})
                                    }).mouseout(function(){
                                        $(this).css({"background":"#eee"})
                                    })
                            }
                        }
                    })
                }else{
                  $("ul#buscar-select-list").hide().html("");  
                }
                },100)
}<!-- FECHA A FUNÇÃO criarListaAutoComplete-->

 

Então é isso, é só copiar este código acima em azul nos seus respectivos lugares no seu projeto e seguir a descrição que vai dar tudo certo.

Se este código lhe ajudou deixe seu comentário.
Se ainda tiver qualquer dúvida deixe seu comentário.

VALEEEU 😎👍

 

ini_set('memory_limit', '128M'); 

ini_set('upload_max_filesize', '128M'); 

ini_set('post_max_size', '128M'); 

ini_set('file_uploads', 'On'); 

ini_set('max_execution_time', '1800'); 

ini_set('file_uploads', 'On'); 

ini_set('session.gc_maxlifetime', '3600');