How do I dynamically change the minimum number of search characters in the jQuery Autocomplete library

Question

How do I dynamically change the minimum number of search characters in the jQuery Autocomplete library

Navigation

#1 by (0 votes)

0

I want to dynamically change the minLength attribute of the jQuery Autocomplete library .

This need is due to the fact that if the user performs the search by the name or email of the client the minimum to start a search and three characters. If you enter the phone number, we will limit the search to five.

Below is the code in which I want to implement the solution:

$("#search-customer").on('keyup', function() {
    var param = $(this).val();

    //Verifica se a quantidade de caracteres no input é de 1 elemento,
    //pois com essa informação podemos aplicar a mascara de telefone ou não.
    if(param.length <= 1){
        $("#search-customer").unmask();
        if($.isNumeric(param)){
            $("#search-customer").mask('00 00000-0000');

        }else{
            $("#search-customer").unmask();
        }
    }

    //Verificamos se o que for digitado é numero e qual a quantidade
    //para dinamicamente setar o minimo de caracteres no plugin
    var number = param.replace(/\s+/g, ''); 
    if($.isNumeric(number) && number.length >= 5){
        $("#search-customer").autocomplete("option", "minLength", 5);
    }else if(!$.isNumeric(number) && number.length >= 3){
        $("#search-customer").autocomplete("option", "minLength", 3);
    }
});


/**
 * AutoComplete na busca de clientes no cadastro de atendimento.
 */
 $("#search-customer").autocomplete({
    width: 300,
    max: 10,
    delay: 100,
    minLength: 0,
    autoFocus: true,
    cacheLength: 1,
    scroll: true,
    highlight: false,
    source: function(request, response) {
        //Realiza a busca no back-end
    },
    // Seleciona um cliente encontrado. 
    select: function(event, ui) {
        if (ui.item.idCustomer > 0) {
            // Verifica se o cliente possui atendimento disponível e não deixa seguir o atendimento.
            if (ui.item.hasAvailableService == true) {
                bootbox.alert("Alerta de prevenção de duplicidades: identificamos a existência de um atendimento disponível em nome deste cliente. " +
                        "Procure por este cliente na lista de \"atendimentos disponíveis\" e clique no botão \"obter\" para abrir este atendimento.");
            } else {
                window.location = "service/edit/" + ui.item.idCustomer;
            }
        }
    }
});

javascript jquery autocompletar

asked by anonymous 28.11.2018 / 18:56

1 answer

How to unify the value of a column by making a group by of two different columns? Jquery POST with PHP does not query

score 0 · Answer 1

Since the minimum must be 3, already set the minLength to 3 at component initialization.

In your code you can optimize a bit: remove the + from the regex of the replace that does not have precision, since the /g flag will already remove everything that is of space:

var number = param.replace(/\s/g, '');

Use a ternary operator to toggle between 5 or 3

$("#search-customer")
.autocomplete("option", "minLength", $.isNumeric(number) ? 5 : 3);

And you can join the two codes in one, since both have the same selector:

$("#search-customer")
.on('keyup', function() {
   var param = $(this).val();

   //Verifica se a quantidade de caracteres no input é de 1 elemento,
   //pois com essa informação podemos aplicar a mascara de telefone ou não.
   if(param.length <= 1){
      $("#search-customer").unmask();

      if($.isNumeric(param)){
         $("#search-customer").mask('00 00000-0000');
      }else{
         $("#search-customer").unmask();
      }
   }

   //Verificamos se o que for digitado é numero e qual a quantidade
   //para dinamicamente setar o minimo de caracteres no plugin
   var number = param.replace(/\s/g, ''); 
   $("#search-customer").autocomplete("option", "minLength", $.isNumeric(number) ? 5 : 3);
})
.autocomplete({
      width: 300,
      max: 10,
      delay: 100,
      minLength: 3,
      autoFocus: true,
      cacheLength: 1,
      scroll: true,
      highlight: false,
      source: function(request, response) {
      //Realiza a busca no back-end
   },
      // Seleciona um cliente encontrado. 
      select: function(event, ui) {
         if (ui.item.idCustomer > 0) {
            // Verifica se o cliente possui atendimento disponível e não deixa seguir o atendimento.
            if (ui.item.hasAvailableService == true) {
               bootbox.alert("Alerta de prevenção de duplicidades: identificamos a existência de um atendimento disponível em nome deste cliente. " +
               "Procure por este cliente na lista de \"atendimentos disponíveis\" e clique no botão \"obter\" para abrir este atendimento.");
            } else {
               window.location = "service/edit/" + ui.item.idCustomer;
            }
         }
   }
});