Salve amigos!
Estou com uma grande dor de cabeça para fazer um campo com auto sugestão.
O problema não está em retornar os valores "globais", mas sim em capturar algumas chaves específicas (neste caso os ID);
<form action="">
<input type="text" list="nomes-clientes" name="Cliente" id="cliente-nome" placeholder="Cliente" class="auto-completar input" value="">
<datalist>
<option value="Cliente 1">
<option value="Cliente 2">
<option value="Cliente 3">
<option value="Cliente 4">
</datalist>
</form>
Neste caso, é o que eu consigo fazer sem problemas, ao digitar qualquer palavra com 3 caracteres, a tag datalist é preenchida dinamicamente por uma consulta like no DB.
Olhei o DOM da tag datalist na W3C e ela é realmente desta forma:
<option value="Cliente 1">
E não desta:
<option value="1">Cliente 1</option>
Perceba que se fosse como é com a tag select, com a propriedade value recebendo o ID do cliente, e o nome do Cliente entre as tags <option></option>, seria muito simples resgatar o ID do cliente.
Mas a tag Select não é um campo editável como é um input.text onde eu possa digitar as opções.
Em resumo, preciso de uma forma de digitar um nome, e retornar não apenas o nome e o ID, mas poder acessar este ID com Jquery ou Js.