Verificando automático se o campo que digitei existe no banco de dados

Eu consigo fazer isso com JavaScript, dessa forma, tente adaptar ao seu gosto.

Javascript: (buscar.js)

var req;

// FUNÇÃO PARA BUSCA O PRODUTO
function buscarProduto(valor) {

// Verificando Browser

if(window.XMLHttpRequest) {
 req = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
 req = new ActiveXObject("Microsoft.XMLHTTP");
}

// Arquivo PHP juntamente com o valor digitado no campo (método GET)
var url = "busca.php?produto="+valor;

// Chamada do método open para processar a requisição

req.open("Get", url, true);

// Quando o objeto recebe o retorno, chamamos a seguinte função;
req.onreadystatechange = function() {

	// Exibe a mensagem "Buscando Noticias..." enquanto carrega
	if(req.readyState == 1) {
 document.getElementById('resultado').innerHTML = 'Verificando...';
	}

	// Verifica se o Ajax realizou todas as operações corretamente
	if(req.readyState == 4 && req.status == 200) {

	// Resposta retornada pelo busca.php
	var resposta = req.responseText;

	// Abaixo colocamos a(s) resposta(s) na div resultado
	document.getElementById('resultado').innerHTML = resposta;
	}
}
req.send(null);
}

	 

	PHP: (busca.php)

<?php

include("../../includes/conn.php"); //include na conexao
// Acentuação
header("Content-Type: text/html; charset=UTF-8",true);
// Recebe o valor enviado
$valor = $_GET['produto'];

//busca o sql

 $sql = "SELECT * FROM produtos WHERE nome = '$valor' ";
 if($result = $conn->query($sql)){
 $rowcount = mysqli_num_rows($result);
if($rowcount > 1){

 echo "<span style='color: red'>Produto já registrado.</span>";

}
 }

	 

	HTML: (BuscarProduto.php)

<script type="text/javascript" src="buscar.js"></script>
<input type="text" placeholder="Produto" class="form-control" id="busca" onkeyup="buscarProduto(this.value)" />

<div id="resultado" class="resultado"></div>

	 

	Espero que resolva seu problema, att.

Um Jeito mais fácil é usar Jquery!

Então primeiramente vamos adicionar o Jquery no topo no nosso arquivo html... dentro das head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

	Verifique primeiro se já nao tem o Jquery no seu projeto!

	 

	Prosseguindo ->

	 

	**O CAMPO DA BUSCA:**

<input id="busca" type="text" class="form-control" placeholder="Buscar Cliente">
<p id="result"></p>

	Repara que demos um id para esta input, é util mais tarde, mais precisamente agora.

	O paragrafo com o id "result" , será aonde sera apresentado o resultado da pesquisa.

	 

	Na mesma pagina criamos este script!

<script>
 $("#busca").keyup(function(){
 var busca = $("#busca").val();
 $.post('busca.php', {busca: busca},function(data){
 $("#result").html(data);
 });
 });
 $("#busca").focusout(function(){
 $("#result").html("Pesquisar Por Clientes!");
 })
 </script>

	Este pequeno script verifica quando o usuario esta digitando da input, entao manda para o arquivo php oque sta sendo digitado para poder fazer a consulta no banco de dados.

	**busca.php** :

<?php
$conn = mysqli_connect('localhost','root','','busca');
$busca = $_POST['busca'];
$query = mysqli_query($conn, "SELECT * FROM clientes WHERE nome LIKE '%$busca%'");
$num = mysqli_num_rows($query);
if($num >0){
 while($row = mysqli_fetch_assoc($query)){
 echo $row['nome'].' - '.$row['email'].'<br /><hr>';
 }

}else{

 echo "Esta Pessoa Não Existe!";
}
?>

	Mais informações: [https://github.com/luannsr12/Aula_busca_com_Jquery](https://github.com/luannsr12/Aula_busca_com_Jquery)

	E está feito! Abç