Boa Noite
Pessoal necessito saber se alguem conseguira me orientar em como resolver a seguinte situação eu tenho um textarea onde eu digito @ ele me mostra uma lista de cidades, gostaria que após eu continuar digitando a informação no textarea o meu select fosse sendo filtrado existe essa possibilidade? Eu implementei uma rotina usando chosen-select porém acredito que não vai resolver o meu problema.
Abaixo segue o exemplo:
function getLogins(event) {
if (event.keyCode === 64){
$("#logins").chosen({ width: '100%' });
$("#logins").chosen({ allow_single_deselect: true });
$("#logins").show();
$("#logins").trigger('chosen:open');
$('.chosen-drop').css('left', 0);
window.addEventListener('load', chosenfunc());
}
}
function getLogins2() {
if (event.keyCode === 64){
$("#logins2").show();
}
}
function postLogins(id){
document.getElementById("comentario2").value =
document.getElementById("comentario2").value + document.getElementById(id).innerText + " ";
if (document.getElementById("listalogins").value == '0') {
$("#listalogins2").val($("#logins2").val());
} else {
$("#listalogins2").val($("#listalogins2").val() + "," + $("#logins2").val());
}
$("#logins2").hide();
}
function getSelectValor(id){
var e = document.getElementById(id);
var itemSelecionado = e.options[e.selectedIndex].value;
return itemSelecionado;
}
function chosenfunc(){
jQuery("#logins").chosen().change( function(e){
var id;
id = $("#logins").val();
document.getElementById("comentario").value =
document.getElementById("comentario").value + document.getElementById(id).innerText + " ";
if (document.getElementById("listalogins").value == '0') {
$("#listalogins").val($("#logins").val());
} else {
$("#listalogins").val($("#listalogins").val() + "," + $("#logins").val());
}
$("#logins")
.find('option:first-child').prop('selected', true)
.end().trigger('chosen:updated');
$("#logins").hide();
$("#logins").trigger('chosen:close');
});
}
<link rel="stylesheet" href="https://github.com/harvesthq/chosen/blob/master/public/docsupport/prism.css" />
<link rel="stylesheet" href="https://github.com/harvesthq/chosen/blob/master/public/docsupport/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" />
Exemplo 01 - Usando Chosen Select: Ao digitar @ é exibido um chosen-select para o filtro dos dados ao clicar nas informações é inserido a informação no textarea comentario
<br>
<input id="listalogins" type="text" value="0">
<br>
<textarea id="comentario" class="col-sm-12 col-xs-12" onkeypress="getLogins(event,this);"></textarea>
<br>
<select id="logins" classe="chosen-select col-sm-12 col-xs-12" style="display:none" >
<option id="00" value="00">Nenhum</option>
<option id="01" value="01">São Paulo</option>
<option id="02" value="02">Rio de Janeiro</option>
<option id="03" value="03">Parana</option>
</select>
<br>
<br>
<br>
<br>
<br>
Exemplo 02 - Usando Select Multiple: Ao digitar @ é exibido um select com a lista de logins quando se clica em uma das opções o select some e o textearea2 recebe a informação do item selecionado
<br>
<input id="listalogins2" type="text" value="0">
<br>
<textarea id="comentario2" class="col-sm-12 col-xs-12" onkeypress="getLogins2(event,this);"></textarea>
<br>
<select id="logins2" class="select col-sm-12 col-xs-12" multiple="" style="display:none" >
<option id="00" onclick="postLogins(this.id)" value="00">Nenhum</option>
<option id="01" onclick="postLogins(this.id)" value="01">São Paulo</option>
<option id="02" onclick="postLogins(this.id)" value="02">Rio de Janeiro</option>
<option id="03" onclick="postLogins(this.id)" value="03">Parana</option>
</select>