Auto Complete

Bruno Conte · Agosto 14, 2013

boa tarde pessoal, estou usando um auto complete para buscar no meu banco a partir do que o usuario for digitando.

quando o usuario digitar por exemplo Ar o sistema vai aparecer Arroz.

Quando ele clicar em cima do Arroz para terminar de preencher, gostaria que o sistema automaticamente preenchesse + 2 campos no formulario, um chamado quantidade e outro valor, a quantidade sempre sera 1 inicial e o valor vem do banco.

meu auto complete é:

busca.php

<?php

session_start();

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>jQuery Autocomplete Plugin</title>

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

<script type='text/javascript' src="js/jquery.autocomplete.js"></script>

<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />

<script type="text/javascript">

$().ready(function() {

$("#course").autocomplete("autoComplete.php", {

width: 260,

matchContains: true,

//mustMatch: true,

//minChars: 0,

//multiple: true,

//highlight: false,

//multipleSeparator: ",",

selectFirst: false

});

});

</script>

</head>

<body>

<h2>Autocomplete usando jQuery, Ajax, PHP</h1>

<div id="content">

<form autocomplete="off">

<p>

Digite um nome:

<input type="text" name="course" id="course" />

</p>

</form>

</div>

</body>

</html>

e o autocomplete.php

<?php

include"../../includes/conecta.php";

$q = strtolower($_GET["q"]);

if (!$q) return;

$sql = "select DISTINCT nome from produtos where nome LIKE '%$q%'";

$rsd = mysql_query($sql);

while($rs = mysql_fetch_array($rsd)) {

$cname = $rs['nome'];

$id = $rs['id_produto'];

$valor = $rs['valorun'];

echo "$cname";

}

?>

ja ate criei o array para puxar os valores que preciso, agora necessito so ele preencher os campos.

Ficarei grato se alquem puder ajudar!!!

allex_carvalho · Agosto 14, 2013

Pra fazer isso precisa usar o .blur do jquery. Ao sair do input auto complete ele faz uma busca no banco referente ao valor digitado. Ai você popula o input desejado.

Snowden · Agosto 14, 2013

jQuery Ui

$("#teste").autocomplete({
	source: "teste.php",
	minLength: 1,
	select: function(event, ui) {
		$('#qtd').val('1');
        $('#valor').val(ui.item.valor);
    }
});

HTML

<input id="teste" />
<input id="qtd" />
<input id="valor" />

PHP

$q = $_GET['term'];

$sql = $mysqli->query("SELECT * FROM `produto` WHERE `nome` LIKE '%".$q."%'");
	while ($row = $sql->fetch_assoc()) {
		$data[] = array(
			'label' => $row['nome'],
			'value' => $row['nome'],
			'valor' => $row['valor'],
		);
    }
echo json_encode($data);

Bruno Conte · Agosto 19, 2013

testei aqui nao funcionou.

veja como ficou:

index.php

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript">

$("#teste").autocomplete({

source: "autoComplete.php",

minLength: 1,

select: function(event, ui) {

$('#qtd').val('1');

$('#valor').val(ui.item.valor);

}

});

</script>

</head>

<body>

<h2>Autocomplete usando jQuery, Ajax, PHP</h1>

<div id="ui-widget">

<form autocomplete="off">

<p>

Digite um nome:

<input id="teste" />

<input id="qtd" />

<input id="valor" />

</p>

</form>

</div>

autoComplete.php

<?php

include"../../includes/conecta.php";

$q = $_GET['term'];

$sql = $mysqli->query("SELECT * FROM `produto` WHERE `nome` LIKE '%".$q."%'");

while ($row = $sql->fetch_assoc()) {

$data[] = array(

'label' => $row['nome'],

'value' => $row['nome'],

'valor' => $row['valor'],

);

}

echo json_encode($data);

?>

ele nem a busca faz!!!!

Snowden · Agosto 19, 2013

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>

<script>
$(function() {
$("#teste").autocomplete({
	source: "autoComplete.php",
	minLength: 1,
	select: function(event, ui) {
		$('#qtd').val('1');
        $('#valor').val(ui.item.valor);
    }
});
});
</script>
</head>

