Neste artigo iremos fazer um campo de pesquisa do modelo Instant Search, também conhecida como Live Sarch, pesquisa instantânea, pesquisa dinâmica, entre outros nomes. Desenvolveremos este recurso utilizando PhP e Javascript utilizando uma estrutura que eu mesmo desenvolvi para o meu blog. Você encontra esta pesquisa no campo de pequisa da página inicial deste blog.

Pré-requisitos: é muito importante para a compreensão deste artigo que você já tenha lido o artigo anterior chamado Passando variáveis, objetos e arrays do PhP para Javascript, pois iremos utilizar esse método aqui. Claro, esta não é a única forma de se fazer este tipo de pesquisa, mas desde que seu projeto seja estruturado em PhP e você utilize também Javascript para fazer uma apresentação bonita das views do lado do cliente, este método será muito bom.
Esta estrutura de pesquisa instantânea foi uma lógica que eu mesmo desenvolvi sem utilizar referências de nenhum outro artigo, pois quando precisei fazer este tipo de função não encontrei nada relacionado na internet que pudesse me ajudar ou fosse simples. Contudo, espero que você também goste.

A estrutura
Para criarmos esse campo de pesquisa instantânea, iremos utilizar o PhP para fazer a conexão com o banco de dados e também suas classes, onde teremos um objeto com informações que iremos trazer para a pesquisa. Vamos utilizar também um arquivo .php separado para executar algumas funções extras e se comunicar com as classes que criamos. Usaremos um arquivo javascript com jQuery que será o encarregado por apresentar os dados da pesquisa na tela.
Vou utilizar um catálogo de sapataos que peguei na internet como exemplo, que serão o objeto Produto Ao todo teremos quatro arquivos para manipularmos:

• Dao.php
  Encarregado de se conectar com o banco de dados. Há um artigo neste blog dizendo mais sobre DAO, clique aqui para lê-lo [ARTIGO AINDA NÃO PUBLICADO]
• Produto.php
  Será onde teremos os atributos com métodos do objeto Produto. Ele se comunicará com o banco e trará os dados dos produtos.
• script.js
  Arquivo jQuery que utilizaremos para apresentar a view o que está sendo buscado no campo de pesquisa instantânea.
• index.php
  O arquivo contendo todo HTML do site. Este arquivo é importante, porque é nele que iremos operar a estrutura de exibição da pesquisa.

Você pode utilizar no banco de dados as tabelas que você preferir, aqui não iremos tratar isso, apenas a parte do back-end e sua apresentação no front-end. Novamente, insisto, você precisa ter o conhecimento prévio de como passar variáveis, objetos e arrays do PhP para Javascript para concluir as ações deste artigo.

Veja a simpatica tela que eu desenvolvi para este artigo e experimente a pesquisa instantânea::


Este é o arquivo index.php que utilizarei para este artigo, mas seu código iremos explorar mais ao final do artigo.
O array apresentado no menu da esquerda se trata do Array que criaremos com o PhP para passá-lo para o Javascript.

---

Dao.php

Neste arquivo é feito a conexão com o banco de dados utilizando o PDO. Não entrarei em detalhes sobre o mesmo neste artigo, pois já existe outro artigo no blog falando sobre o PDO e como utilizá-lo. Se você não sabe como manipular o PDO para fazer conexão com o bancos de dados ou nunca tinha ouvido falar, você pode acessar o artigo na íntegra e conhecê-lo clicando aqui [ARTIGO AINDA NÃO PUBLICADO].
Sobre as tabelas a serem utilizadas no banco, como dito anteriormente, você poderá utilizar as tabelas que preferir.

<?php

	class Dao{
		private static $db;
		
		public function instance(){
			if(!self::$db){
				self::$db = $this->connect();
			}
			return self::$db;
		}
		
		private function connect(){
			$db = new PDO("mysql:host=localhost;dbname=produtosExemplo;charset=utf8","root","");
			$db->setAttribute(PDO::ATTR_AUTOCOMMIT, PDO::ERRMODE_EXCEPTION);
			return $db;
		}
	}

?>

Produto.php

Não teremos nada complexo nesta classe, apenas os atributos id e descricao. Estou utilizando os princípios de Model (do padrão MVC) apenas para termos uma base de padrões de projeto, mas não vamos utilizar o MVC por completo. Dentro desta classe, podemos ter os métodos padrões de CRUD e também os getters e setters. Lembrando que todos esses padrões já abordei em um outro artigo que vale a pena você dar uma olhada, clique aqui para ver [ARTIGO AINDA NÃO PUBLICADO]
A função buscaTodosProdutos será o encarregado de trazer todos os registros do banco para que sejam filtrados mais tarde com o jQuery.
Os dados trazidos do banco serão exatamente o conteúdo do painel esquerdo da tela index.php que apresentei logo acima no começo do artigo.

<?php

	include_once("Dao.php");
	public class Produto extends Dao {
		private $id;
		private $descricao;
			
		// Método construtor
		private $db;
		public function __construct(){
			$db = new Dao();
			$this->db = $db->instance();
		}
		
		// Métodos CRUD: insere, altera, remove e buscar
		// ...
		
		// Métodos da classe
		public function buscaTodosProdutos(){
			try{
			
				$sql = "
					SELECT * FROM produtos;
					";
				
				$produtos = new Array();
				
				$query = $this->db->prepare($sql);
				$query->execute();
				$dados = $query->fetchAll(PDO::FETCH_ASSOC);
				foreach($dados as $listado){
					$produto = new Produto();
					$produto->setId($listado["id"]);
					$produto->setDescricao($listado["descricao"]);
					$produtos[] = $produto;
				}
				
				return $produtos;
				
			} catch {
				return NULL;
			}
		}
		
		public function criaObjetoJS(){
			$inicioScript = "<script type='text/javascript'>";
			$fimScript = "</script>";
			
			$produto = new Produto();
			$produto = $produto->buscaTodosProdutos();
			
			// criamos e abrimos o array obj que será passada para o javascript
			$criaObj = "var obj = [";
			
			// o que encontrarmos vamos concatenar na variavel add
			$add = "";
			
			for($i = 0; $i < count($produto); $i++){
				$add .= "'".$produto[$i]->getDescricao()."', ";
			}
			
			// remove a última virgula para fecharmos o array
			$add = substr($add, 0, strlen($add)-2);		
			
			// cria o script e fecha o array
			$script = $inicioScript.$criaObj.$add.'"];'.$fimScript';	
			
			// resultado final: <script> var obj = ["nome produto A", "outro produto B", "produto teste C"]; </script>
			return $script;
		}
		
		// Métodos get e set
		// ...
		
	}

?>

Neste modelo estamos utilizando PDO. A classe Dao.php e Produto.php possui uma estrutura de padrões de projeto na qual há um artigo neste blog explicando sobre o mesmo de forma bem prática. Você pode ver este artigo clicando aqui [ARTIGO AINDA NÃO PUBLICADO].

---

script.js

Neste arquivo manipularemos os dados que serão exibidos de acordo com a pesquisa.
Utilizaremos a seguinte lógica: carregue todos os itens na tela e esconda-os logo em seguida; a cada tecla digitada iremos pesquisar o conteúdo do campo txtPesquisar e caso a descrição de algum dos produtos escondidos se coinsida com o conteúdo do array obj que está sendo apresentado no momento; mostre-o.
Segue o arquivo script.js:

$(document).ready(function(){

    // será colocado aqui os arquivos encontrados da pesquisa
    var encontrados = new Array();
	
    var digito = "";
    
    // tudo acontecerá a cada tecla digitada, vem daí a pesquisa dinâmica
    $("#txtPesquisa").keyup(function(){	
        digito = $("#txtPesquisa").val();
        for(var i = 0; i < obj.length; i++){
		
            // indexOf é o responsável por verificar se existe aquele texto em alguma parte do obj[i]
            if(obj[i].toLowerCase().indexOf(digito.toLowerCase()) != -1){
                encontrados.push(obj[i]);
            }else{
                var posicao = obj.indexOf(obj[i]);
                if(posicao){
                    encontrados.splice(posicao, 1);
                }
            }
        }
        filtraEncontrados();
    });

    function filtraEncontrados(){
		
        for(var i = 0; i < obj.length; i++){
            // esconde todos os produtos um por um
            $("#n-produto-"+i).hide(); 
        }
        for(var i = 0; i < encontrados.length; i++){
            for (var y = 0; y < obj.length; y++) {
                if(obj[y] == encontrados[i]){
                    // mostra o produto
                    $("#n-produto-"+y).show(); 
                }
            }
        }
        
        // se não tiver nada encontrado, mostra a linha escondida avisando o usuário
        if(encontrados.length == 0){
            $("#nenhumProduto").show();
        }else{
            $("#nenhumProduto").hide();
        }
        
        // esvaziamos o array para que ele seja renovado na próxima tecla pressionada no inicio da função acima
        encontrados = new Array();
    }

});

