Как сделать пользовательский фильтр, с помощью Selectpicker от Bootstrap?
Добрый день, ребята. Я с проблемой с помощью Selectpicker, чтобы сделать поле со Списком продуктов, которые я приношу из бд с помощью PHP. Моя проблема заключается в следующем: мне Нужно сделать фильтр "пользовательский" потому что, когда я лежал в select все продукты, которые поставляются BD, дают более 800, и пользователь имеет возможность добавить больше "Продуктов" по запросу, что делает Сайт и select'ы были очень тяжелые. Короче говоря, мне нужен способ, чтобы все эти продукты из Базы Данных, но ограничивать максимальный объем, который будет отображаться в Select ( я знаю, что могу ограничить запрос ), но мне нужно, что когда пользователь введите в поле поиска имя, не появляясь там в Select, с помощью фильтра поиска все результаты, даже "скрытые" Select. Как я мог это сделать ?
я Попытался сделать что-то подобное, но это не сработало, я попробовал этот образом:
Главном.php:
<?php // Parte que pesquiso os Produtos em um BD Interno.
include 'verifica_login.php';
include 'conexao.php';
include 'oracle.php';
if (!isset($_SESSION)) {
session_start();
}
error_reporting(0);
header('Content-Type: text/html; charset=utf-8');
# Fornecedores
$query_fornecedores = "SELECT nome FROM fornecedores ORDER BY nome ASC LIMIT 40";
$result1 = mysqli_fetch_all(mysqli_query($connect, $query_fornecedores), MYSQLI_ASSOC);
mysqli_close($connect);
# Produtos
$stid = oci_parse($ora_conexao,"SELECT a.desccompleta
from map_produto a, map_prodcodigo b, mrl_produtoempresa d, mrl_departamento f, map_famdivcateg ff, map_categoria cc
where a.seqproduto = b.seqproduto
and a.seqproduto = d.seqproduto
and a.seqfamilia = ff.seqfamilia
and ff.seqcategoria = cc.seqcategoria
and ff.nrodivisao = cc.nrodivisao
and d.nroempresa = f.nroempresa(+)
and cc.tipcategoria = 'M'
and ff.status = 'A'
and cc.nivelhierarquia = 2
and d.nrodepartamento = f.nrodepartamento(+)
and a.seqfamilia = ff.seqfamilia
and b.indutilvenda = 'S'
and ff.nrodivisao = 1
and b.tipcodigo in ('E','B')
and d.nrodepartamento = 4
and d.nroempresa = 1
and ROWNUM <= 100
and f.descricao = 'HORTIFRUTI'
ORDER BY a.desccompleta ASC");
oci_execute($stid);
$result2 = oci_fetch_all($stid, $res, null, null, OCI_FETCHSTATEMENT_BY_ROW);
oci_free_statement($stid);
oci_close($ora_conexao);
?>
// HTML da Div Produtos
div class="container" id="produtos">
<div class="separator"></div>
<div class="title-padrao">
<h1 class="text-center">
Produtos
</h1>
</div>
<div id="allProducts">
<section id="all-section">
<div class="inform-produtos">
<div class="primeira">
<b>Item:</b>
</div>
<div class="segunda">
<b>Cod.:</b>
</div>
<div class="terceira">
<b>Selecione um produto:</b>
</div>
<div class="quarta">
<b>Embalagem:</b>
</div>
<div class="quinta">
<b>Preço:</b>
</div>
<div class="sexta">
<b>Quantidade:</b>
</div>
<div class="setima">
<b>Preço do Produto:</b>
</div>
</div>
<div class="clone-prod" name="clone-prod[]">
<div class="wrap-prod" name="wrap-prod[]">
<div class="produtos-wrap" name="produtos-wrap[]">
<div class="text-center select_height produto-padrao" id="primeiro-produto">
<input type="text" class="index font-pop input-div" id="index_produto"
name="index_produto[]" value="1" readonly="true">
</div>
<div class="text-center select_height produto-padrao" id="segundo-produto">
<input class="font-pop number_id_produto input-div" value=""
readonly="true" name="id_produto[]" required>
</div>
<div class="text-center select_height produto-padrao terceiro-produto"
id="terceiro-produto">
<select class="selectpicker form-control" data-show-subtext="false"
data-live-search="true" name="select_produtos[]"
id="select_produtos" onchange="initProdutos(this)" required>
<?php
echo '<option disabled selected hidden
value="Selecione um produto..."
data-subtext="Selecione um produto...">Selecione um produto...
</option>';
foreach ($res as $item_produtos) {
echo '<option data-subtext="' . $item_produtos['DESCCOMPLETA'] . '" value="'
. $item_produtos['DESCCOMPLETA'] . '">' . $item_produtos['DESCCOMPLETA'] . '</option>';
}
?>
</select>
</div>
<div class="text-center select_height produto-padrao" id="quarto-produto">
<input type="text" maxlength="2" class="edit-input font-pop"
name="embalagem[]" value="" required>
</div>
<div class="text-center select_height produto-padrao" id="quinto-produto">
<input type="number" id="preco-input" name="preco[]" step="0.01" min="0"
class="edit-input font-pop" required>
</div>
<div class="text-center select_height produto-padrao" id="sexto-produto">
<input type="number" id="qtd-input" step="0.01" min="0"
class="edit-input font-pop" value="" name="quantidade-produto[]"
required>
</div>
<div class="text-center select_height produto-padrao" id="setimo-produto">
<input class="font-pop preco-produto input-div" readonly="true"
name="preco-produto[]" required>
</div>
</div>
<div class="text-center select_height produto-padrao oitavo-produto"
id="div-remove">
<button type="button"
class="remover glyphicon glyphicon-remove button-produto"></button>
</div>
</div>
</div>
</section>
<div id="wrap-addbutton">
<button type="button" id="add-button"
class="glyphicon glyphicon-plus-sign button-produto"></button>
<b>Adicione um produto...</b>
</div>
</div>
</div>
<div class="container" id="produto-total">
<div class="col-lg-12">
<div class="assinatura col-lg-9">
<div id="wrap-assinatura" class="text-center">
<div id="assinatura"></div>
<b>Assinatura</b>
</div>
</div>
<div class="preco-final col-lg-12 text-right">
<b>Preço Total:</b>
<br>
<input id="total" readonly="true" name="total_pedido" class="text-right input-div"
value="R$ 0.00">
</div>
</div>
</div>
API.php:
switch ($_GET['mode']) {
case 'fornecedores':
$letras = $_GET['letras_fornecedores'];
$query = "SELECT * FROM fornecedores WHERE nome LIKE '{$letras}%' ORDER BY nome ASC LIMIT 20";
$result = mysqli_fetch_all(mysqli_query($connect, $query), MYSQLI_ASSOC);
break;
case 'ultimoPedido':
$query = "SELECT id_pedido as ultimoPedido FROM pedido ORDER BY id_pedido DESC LIMIT 1";
$result = mysqli_fetch_all(mysqli_query($connect, $query), MYSQLI_ASSOC);
break;
default:
$letras = $_GET['letras_produtos'];
$stid = oci_parse($ora_conexao,"SELECT b.codacesso, c.embalagem, c.qtdembalagem FROM map_produto a, map_prodcodigo b, Map_Famembalagem c, MAP_Familia d
WHERE a.desccompleta LIKE '{$letras}%'
AND a.seqproduto = b.seqproduto
AND b.tipcodigo in ('B', 'E')
AND a.seqfamilia = d.seqfamilia
AND d.seqfamilia = c.seqfamilia
ORDER BY c.embalagem, a.desccompleta, c.qtdembalagem");
oci_execute($stid);
$res = oci_fetch_all($stid, $result, null, null, OCI_FETCHSTATEMENT_BY_ROW);
oci_free_statement($stid);
oci_close($ora_conexao);
//$query = "SELECT * FROM produto WHERE desc_produto LIKE '{$letras}%' ORDER BY desc_produto ASC LIMIT 20";
break;
}
mysqli_close($connect);
if($result == NULL)
die('Nenhum resultado encontrado');
header('Content-Type: application/json');
echo json_encode($result, JSON_PRETTY_PRINT);
Сценария.js :
function filterProdutos(letras_produtos) {
console.log(letras_produtos);
$.ajax({
type: "GET",
url: "API.php",
data: {
"mode": "produtos",
"letras_produtos": letras_produtos,
},
dataType: "JSON",
//CASO DÊ TUDO CERTO
success: function (data) {
console.log(data);
console.log(letras_produtos);
var options = '';
options = '<option disabled selected hidden value="Selecione um produto..." data-subtext="Selecione um produto...">Selecione um produto...</option>';
for (var i in data) {
options = options + '<option value="' + data[i]['desc_produto']
+ '" data-subtext="' + data[i]['desc_produto'] + '">'
+ data[i]['desc_produto'] + '</option>';
}
$("[name='select_produtos[]']").html(options);
$("[name='select_produtos[]']").selectpicker('refresh');
},
error: function (request, error) {
console.log("Request: " + JSON.stringify(request));;
}
});
}
function filtragem_valores(div, valor) {
if (div == 'div_fornecedores') {
filterFornecedores(valor);
} else {
filterProdutos(valor);
}
}
что происходит в том, что значение, которое я ввожу в selectpicker, не идет и в этом мой фильтр. Кто может дать мне свет ?
3 answers
Мне Удалось решить эту проблему реорганизация мои functions фильтра принадлежности, спасибо всем, кто пытался помочь.
В моем intendimento на этот вопрос, вы должны использовать Ajax, чтобы запрос базы данных, так что вы могли бы сделать запрос с LIKE и выбрать определенное количество элементов стандарта с ЛИМИТОМ pra обновления экрана клиента.
Взгляните: Ajax Приступая к работе/Руководство
Таким образом, вы можете избежать загрузки всех данных с select, делаете запрос только тогда, когда пользователь вводит в поле поиска, которое ativara событие js делает запрос на ajax, которая делает соединение с базой данных через php, возвращая данные.
Выхватил?
, Лео, как ты имеешь здесь решение, которое, возможно, будет работать в вашем случае.
, JS:
document.getElementById("Id_do_campo_de_pesquisa").addEventListener("keyup",function() {
getInfo(this.value);
});
function getInfo(letras){
$.get("url_do_api.php?letrasProdutos="+letras,function(data){
var select = document.getElementById('Id_do_Seu_select');
var info = JSON.parse(data);
var len = info.length;
var options = "";
for(var i = 0; i<len ; i++){
options += "<option value='"+info[i]+"'>"+info[i]+"</option>";
//aqui podes simplesmente recuperar os teus produtos e colocar dentro do teu select
}
select.innerHTML = "";
select.innerHTML = options;
})
}
, Как в PHP, просто construires твой запрос с Like и отправить ответ с помощью json_encode(); , тем не менее, было бы хорошо у твоей таблица проиндексирована, кто это и более быстрая в исследовании
Edit: если ты думаешь, что твоя функция фильтрации ja делает это, вызывает ее вместо того, чтобы вызвать getInfo ();, который был только мой пример же я Надеюсь, что помог
Edit 2 я не вижу отсутствие упоминания в свой файл также