Suggest AJAX – jQuery – php/Mysql

Add comments

Resolvi brincar um pouquinho aqui..

<html>
<head>
<title>Suggest</title>
<style type="text/css">
* {
        margin: 0;
        padding: 0;
        list-style: none;
        border: none;
}
form {
        width: 400px;
        margin: 0 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=0 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>0 )
        {
                $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 funcionamento:
http://www.wbruno.co…pts/suggest.php
:natal_happy:

janeiro 8th 2010 AJAX

14 Responses to “Suggest AJAX – jQuery – php/Mysql”

  1. carol Says:
    janeiro 23rd, 2010 at 11:31

    parabéns! show de bola.

  2. Desni Says:
    janeiro 31st, 2010 at 18:36

    na query não seria melhor colocar um ‘%($palavra)%’ ?
    proque da forma como esta é possivel buscar somente pelo primeiro nome, se eu souber somente o sobrenome, ou quiser todos os cadastros com o mesmo sobrenome não da pra buscar ‘-’

    mas ta r0x, vou usar isso daqui a pouco \o/

  3. TM Says:
    fevereiro 5th, 2010 at 15:01

    Fala mestre, Por acaso você tem algum tutorial ensinando fazer uma listagem de dados do BD e com drag and drop pra ordenação em AJAX? tipo este: http://blog.zuntto.com/exemplos/js-lista-drag-and-drop-ajax-ordenar/js-lista-drag-and-drop-ajax-ordenar.html

  4. rodrigo Says:
    março 3rd, 2010 at 15:43

    Não sei se é o navegador mas eu não consegui selecionar o item que aparece no input usando o teclado. Mas ficou mt bom o código.

  5. Marcelo Diniz Says:
    março 4th, 2010 at 10:33

    Boa Bruno, sei que foi só um exemplo para todos, nada muito dos sofisticados, mas funcional, e isso é o que mais importa.
    Mas me diga, pq quando coloco % aparece todos resultados, é para ser assim mesmo?
    Abs

  6. murilo Says:
    agosto 3rd, 2010 at 5:51

    não sei se é pq estou rodando localmente 127.0.0.1
    mais nao ta funfando

    primeiro bloco de codico la de cima coloquei nome como suggest.php

    criei os bagulho mysql configurei usuario senha bd

    no 3 bloco de codico que vc postou eu coloquei o nome da pagina como function.php

    utilizo wamp não aparece nenhum erro no mysql
    mais não aparece o bagulho tambem

    obs estou rodando dentor de uma pasta
    seria

    127.0.0.1/pagtest/suggest.php

  7. DIOGO Says:
    agosto 5th, 2010 at 15:18

    Boa tarde gostei muito do post mais ele esta dando um probleminha de não retornar os item o id e o nome

  8. admin Says:
    agosto 5th, 2010 at 15:31

    qndo vc clicar no item da lista do suggest, ele vai preencher o input sim..

    se deu algo errado ai, verifique oque vc fez de diferente ^^
    veja que o script funciona: http://www.wbruno.com.br/scripts/suggest.php

    []s !

  9. DIOGO Says:
    agosto 6th, 2010 at 10:38

    então aqui aparece a lista normal mais quando clico ela não me retorna nos input mais lá na barra de endereço fica exemplo

    http://localhost/Servidor/Busca/suggest.html?id=4

  10. DIOGO Says:
    agosto 6th, 2010 at 10:44

    O parceiro deu certo sim era meu jquery que estava desatualizado valeu parabens pelo post e que Deus te elumine para para que continue para que vc ajude as pessoas que como eu sou iniciante e sempre precisa de uma ajudinha por não ter muito conhecimento valeu brother t+.

  11. DIOGO Says:
    agosto 6th, 2010 at 11:05

    rs eu dinovo como eu coloco para reconhecer mais input lá no arqui coloquei * para reconher todos os campos mais onde mecho no script para retornar….?

  12. Pedro Says:
    agosto 10th, 2010 at 11:37

    Está dando erro: Fatal Error: cannot instantiate non-existent class: mysqli in c:apache\htdocs\jquery\function.php. Alguém saberia ajudar? Obrigado.

  13. admin Says:
    agosto 10th, 2010 at 22:07

    mude os mysqli, para mysql_.. esse erro quer dizer que vc não tem a biblioteca MySQLi habilitada.

    ou vc reescreve a parte php, ou vc procura tutoriais de como ativar ela

  14. Gilberto Says:
    agosto 20th, 2010 at 12:55

    Como eu poderia clonar o autosugest?
    Preciso criar uma lista auto sugestiva
    Estou tentando o clone mas a consulta so acontece para o primeiro input

Leave a Reply