Sugestão Automática - Php + jQuery

[Renato Neto 0]

Eae galerinha, esse é meu primeiro tutorial aqui e espero que gostem!

 

O objetivo deste pequeno guia é ensinar o leitor a criar um simples sistema de

Sugestão automática buscando em um banco de dados, utilizando PHP + jQuery.

 

O sistema será assim:

 

Digitaremos em um campo input alguma coisa, o jQuery irá enviar o que foi digitado via ajax para uma

página PHP que fará a procura, e caso haja algum resultado ele será exibido.

 

Vamos começar com a página de configuração e conexão com o banco de dados, a config.php

<?php
$hostIp = "localhost";
$hostUser = "root";
$hostPass = "senha";
$hostDb = "autocompletar";

if(!$con = mysql_connect($hostIp, $hostUser, $hostPass)) {
	echo "Não foi possível conectar ao banco de dados.";
	exit;
} elseif(!mysql_select_db($hostDb)) {
	echo "Não foi possível selecionar o banco de dados.";
	exit;
}
?>

 

Agora iremos para a página PHP encarregada da busca, a autocomplete.php

<?php
if(isset($_POST["search"])) {

// Setamos o charset da página para iso-8859-1
header("Content-Type: text/html; charset=iso-8859-1");

// Incluimos o arquivo de configuração e conexão com o banco de dados
require("config.php");

// Resgatamos os dados enviados pelo ajax
$search = mysql_real_escape_string($_POST["search"]);

	// Checamos se a variável que resgatou os dados não está vázia
	if(!empty($search)) {

		// Executamos a query de busca
		$qry = mysql_query("SELECT * FROM `noticias` WHERE `titulo` LIKE '%{$search}%' LIMIT 0,30");

		// Checamos se houve resultado
		if(mysql_num_rows($qry) > 0) {
			
			// Fazemos o loop que irá exibir os resultados
			while($x = mysql_fetch_assoc($qry)) {
				$titulo  = (strlen($x["titulo"]) > 20) ? trim(substr($x["titulo"], 0, 20)) . "..." : $x["titulo"];
				echo "<a href='#' rel='" . $x["titulo"] . "' class='results' title='" . $x["titulo"] . "'>{$titulo}</a><br />\n";
			}
		}
		
	}
}
?>

Terminada a página de busca iremos para as partes importantes da index.php

 

O jQuery

$("document").ready(function() {

	var target = "#suggestion"; // ID da div onde será exibido as sugestões
	var searchinp = "#search"; // ID do input

	// Esse evento será executado quando a pessoa digitar alguma coisa no input
	$(searchinp).keyup(function() {
	
		// Setamos a var search para o value do input
		var search = $(this).val();
		
		// Se estiver vázia esconde a div de resultados, caso contrário envia os dados para página de busca e exibe as sugestões
		if(search == "") {  
			$(target).hide();
		} else {
			$.ajax({type: "POST", url: "autocomplete.php", data: "search=" + search, success: function(data) { $(target).fadeIn("slow").html(data); }});
		}
	});

	// Quando alguma sugestão for clicada, o valor do rel dela irá para o input e a div de sugestões será escondida
	$(".results").live("click", function(e) {
		e.preventDefault();
		$(searchinp).val($(this).attr("rel"));
		$(target).hide();
	});
	
	// Se houver um clique e a div de sugestões estiver visível ela será escondida
	$("*").click(function() {
		if(!$(target).is(":hidden")) {
			$(target).hide();
		}
	});

});

O php do envio do form que exibe a notícia

<?php
if(isset($_POST["search"])) {

// Incluimos o arquivo de configuração e conexão com o banco de dados
require("config.php");
	
	// Resgatamos o valor do input
	$search = mysql_real_escape_string($_POST["search"]);
	
	// Executamos a query
	$qry = mysql_query("SELECT * FROM `noticias` WHERE `titulo` = '{$search}'");
	
	// Se houver resultado exibimos, caso não dizemos que nada foi encontrado
	if(mysql_num_rows($qry) > 0) {
		$x = mysql_fetch_assoc($qry);
		
		echo "
		<h1>" . $x["titulo"] . "</h1>
		<h3>Notícia enviada em " . $x["data"] . " por " . $x["autor"] . "</h3>
		" . nl2br($x["noticia"]) . "
		";
	} else {
		echo "Nada foi encontrado.";
	}
}
?>

o CSS

body { font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; }
#search { border: 1px solid #363636; }
a { text-decoration: none; color: #000; }
a:hover { color: #ff6600; font-weight: bold; }
#suggestion { width: 170px; padding-left: 3px; border: 1px solid #c1c1c1; border-top: none; background: #fff; display: none; position: absolute; left: 51px; top: 31px; overflow: auto; max-height: 100px; 

line-height: 18px; }

O form e a div responsável por exibir as sugestões

<form method="post" action="">
Busca: <input type="text" name="search" id="search" autocomplete="off" />
<input type="submit" name="submit" value="OK" />
</form>
<div id="suggestion"></div>

Segue também a Tabela noticias

CREATE TABLE `noticias` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`titulo` VARCHAR( 100 ) NOT NULL ,
`noticia` TEXT NOT NULL ,
`autor` VARCHAR( 30 ) NOT NULL ,
`data` DATETIME NOT NULL
) ENGINE = MYISAM ;

Espero que tenham gostado, e comentem :D

 

Script em funcionamento: Ver

 

Segue link para download do sistema completo

Download

 

Sugestão Automática - Php + Jquery

por Renato Neto é licenciado sob uma Licença Creative Commons Atribuição-Compartilhamento pela mesma licença 3.0 Brasil.

[WM _ Guilherme Ferrolli 0]

procura usar o mysql_fetch_array ao invés do mysql_fetch_assoc, assim você pode usar números como filtros da sua pesquiza também.

muito legal o tópico.

;D

abraço

 

Guilherme Ferrolli