Autocompletar busca, problema com as divs
Boa tarde de sábado a todos, e obrigado pela atenção.
Estou desenvolvendo um sistema e me deparei coma seguinte situação: Preciso gerar dinamicamente um formulario em que o usuario vai escolher o nome da pessoa referente a cada Titulo.
Por exemplo, o titulo 1 ele vai escolher JOAO, o titulo 2 MARIA, o titulo 3 JOSE
Esses escolhas são feitas por uma busca com autocomplete , jquery e php.
Acontece que nunca saberei quantos titulos vão ser inseridos , entao esse formulario smepre vai mudar a quantidade de titulos e nomes a serem buscados;.
Segue abaixo a tela do meu problema
/applications/core/interface/imageproxy/imageproxy.php?img=https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash4/482219_10200292927459272_1872709186_n.jpg&key=a7601606dac75ee75c0dd7a2aa9531c05de166f7a17c6e98ebdc0cab0bace335" alt="482219_10200292927459272_1872709186_n.jp" />
Acontece que na primeira busca tudo bem, Otimo e perfeito, ele busca e quando seleciono na lista ele coloca o id do Nome no campo input. Até ai tudo bem.
O problema é que pros outros campos nao funcionam, quando clico para buscar ele busca , mas altera o valor la do primeiro campo e não do campo que deveria ser. E tambem a lista de opções de nomes sempre fica embaixo do primeiro campo que busquei. Sei que isso é um problema relacionado as minhas DIV, não sei como gera-las dinamicamente e atribuir nomes e ids para que meu codigo funcione como desejo.
Alguem poderia me dar uma luz de como fazer??
Segue abaixo meu codigo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Buscar Sacados</title>
<style type="text/css" media="screen">
body {
font-family: Arial, Verdana, sans-serif;
font-size: 13px;
}
.suggestionsBox {
padding: 0;
list-style: none;
max-width: 550px;
max-height: 350px;
border: 3px solid #B0BECA;
overflow-y: scroll;
}
li:hover {
background-color: #0FF;
color:#000;
font-weight:bold;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("busca_sacado.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);
$('#inputString').val(thisValue);
setTimeout("$('#suggestions1').hide();", 200);
}
</script>
</head>
<body>
<form>
<p>Busque por Nome ou Incrição do sacado</p>
<p>Nº Identificação do sacado:
<input type="text" size="45" value="" id="inputString" onKeyUp="lookup(this.value);" onBlur="fill();" />
</p>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
<hr />
<p>Busque por Nome ou Incrição do sacado</p>
<p>Nº Identificação do sacado:
<input type="text" size="45" value="" id="inputString" onKeyUp="lookup(this.value);" onBlur="fill();" />
</p>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
<hr />
<p>Busque por Nome ou Incrição do sacado</p>
<p>Nº Identificação do sacado:
<input type="text" size="45" value="" id="inputString" onKeyUp="lookup(this.value);" onBlur="fill();" />
</p>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
<hr />
</form>
</body>
</html>busca_sacado.php
<?php
$conn = mysql_connect("localhost","root","") or die ("Erro ao se conectar ao servidor");
$bd = mysql_select_db("cobranca") or die ("Erro ao se conectar ao banco");
if(isset($_POST['queryString'])) {
$queryString = $_POST['queryString'];
if(strlen($queryString) >0) {
$query = mysql_query("SELECT * FROM tblsacados WHERE nome LIKE '%$queryString%' OR inscricao LIKE '%$queryString%'") or die("Erro na consulta");
while ($result = mysql_fetch_array($query)) {
echo '<li onClick="fill(\''.$result['id'].'\');"><a>'.$result['inscricao']. " - " .$result['nome'].'</a></li>';
}
}
}
?>Agradeço novamente pela atenção
Discussão (2)
Carregando comentários...