TransWikia.com

Utilizar o dropdown select no autocomplete da busca em php mysql

Stack Overflow em Português Asked by Paulo Lima on August 29, 2020

Tenho esse input=[text] com autocomplete que oferece o título com um link (a href=) no banco de dados mysql, porém gostaria de criar ‘categorias’ para selecionar os links que o autocomplete oferece através de um dropdown select.

Este é meu form:

<form>
    <div class="form-group">
        <div class="input-group">
            <input id="txtSearch" class="form-control input-lg" type="text" placeholder="Selecione Região e busque por Nome..." />
            <div class="input-group-addon">
                <i class="glyphicon glyphicon-search"></i>
            </div>
         </div>
    </div>
</form> 


<script>
$(document).ready(function(){

    $('#txtSearch').autocomplete({
        source: "post_search.php",
        minLength: 2,
        select: function(event, ui) {
            var url = ui.item.id;
            if (url != '#') {
                location.href = url
            }
        },
        open: function(event, ui) {
            $(".ui-autocomplete").css("z-index", 1000)
        }
    })

});
</script>

Este é meu post_search.php:

<?php

    require_once 'dbconfig.php';

    $keyword = trim($_REQUEST['term']); // this is user input

    $sugg_json = array();    // this is for displaying json data as a autosearch suggestion
    $json_row = array();     // this is for stroring mysql results in json string

    $keyword = preg_replace('/s+/', ' ', $keyword); // it will replace multiple spaces from the input.

    $query = 'SELECT postID, postTitle, postUrl FROM tbl_posts WHERE postTitle LIKE :term'; // select query

    $stmt = $DBcon->prepare( $query );
    $stmt->execute(array(':term'=>"%$keyword%"));

    if ( $stmt->rowCount()>0 ) {

        while($recResult = $stmt->fetch(PDO::FETCH_ASSOC)) {
            $json_row["id"] = $recResult['postUrl'];
            $json_row["value"] = $recResult['postTitle'];
            $json_row["label"] = $recResult['postTitle'];
            array_push($sugg_json, $json_row);
        }

    } else {
        $json_row["id"] = "#";
        $json_row["value"] = "";
        $json_row["label"] = "Nothing Found!";
        array_push($sugg_json, $json_row);
    }

    $jsonOutput = json_encode($sugg_json, JSON_UNESCAPED_SLASHES); 
    print $jsonOutput;

EDIT:
Aqui está uma idéia de como ficaria após inserir o dropdown de categorias antes do input de texto com as URL’s:

<form>
    <select class="border-white -rounded"> <!-- Esta seriam as categorias dos POSTS -->
        <option>Selecione a Categoria:</option>
        <option>Categoria 1</option>
        <option>Categoria 2</option>
        <option>Categoria 3</option>
    </select>

    <!-- Este seria o input para o título dos POSTS -->
    <input class="border-white -rounded" type="text" placeholder="Busque por Título"> 
    <div class="autocomplete">
        <i class="glyphicon glyphicon-search"></i>
    </div>
    <!-- Aqui apareciam as sugestões conforme digita acima -->
</form> 

One Answer

Aparentemente o chat não funcionou muito bem aqui, então responderei com o que acho que pode resolver seu problema.

A primeira coisa que precisamos fazer é popular o dropdown select com as categorias existentes no banco de dados. Para isso, buscamos as categorias com PHP e iteramos sobre os resultados, definindo um option para cada.

$query = "SELECT DISTINCT postCat FROM tbl_posts";
$result = mysql_query($query);

Aqui considerei que existe uma coluna chamada postCat na tabela tbl_posts que armazena a categoria de cada post.

A diretiva do SQL distinct serve para buscarmos de forma única todas as categorias existentes. Isto é, se houver dois registros na categoria tecnologia, teremos * tecnologia* apenas uma vez no resultado. Agora populamos o select com os dados:

<form>
    <select id="postCat" class="border-white -rounded">
        <option>Selecione a Categoria:</option>

        <?php while($cat = mysql_fetch_assoc()) { ?>
            <option value="<?php echo $cat["postCat"]; ?>"><?php echo $cat["postCat"]; ?></option>
        <?php } ?>
    </select>

    {...}
</form> 

Agora precisamos fazer com que a categoria selecionada seja enviada como filtro de busca ao arquivo PHP post_search.php. Podemos fazer isso recuperando o valor selecionado através do jQuery e passando-o por Query String.

<script>
$(document).ready(function(){

    var categoria = $('#postCat').val();

    $('#txtSearch').autocomplete({
        source: "post_search.php?postCat=" + categoria,
        minLength: 2,
        select: function(event, ui) {
            var url = ui.item.id;
            if (url != '#') {
                location.href = url
            }
        },
        open: function(event, ui) {
            $(".ui-autocomplete").css("z-index", 1000)
        }
    })

});
</script>

Perceba que eu defini um id para o campo select, recuperei seu valor para a variável categoria e passei seu valor pela query string, quando definido o caminho do arquivo de busca. Assim a requisição será encaminhada para post_search.php?postCat=tecnologia, por exemplo.

Agora, para filtrar os dados na busca com base na categoria selecionada, basta utilizar a diretiva where do SQL.

No arquivo post_search.php:

{...}
$postCat = $_GET["postCat"];

$query = 'SELECT postID, postTitle, postUrl FROM tbl_posts WHERE postTitle LIKE :term AND postCat = "$postCat"';
{...}

Desta forma, a busca será executada apenas nos posts da categoria selecionada.

Tentei descrever a ideia. Não tenho certeza se da forma apresentada funciona 100% e não me atentei a fazer todas as validações e testes de segunrança. Isso deixo a seu cargo.

Answered by Woss on August 29, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP