Suggest AJAX – jQuery – php/Mysql
Resolvi brincar um pouquinho aqui..
<html>
<head>
<title>Suggest</title>
<style type="text/css">
* {
margin: ;
padding: ;
list-style: none;
border: none;
}
form {
width: 400px;
margin: auto;
}
form label {
display: block;
}
form label input {
margin: 2px;
padding: 2px;
border: 1px solid #000;
}
.suggest {
position: relative;
}
.suggest input {
width: 250px;
}
#suggest {
position: absolute;
top: 22px;
right: 64px;
background-color: #fff;
width: 248px;
text-align: left;
border: 1px solid #000;
}
#suggest li {
margin: 2px;
}
#suggest a {
display: block;
color: #000;
text-decoration: none;
}
#suggest a:hover {
background: #eee;
text-decoration: underline;
color: #f00;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[name='suggest']").keyup(function(){
createList('.suggest');
$.ajax({
type: "GET",//apenas pra ficar mais fácil de debugar, pode mudar para POST depois
url: "function.php",
data: "parte="+$(this).val(),
success: function( data ){
$("#suggest").html( data );
}
});
});
$("#suggest a").live('click', function( e ){
e.preventDefault();
var href = $(this).attr('href');
var id = href.split('=');
$("input[name='id']").val( id[1] );
$("input[name='nome']").val( $(this).text() );
$("#suggest").remove();
});
$("#suggest").mouseout(function(){
$("#suggest").remove();
});
});
function createList( el )
{
$("#suggest").remove();
var list = document.createElement('ul');
list.id = 'suggest';
$( el ).append( list );
}
</script>
</head>
<body>
<form action="" method="post">
<fieldset>
<label class="suggest">Vá digitando: <input type="text" name="suggest" /></label>
<label>ID: <input type="text" name="id" /></label>
<label>Nome: <input type="text" name="nome" /></label>
</fieldset>
</form>
<p>Procure por: William, B, J..</p>
</body>
</html>
e o sql disso:
--
-- Banco de Dados: `ajax`
--
-- --------------------------------------------------------
--
-- Estrutura da tabela `cliente`
--
CREATE TABLE IF NOT EXISTS `cliente` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`nome` varchar(50) NOT NULL,
PRIMARY KEY (`id`),
KEY `cliente_indexnome` (`nome`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 PACK_KEYS= AUTO_INCREMENT=7 ;
--
-- Extraindo dados da tabela `cliente`
--
INSERT INTO `cliente` (`id`, `nome`) VALUES
(1, 'Jeovane Reges'),
(2, 'Felipe Gonçalves'),
(3, 'William'),
(4, 'William Bruno'),
(5, 'Bruno'),
(6, 'Bruno Rocha');
function.php
<?php
header("Content-Type: text/html; charset=ISO-8859-1");
echo suggest( getGet('parte') );
function suggest( $palavra )
{
$sql = "SELECT `id`, `nome` FROM `cliente` ";
if( !empty($palavra) )
$sql .= "WHERE `nome` LIKE '{$palavra}%'";
$mysqli = new mysqli( 'localhost','root','123','ajax' );
$query = $mysqli->query( $sql );
if( $query->num_rows> )
{
$li='';
while( $dados = $query->fetch_object() )
$li .= '<li><a href="?id='.$dados->id.'">'.$dados->nome.'</a></li>';
}
else
$li = 'Nenhum cadastro encontrado!';
return $li;
}
function getGet( $campo ){
return ( isset($_GET[ $campo ]) ) ? filter( $_GET[ $campo ] ) : null;
}
function filter( $var )
{
if( !get_magic_quotes_gpc() )
$str = mysql_real_escape_string( $var );
else
$str = $var;
$str = str_replace( '#', '\#', $str );
return $str;
}
em asp:
http://forum.imasters.com.br/index.php?/topic/403150-autocomplete-do-banco-de-dados