Auto complete Ajax em PHP
Pessoal eu tava com uma duvida que é a seguinte, eu tenho o codigo ajax que ao digitar em um campo ele busca no banco de dados as mercadorias com as iniciais digitadas e aparece a lista e assim que clikar em um dos itens escolhidos este item aparece no campo text ao lado , mas eu queria fazer com que ao digitar as iniciais ele abrisse um select assim nao seria necessário tirar a mao do teclado e usar o mouse e facilitaria o trabalho .
O codigo ajax abaixo com os inputs
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("http://nbmceasa.com/autocomplete.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<title>Untitled Document</title>
</head>
<body>
<form>
Digite o produto !
<br />
<input type="text" size="30" value="" id="" onkeyup="lookup(this.value);" />
<input type="text" id="inputString" onBlur="fill();" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="" style="position: relative; top: -12px; left: 30px;" shift="upArrow"/>
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
Abaixo a consulta que o ajax pega os valores
// consulta no banco
if(isset($_POST['queryString'])) {
$queryString = $_POST['queryString'];
if(strlen($queryString) >0) {
$query = mysql_query("SELECT MERCADORIA FROM codigo WHERE MERCADORIA LIKE '$queryString%' LIMIT 10") or die("Erro na consulta");
while ($result = mysql_fetch_array($query)) {
echo '<li onClick="fill(\''.$result[0].'\');">'.$result[0].'</li>';
}
}
}
?>
**Abaixo uma imagem de como esta , acontece o seguinte ao digitar o codigo CE aparece os valores abaixo para ser escolhidos que sao puxados do db , e ao clickar em 1 o escolhido é preenchido no campo ao lado, ****oque eu precisava é que ao digitar o codigo CE ele abrisse em formato do select os valores para eu usar as setas do teclado e assim nao utilizaria o mouse .**
/applications/core/interface/imageproxy/imageproxy.php?img=http://nbmceasa.com/imagens/31.jpg&key=ba40c8c9cac849ea868b46e57768740ca788f38d7d6846439209e36745a0a1f0" alt="31.jpg" />
Discussão (6)
Carregando comentários...