<body>
<h2>Autocomplete usando jQuery, Ajax, PHP</h1>
        <div id="ui-widget">
          
                <p>
                    Digite um nome: <input id="teste" />
                    Quantidade: <input id="qtd" />
                    Valor: R$ <input id="valor" />
                </p>
 
           
        </div>
</body>
</html>

autoComplete.php

<?php

$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);

if (mysqli_connect_errno())
{
die(mysqli_connect_error());
exit();
}
$mysqli->query("SET NAMES 'utf8'");

if(isset($_GET['term']))
{
$q = $mysqli->real_escape_string($_GET['term']);

$sql = $mysqli->query("SELECT * FROM `produto` WHERE `prod_nome` LIKE '%".$q."%'");
	while ($row = $sql->fetch_assoc()) {
		$data[] = array(
			'label' => $row['prod_nome'],
			'value' => $row['prod_nome'],
			'valor' => $row['prod_preco'],
		);
    }
echo json_encode($data);
}

?>

Wagner Martins - SC · Setembro 25, 2013

Este script não funciona no opera, netscape e ies

angelorubin · Setembro 25, 2013

Montei um exemplo em jQuery UI igual esse que o Hugo passou esses dias para alguém que pediu na área de JS, veja funcionando online aqui - http://angelorubin.besaba.com/Imasters/JqueryUi/AutoComplete/

OBS: Funciona no navegadores citados sem problemas.

Wagner Martins - SC · Setembro 26, 2013

Cara funciona em todos os navegadores mesmo, oq ue vc mudou pro código do Hugo? Pois coloquei o mesmo caminho dos jquerys do código fonte do link que vc passaou, mais no meu não funcionou. Vc poderia postar o link da pergunta da pessoa q tinha essa mesma duvida?

Vi que o problema esta aqui:

No seu códio vc usa

No meu eu uso

Se eu troco pelo seu endereço não funciona, sabe me dizer porque?

angelorubin · Setembro 30, 2013

Porque são versões diferentes do jQuery, o seu é 1.6 e o meu é a 1.9.

Agora não estou em casa, mas segunda posto o código inteiro aqui.

Olá,

Segue o auto complete em Jquery UI, PHP e MySQL:

Js

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><script>$(function(){	$("#linguagens").autocomplete({		source: "busca.php",		minLength: 3,	})})</script>

Html

<label for="Linguagens">Linguagens: </label><input id="linguagens" /><p>Busque por palavras como: php, javascript, css, html (busca após o terceiro caracter digitado.)</p>

busca.php

<?php// DESENCORAJO O USO DE MYSQL FUNCTIONSmysql_connect('localhost','root','');mysql_select_db('nome_banco');$term = trim(strip_tags($_GET['term']));$qstring = "SELECT nome FROM linguagem WHERE nome LIKE '%".$term."%'";$result = mysql_query($qstring);while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) values {    $row['nome'] = htmlentities(stripslashes($row['nome']));    $row_set[] = $row['nome'];}echo json_encode($row_set);?>

Sql

-- phpMyAdmin SQL Dump-- version 3.4.9-- http://www.phpmyadmin.net---- Servidor: 127.0.0.1-- Tempo de Geração: 30/09/2013 às 14h26min-- Versão do Servidor: 5.5.20-- Versão do PHP: 5.3.9SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";SET time_zone = "+00:00";/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;/*!40101 SET NAMES utf8 */;---- Banco de Dados: `imasters`---- ------------------------------------------------------------ Estrutura da tabela `linguagem`--CREATE TABLE IF NOT EXISTS `linguagem` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `nome` varchar(50) NOT NULL,  PRIMARY KEY (`id`)) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;---- Extraindo dados da tabela `linguagem`--INSERT INTO `linguagem` (`id`, `nome`) VALUES(1, 'php'),(2, 'html'),(3, 'css'),(4, 'javascript');/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Espero que ajude.

Arquivado

Auto Complete

Recommended Posts

Bruno Conte 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Conte 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wagner Martins - SC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wagner Martins - SC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Fóruns

Tempo Real

Informação importante