When you click on the data list run the specific ajax function

Question

I need that when it is "clicked" in the option of the datalist "cities" execute the ajax to load the neighborhoods, the way this has to be pressed "enter"

$(function(){
    $(".carregando").hide();
    $(".carregandoBairros").hide();
    $('#uf').change(function(){
      // $("#cidades").val("");
      $(".notEstado").hide();
      if( $(this).val() ) {
        $("#cidade").hide();
        $(".carregando").show();
        $.getJSON('capta_cidades.php?search=',{uf: $(this).val(), ajax: 'true'}, function(j){
          var cidade = '';
          for (var i = 0; i < j.length; i++) {
            cidade += '<option value="' + j[i].titulo + '">';
        }
          $(".carregando").hide();
          $("#cidade").show();
          $('#cidades').html(cidade).show();
        });
      }
    });

      $("#cidade").keyup(function(){
        // var valor = $(this).val();
        $(".notBairro").hide();
        $("#id_bairro").hide();
        $(".carregandoBairros").show();
        $.getJSON('capta_bairros.php?search=',{titulo: $(this).val(), ajax: 'true'}, function(j){
          var bairros = '';
          for (var i = 0; i < j.length; i++) {
            bairros += '<option value="' + j[i].id + '">' +j[i].titulo+ '</option>';
          }
          $(".carregandoBairros").hide();
          $('#id_bairro').html(bairros).show();
        }); 
      });
  });

html:

   <div class="form-group">
    <label class="col-sm-3 control-label no-padding-right" for="form-field-19"> Estado: </label>

    <div class="col-sm-9">
        <select name="uf" class="col-xs-10 col-sm-5" id="uf">
            <option selected value="" >Selecione...</option>
            <?
            query que lista estados
            ?>
            <option value="<?=$row['id'];?>"><?=$row['titulo'];?></option>
            <?}?>
        </select>
    </div>
 </div>

 <div class="form-group">
    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Cidade: </label>

    <div class="col-sm-9">
        <div class="carregando">
            <input type="text" class="col-xs-10 col-sm-5" placeholder="Procurando cidades...">
        </div>
        <div class="notEstado">
            <input type="text" class="col-xs-10 col-sm-5" placeholder="Selecione antes um estado" disabled>
        </div>
        <input list="cidades" type="text" id="cidade" name="cidade" class="col-xs-10 col-sm-5" placeholder="Selecione a cidade..." style="display:none;">
            <datalist id="cidades">

            </datalist>
    </div>
 </div>

 <div class="form-group">
    <label class="col-sm-3 control-label no-padding-right" for="id_bairro"> Bairro: </label>

    <div class="col-sm-9">
        <div class="carregandoBairros">
            <input type="text" class="col-xs-10 col-sm-5" placeholder="Procurando bairros...">
        </div>
        <div class="notBairro">
            <input type="text" class="col-xs-10 col-sm-5" placeholder="Selecione antes uma cidade" disabled>
        </div>
        <select name="id_bairro" id="id_bairro" class="col-xs-10 col-sm-5" style="display:none;" placeholder="Selecione o bairro...">
            <option value="" disabled selected>Selecione...</option>
        </select>
    </div>
 </div>

Answer 1

I managed to solve the problem with just one .bind('input', function... :D