Problem with Filter

Question

Goodnight

People I need to know if someone could guide me on how to solve the following situation I have a textarea where I type @ it shows me a list of cities, would like that after I continue typing the information in the textarea my select was being filtered there is this possibility? I implemented a routine using Chosen-select but I believe it will not solve my problem.

Below follows the example:

 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>

Answer 1

You can use the change event to filter and fill in your combo:

$('#listalogins').change(function(){
    texto = $('#listalogins').val();

  if(texto[0] === "@"){
  alert (' PREENCHA SEU COMBO AQUI ')

  }

});

Whenever you fill in with @ in the first letter it falls into this if, inside it do your filters and fill in combos.

There is also the possibility to use the Jquery autocomplete:

!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>