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>
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 tabelatbl_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 parapost_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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP