0

Estou querendo alterar de forma dinâmica o atributo minLength da biblioteca jQuery Autocomplete.

Essa necessidade é pelo fato de que caso o usuário realize a pesquisa pelo nome ou e-mail do cliente o minimo para se iniciar uma pesquisa e de três caracteres. Caso ele digite o numero de telefone limitamos a pesquisa para cinco.

Abaixo segue o código, no qual estou querendo implementar a solução:

$("#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;
            }
        }
    }
});

1 Resposta 1

0

Já que o mínimo obrigatoriamente será de 3, já defina logo o minLength em 3 na inicialização do componente.

No seu código você pode otimizar um pouco: retire o + da regex do replace que não tem precisão, já que a flag /g já irá remover tudo que for de espaço:

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

Use um operador ternário para alternar entre 5 ou 3

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

E pode unir os dois códigos num só, já que ambos possuem o mesmo seletor:

$("#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;
            }
         }
   }
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .