Autocomplete with two data types

Question

Autocomplete with two data types

Navigation

#1 by (2 votes)

0

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

Follow 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 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"}
]

Follow 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

asked by anonymous 17.11.2017 / 20:37

1 answer

User privileges [closed] DAO files in PHP needed?

score 2 · Accepted Answer

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

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

However, 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 you commented @Guilherme Lautert in your

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

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

Since you can not implement this plugin in the SOpt snippet, I have created a "simulation" of the auto complete below, change it if you need to.

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>