index.php

O arquivo index.php, é onde contem todo o html da página, tem o papel fundamental de organizar os elementos do Javascript com o PhP e principalmente a organização das linhas da lista que deverão ser manipuladas a cada vez que o usuário digitar no campo de pesquisa.

<html>
	<head>
		<title>Pesquisa dinamica com Javascript e PhP</title>
	</head>
	<body>
	
		<?php
			include_once("Produto.php");
			include_once("manipulaProduto.php");
			$produto = new Produto();
			echo $produto->criaObjetoJS();
			$listaProdutos = $produto->buscaTodosProdutos();
		?>
	
			<div class="row">
				<div class="col-md-4">
					<div class="text-center">
					<h3><span style="color: blue;">var</span> arrayProdutos</h3>
						<!-- menu esquerdo contendo apenas textos... -->
					</div>
				</div>
				<div class="col-md-7 col-md-offset-1">
					<div class="text-center">
						<h3>Pesquisa instantânea</h3>
						<br>
					</div>
					<input type="text" id="txtPesquisa" class="form-control"  placeholder="Faça uma busca instantânea">
					<span><i class="fa fa-search iconinside"></i></span>
					<hr>
					<p class="lead">Todos nossos produtos</p>
					<ul>
						
						<?php
							for($i = 0; $i < count($listaProdutos); $i++){
						?>
						
						<!-- atenção na variavel $i sendo passada no final dos Ids de cada li -->
						<li id="n-produto-<?php echo $i; ?>"> <?php echo $listaProdutos[i]->getTitulo(); ?> </li>
						
						<?php
							}
						?>
							
						<li id="nenhumProduto" style="display: none;">Nenhum item foi encontrado</li>
					</ul>
				</div>
			</div>
		
		<script type="text/javascript" src="script.js"></script>
	</body>
</html>

Você pode ver o resultado final no início do artigo onde apresento a tela de demonstração da pesquisa instantânea. Clique para subir.
Esta não é a única forma de fazer este tipo de operação. O que fizemos aqui foi basicamente em um loop for, adicionar item por item nas linhas da lista, e principalmente, incrementar o final do Id de cada linha com a variável $i, assim mantendo todos os Ids diferentes e sendo facilmente manipulado pelo arquivo script.js nos loops de for que tem por lá.

---

Considerações finais

Esta é a estrutura completa da pesquisa instantânea. O que tratamos aqui foi basicamente uma função na classe PhP que converte os objetos trazidos do banco em Javascript, com isso, estruturamos uma lógica em javascript para realizar a exibição dos itens do painel de acordo com o que foi digitado pelo usuário no campo de pesquisa, utilizando uma estrutura específica para isso na view.
Existem outros métodos para realizar este tipo de pesquisa instantânea, mas este que foi passado neste artigo me agrada bastante, porque de tudo que foi realizado aqui, tivemos apenas uma única consulta no banco. Trazemos todos os dados de uma só vez em uma só consulta, e a partir disso, o mecanismo que filtra o que será exibido ou não para usuário é realizado através do cliente-side com o javascript.

Neste artigo abordamos alguns temas que já foram abordados em outros artigos neste blog, confira-os na íntegra:

• Como passar variáveis, arrays e objetos do PhP para o Javascript
• Utilizando PDO para se conectar com o banco com o PhP   - Artigo ainda não publicado
• Padrões de projeto simples e eficazes   - Artigo ainda não publicado
• Realizando o CRUD (insere, altera, exclui e busca) em PhP com PDO   - Artigo ainda não publicado
• Realizando o CRUD em PhP com PDO utilizando padrões de projeto na prática   - Artigo ainda não publicado

Dependendo da data na qual você esteja lendo este artigo, alguns dos artigos da lista acima ainda não tenham sido publicados, por este motivo, recomendo que salve o blog nos favoritos do seu navegador e também acompanhe a página no Facebook para receber notificações de artigos novos!