поиск товара/недвижимости с автозаполнения и заполнить содержимое динамически с php и mysql

Я разрабатываю поле быстрый поиск с автозаполнения jquery ui, php и mysql. Автозаполнение работает отлично, но я хотел бы сделать по-другому. Когда пользователь начинает вводить в поле должны быть заполнены витрины с недвижимостью родственное слово, которое он ищет.

, чтобы помочь лучше понять следующий код:

HTML

<?php
    require 'conn.php';
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Auto Completar</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- Jquery UI css -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
        <div class="container">
            <h1>Auto Completar</h1>
            <form>
                <div class="form-group">
                    <label for="busca">Busca rápido</label>
                    <input type="text" class="form-control" id="busca" placeholder="Buscar">
                </div>
            </form>
            <div  data-example-id="thumbnails-with-custom-content">
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                            <img data-src="holder.js/100%x200" 
                                alt="100%x200" 
                                src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRlZWJiNjNhYTMgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNGVlYmI2M2FhMyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS41IiB5PSIxMDUuNyI+MjQyeDIwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" 
                                data-holder-rendered="true" 
                                style="height: 200px; width: 100%; display: block;">
                            <div class="caption">
                                <label class="">hsgdhsgdh</label>
                                <p><a href="#" class="btn btn-primary" role="button">R$ 767676</a> <a href="#" class="btn btn-default" role="button">Detalhes</a>7676</p>
                            </div>
                        </div>
                    </div>
                    <ul class="resultados">

                    </ul>
                </div>
            </div>
        </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="scripts.js"></script>
    </body>
</html>

SQL-ЗАПРОСА И ВОЗВРАЩЕНИЕ JSON

<?php
 header('Content-Type: application/json; charset=utf-8');
 require 'conn.php';

 $acao = $_GET['acao'];
 $acao = mysql_real_escape_string($acao);

 switch($acao){
    case 'completar':
    $busca = mysql_real_escape_string($_GET['term']);
        $query = "
            SELECT 
                CASE
                WHEN chamada IS NULL THEN 'nenhuma descrição'
                WHEN chamada = '' THEN 'nenhuma descrição'
                ELSE chamada
                END AS Chamada
                FROM imoveis
                WHERE chamada LIKE '%$busca%'
        ";
        $ex = mysql_query($query) or die(mysql_error());
        $resJson = '[';
        $first = true;
        while($res = mysql_fetch_assoc($ex)):
            if(!$first):
                $resJson .= ', ';
            else:
                $first = false;
            endif;
            $array = array_map('utf8_encode', $res);
            $resJson .= json_encode($array['Chamada'], JSON_FORCE_OBJECT);          
        endwhile;
        $resJson .= ']';
        echo $resJson;
    break;

    case 'pesquisa':
        $pesquisa = mysql_real_escape_string($_GET['valor']);
        $query = "
            SELECT i.*, 
                CASE
                WHEN chamada IS NULL THEN 'nenhuma descrição'
                WHEN chamada = '' THEN 'nenhuma descrição'
                ELSE chamada
                END AS Chamada
                FROM imoveis i
                WHERE chamada LIKE '%$pesquisa%'
        ";
        $ex = mysql_query($query) or die(mysql_error());

        if(mysql_num_rows($ex) >= 1){
            while($res = mysql_fetch_assoc($ex)):
                echo '<li style="color: red;">';
                    echo $res['Chamada'].' '.$res['id_imovel'].' - '.$res['venda'];
                echo '</li>';
            endwhile;
        }else{
            echo '<li style="color: green;">';
                    echo 'Nenhum resultado encontrado';
            echo '</li>';
        }

    break;

    default:
        echo 'Selecione uma ação';
 }

СЦЕНАРИЯ JS

$(document).ready(function(){
    //Aucomplete

    var apresenta = $('.resultados');

    apresenta.hide().html('<li>Aguarde, carregando...</li>');

    $('#busca').autocomplete({
        //source: resultados
        source: 'controller.php?acao=completar',
        select: function(event, ui){
            var pegar = ui.item.value;
            $.ajax({
                url: 'controller.php',
                data: 'acao=pesquisa&valor='+pegar,
                success: function(resposta){
                    apresenta.fadeTo(500, 0.5, function(){
                        $(this).html(resposta).fadeTo(500, 1);
                    });
                }

            })
        }
    });
});

СВОДКИ: НАЧАЛ ЧТО-ТО ВВОДИТЬ ЗАПОЛНЯЕТ ВИТРИНЫ ДИНАМИЧЕСКИ FRONT-END

Author: Igor Silva, 2015-08-26
Source

1 answers

Нет, я Не читал весь ваш код,

, Но теоретически вы должны вернуться в свой ajax результат, который должен отображаться на витрине дай обмен на такую строку кода:

$(this).html(resposta).fadeTo(500, 1);

- 

$('ul.resultados').html(resposta).fadeTo(500, 1);
 2
Author: Guerra, 2015-08-26 17:39:53