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

Question

I’m trying to dynamically change the attribute minLength library jQuery Autocomplete.

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 he enters the phone number we limit the search to five.

Below follows 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;
            }
        }
    }
});

Answer 1

Since the minimum must be 3, already define the minLength in 3 at component initialization.

In your code you can optimize a little: remove the + of the replace regex that has no precision, since the /g will already remove everything from space:

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

Use a ternary operator to switch between 5 or 3

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

And you can merge the two codes into 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;
            }
         }
   }
});