Autocomplete with two types of data

Asked

Viewed 156 times

0

How do I load two types of data in the same input that is receiving an autocomplete (Eayautocomplete plugin). I would like to appear the options by cnpj number and company social reason. No regular expressions manjo, someone could help?

Follows the html:

<div class="form-group">
    <label>Nome do Fornecedor / CNPJ</label><br>
    <input class="form-control" type="text" name="autoCompl" id="autoCompl" value="" placeholder="Procurar">
</div>

Follow the json:

[
  {"dados":"Ericsson Sistemas de Energia Ltda 1029384756/00"},
  {"dados":"Ericsson Telecomunicações 0192837465/00"},
  {"dados":"Telefônica do Brasil Ltda 5647382910/00"},
  {"dados":"Tim do Brasil Ltda 3669278723/00"},
  {"dados":"Telemar Telecomunicações Ltda 5463782113/00"},
  {"dados":"Vivo do Brasil Ltda 7588697132/00"},
  {"dados":"Oi Telecomunicações Ltda 1253467264/00"},
  {"dados":"Claro do Brasil Ltda 0980966535/00"},
  {"dados":"Telecomunicações Ltda 3562989272/00"}
]

Follows the script:

var options = {
    url: "solicitar_acesso.json",
    getValue: function(element){
        var dados = element.dados;
        var array = dados.split(" ");
        var resul1 = array[0];
        var resul2 = array[1];
        var filtro = new RegExp('[0-9]');
        var filter = ('[a-z]', 'ig');
        if (resul1.search(filtro) || resul2.search(filter)) {
            return dados;
        } else {
            return false;
        }
    },
}
javascript regex

  • I don’t know how this plugin works, element references the id element autoCompl ?

  • No, element is the parameter that comes from json, as in the json that is in the example, element shows the values of the json 'data' keys, I could understand :)

  • And how I capture the data being typed in input in order to take the suggestion test?

  • I’m sorry, I don’t understand the question?

  • I don’t understand javascript, but if it helps, there’s this Regex: ((?:[^\x00-\x7F]|[a-zA-Z]\s*)+)(\d+\/\d{2}) and the demo

1 answer

3


Using the regular expression of @danieltakeshi, you can split the data into:

  • match[1]=>"%EMPRESA% " <- Note a presença de um espaço aqui
  • match[2]=>"%CNPJ%"

But it would also be possible, without regex, to give a String#split(), String#pop() and String#join() in the last space:

var array = "Foo Bar Baz 0000000000/00".split(" ");
var cnpj = array.pop(); // 0000000000/00
var empresa = array.join(" "); // Foo Bar Baz

And as he commented @Guilherme Lautert, in its function does not seem to have any reference to the input text (Unless the plugin used has it and you did not use it), so I am using this variable for this:

var input = document.getElementById("autoCompl");

Another thing I noticed, you created two "filter" variables that are match in the same text (element, that you said be the texts of the data), so it will always return true, as no text input is being checked.

As it is not possible to implement this plugin in the Sopt snippet, I created a "simulation" of the auto complete below, change if you need.

Snippet

var dados =   [{"dados":"Ericsson Sistemas de Energia Ltda 1029384756/00"},
  {"dados":"Ericsson Telecomunicações 0192837465/00"},
  {"dados":"Telefônica do Brasil Ltda 5647382910/00"},
  {"dados":"Tim do Brasil Ltda 3669278723/00"},
  {"dados":"Telemar Telecomunicações Ltda 5463782113/00"},
  {"dados":"Vivo do Brasil Ltda 7588697132/00"},
  {"dados":"Oi Telecomunicações Ltda 1253467264/00"},
  {"dados":"Claro do Brasil Ltda 0980966535/00"},
  {"dados":"Telecomunicações Ltda 3562989272/00"}]

var options = {
    url: "solicitar_acesso.json",
    getValue: function(element){
        var dados = element.dados;
        var array = dados.match(/((?:[^\x00-\x7F]|[a-zA-Z]\s*)+)(\d{10}\/\d{2})/);
        var resul1 = array[1];
        var resul2 = array[2];
        var input = document.getElementById("autoCompl");
        if ((resul1.toUpperCase().startsWith(input.value.toUpperCase()) || resul2.toUpperCase().startsWith(input.value.toUpperCase()))&&input.value) {
            return dados;
        } else {
            return false;
        }
    },
}

function procurar(){
    var resultado = document.getElementById("tempResult");
    resultado.innerHTML="";
    var a = 0;
    dados.forEach(function(){ 
        var r = options.getValue(dados[a]);
        if (r)
          resultado.innerHTML += r+"<br>";
        a++;
    });
}
<div class="form-group">
    <label>Nome do Fornecedor / CNPJ</label><br>
    <input class="form-control" type="text" name="autoCompl" id="autoCompl" value="" placeholder="Procurar" onchange="procurar();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
    <br><label id="tempResult"></label>
</div>

Browser other questions tagged javascript regex

You are not signed in. Login or sign up in order to post.