0

Olá! Preciso urgentemente de ajuda, para desenvolver um estilo de busca avançada, como a do Zap Imóveis (no modo mobile). É possível fazer no CSS puro ou há FrameWorks? Fico no aguardo!

    <script>
    urlFiltro = "<?php echo $ROOTPATH; ?>/ajax/filtro_pesquisa.php";
    jQuery(function() {
        jQuery('#uf').bind('change', function(ev) {
            jQuery.ajax({
               type: 'POST',
               url: urlFiltro,
               data: { filtro: 'cidades', estado: jQuery('#uf').val() },
               beforeSend: function() {
                    jQuery('#city').html('<option>Carregando...</option>');
                    jQuery('#select_imob_bairro').html('<option></option>');
                },
                success: function(r) {
                    jQuery('#city').html(r);
                }
            });

        });
    });
</script>  
<div class="buscaMobile">
    <form id="search-form">
        <div class="linkNavForm">
            <button data-id="show" style="color: #ffffff; background-color: #f26122; border-color: #f26122;font-size: 1.75em; flex-grow: 1; display: flex; padding: 13px 40px; border-radius: 10px;">Procurar</button>
            <a data-id="show" href="#" style="color: #f26122; margin-right: 55px;">             Exibir busca
            </a>
        </div>
        <div class="rowForm">   
            <label>Finalidade</label>
            <select class="comprar" name="transacao" id="sl-transacao">
                <option value="comprar">Comprar</option>
                <option value="alugar">Alugar</option>
                <option value="alugar-temporada">Alugar temporada</option>
                <option value="lancamentos">Lançamentos</option>
            </select>       
        </div>          
        <div class="rowForm">   
            <section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
                <div class="select select-large field-search select-transacao">                               
                    <label>Tipos de imóvel</label>
                    <select class="tipoimovel" name="tipoimovel" id="sl-tipoimovel">
                        <option value="">Tipos de imóvel</option>
                        <?php
                            while($row = mysql_fetch_assoc($tipos)) {

                                $nome = utf8_decode(tratamento_string($row["nome"]));
                        ?>
                        <option value="<?php echo $nome; ?>"><?php echo utf8_decode($row["nome"]); ?></option>
                        <?php
                            }
                        ?>
                    </select>
                </div> 
            </section> 
        </div>      
        <div class="rowForm">   
            <section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
                <div class="select select-large field-search select-transacao">                               
                    <label>Quartos</label>
                    <select class="quantidade_quartos" id="quantidade_quartos">
                        <option value="0">Quartos</option>
                        <option value="1-quarto">1 quarto</option>
                        <option value="2-quartos">2 quartos</option>
                        <option value="3-quartos">3 quartos</option>
                        <option value="4-quartos">4 quartos</option>
                        <option value="5-quartos">5+ quartos</option>
                    </select>
                </div> 
            </section>  
        </div>          
        <div class="rowForm">   
            <section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
                <div class="select select-large field-search select-transacao">                               
                    <label>Vagas</label>
                    <select class="quantidade_vagas" id="quantidade_vagas">
                        <option value="0">Vagas</option>
                        <option value="1-vaga">1 vaga</option>
                        <option value="2-vagas">2 vagas</option>
                        <option value="3-vagas">3 vagas</option>
                        <option value="4-vagas">4 vagas</option>
                        <option value="5-vagas">5+ vagas</option>
                    </select>
                </div> 
            </section>  
        </div>          
        <div class="rowForm">   
            <section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
                <div class="select select-large field-search select-transacao">                               
                    <label>Estado</label>
                    <select name="uf" id="uf" class="uf">
                        <option value="">Todos os estados</option>
                        <option value="AC">Acre</option>
                        <option value="AL">Alagoas</option>
                        <option value="AM">Amazonas</option>
                        <option value="AP">Amapá</option>
                        <option value="BA">Bahia</option>
                        <option value="CE">Ceará</option>
                        <option value="DF">Distrito Federal</option>
                        <option value="ES">Espírito Santo</option>
                        <option value="GO">Goiás</option>
                        <option value="MA">Maranhão</option>
                        <option value="MG">Minas Gerais</option>
                        <option value="MS">Mato Grosso do Sul</option>
                        <option value="MT">Mato Grosso</option>
                        <option value="PA">Pará</option>
                        <option value="PB">Paraíba</option>
                        <option value="PE">Pernambuco</option>
                        <option value="PI">Piauí</option>
                        <option value="PR">Paraná</option>
                        <option value="RJ">Rio de Janeiro</option>
                        <option value="RN">Rio Grande do Norte</option>
                        <option value="RO">Rondônia</option>
                        <option value="RR">Roraima</option>
                        <option value="RS">Rio Grande do Sul</option>
                        <option value="SC">Santa Catarina</option>
                        <option value="SE">Sergipe</option>
                        <option value="SP">São Paulo</option>
                        <option value="TO">Tocantins</option>
                    </select>   
                </div> 
            </section>  
        </div>          
        <div class="rowForm">   
            <section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
                <div class="select select-large field-search select-transacao">                               
                    <label>Cidade</label>
                    <select class="city" id="city">
                        <option value="">Todas as cidades</option>
                        <?php
                            while ($row = mysql_fetch_array($cidades, MYSQL_ASSOC)) {

                                if ($_REQUEST['city_id'] == $row['id']) {
                                    echo "<option value='{$row['nome']}' selected>{$row['nome']}</option>";
                                } 
                                else {
                                    echo "<option value='{$row['nome']}'>{$row['nome']}</option>";
                                }
                            }
                        ?>
                    </select>
                </div> 
            </section>  
        </div>          
        <div class="rowForm">   
            <input type="button" name="btnBuscar" id="search-imovel" value="Buscar" class="btnSubmit">
        </div>
    </form>

Estilo da busca

.buscaMobile {
        top: 0px;
        position: relative;
        display: flex;
        justify-content: center;
    }

    .buscaMobile select {
        font-size: 13px;
        margin-top: 5px;
        width: 100%;
    }

    .buscaMobile label {
        font-size: 14px;
        font-weight: bold;
    }

.rowForm {
        height: 55px;
        margin-bottom: 5px;
        margin-top: 5px;
        overflow: hidden;
        width: 100%;
    }

    .linkNavForm {
        width: 100%;
        margin-top: 10px;
    }

    .linkNavForm a {
        color: #666;
        font-size: 13px;
        float: right;
        text-align: right;
    }
3
  • E qual é o problema que vc está enfrentando no seu código?
    – Sam
    21/10/2017 às 17:05
  • É que o estilo de busca do zap imóveis me assustou um pouco em fazer, pois você clica nas opções e uma barra de rolagem se sobrepõe a opção selecionada, enfim... estou apreensivo de como farei tal coisa, organizar na tela e tal. Gostaria de saber se um Framework ajuda ou até mesmo alguma ideia. Mas acabei deixando essa parte do site do cliente, mais adiante. 21/10/2017 às 17:20
  • Consegui realizar a seguinte estrutura em HTML, porém estou tendo dificuldades nas funções e partes da estilização. 24/10/2017 às 2:42

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .