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;
}
}
$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.
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ês ou mais letras para buscar a opçã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-->
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 😎👍
