我已经建立了搜索(https://brawlins.com/oer/index.php),我希望使用户能够选择过滤器来限制搜索结果,以限制他们的初始搜索。我在搜索页面(https://brawlins.com/oer/search.php?term=)的下拉菜单中填充了过滤器,但是我不确定一旦用户单击结果后如何过滤结果。我希望用户也能够选择多个选项。我创建一个类来存储过滤器。以下是我的过滤器类中的代码:
<?php
class filterContentProvider {
private $conn;
public function __construct($conn) {
$this->conn = $conn;
}
public function getType ($conn) {
$query = $this->conn->prepare("SELECT type, COUNT(*) as total FROM oer_search GROUP BY type");
$query->execute();
$filterHTML .= "<h3 class='filterTitle'>Type</h3>";
$filterHTML .= "<select class='select-css'>";
$filterHTML .= "<option value=''>- Type -</option>";
while($row = $query->fetch(PDO::FETCH_ASSOC)) {
$type = $row["type"];
$total = number_format($row["total"]);
$filterHTML .= "<option value='$type'>$type ($total)</option>";
}
$filterHTML .= "</select>";
return $filterHTML;
}
public function getSubject ($conn) {
$query = $this->conn->prepare("SELECT subject, COUNT(*) as total FROM oer_search GROUP BY subject");
$query->execute();
$filterHTML .= "<h3 class='filterTitle'>Subject</h3>";
$filterHTML .= "<select class='select-css'>";
$filterHTML .= "<option value=''>- Subject -</option>";
while($row = $query->fetch(PDO::FETCH_ASSOC)) {
$subject = $row["subject"];
$total = number_format($row["total"]);
if ($subject != "") {
$filterHTML .= "<option value='$subject'>$subject ($total)</option>";
}
}
$filterHTML .= "</select>";
return $filterHTML;
}
public function getLicense ($conn) {
$query = $this->conn->prepare("SELECT license, COUNT(*) as total FROM oer_search GROUP BY license");
$query->execute();
$filterHTML .= "<h3 class='filterTitle'>License</h3>";
$filterHTML .= "<select class='select-css'>";
$filterHTML .= "<option value=''>- License -</option>";
while($row = $query->fetch(PDO::FETCH_ASSOC)) {
$license = $row["license"];
$total = number_format($row["total"]);
if ($license != "") {
$filterHTML .= "<option value='$license'>$license ($total)</option>";
}
}
$filterHTML .= "</select>";
return $filterHTML;
}
public function getReviewed ($conn) {
$query = $this->conn->prepare("SELECT review, COUNT(*) as total FROM oer_search GROUP BY review");
$query->execute();
$filterHTML .= "<h3 class='filterTitle'>Reviewed</h3>";
$filterHTML .= "<select class='select-css'>";
$filterHTML .= "<option value=''>- Reviewed -</option>";
while($row = $query->fetch(PDO::FETCH_ASSOC)) {
$review = $row["review"];
$total = number_format($row["total"]);
if ($review != "") {
$filterHTML .= "<option value='$review'>$review ($total)</option>";
}
}
$filterHTML .= "</select>";
return $filterHTML;
}
public function getOrigin ($conn) {
$query = $this->conn->prepare("SELECT source, COUNT(*) as total FROM oer_search GROUP BY source");
$query->execute();
$filterHTML .= "<h3 class='filterTitle'>Source</h3>";
$filterHTML .= "<select class='select-css'>";
$filterHTML .= "<option value=''>- Source -</option>";
while($row = $query->fetch(PDO::FETCH_ASSOC)) {
$source = $row["source"];
$total = number_format($row["total"]);
if ($source != "") {
$filterHTML .= "<option value='$source'>$source ($total)</option>";
}
}
$filterHTML .= "</select>";
return $filterHTML;
}
}
?>
这是我在search.php页面上使用的代码。任何帮助将不胜感激。
<?php
include("config.php");
include("classes/siteResultsProvider.php");
include("classes/imageResultsProvider.php");
include("classes/filterContentProvider.php");
include("classes/filterImageProvider.php");
if(isset($_GET["term"])){
$term = $_GET["term"];
}
if(isset($_GET["collection"])){
$collection = $_GET["collection"];
}
else {
$collection = "open_content";
}
$page = isset($_GET["page"]) ? $_GET["page"] : 1;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>SOAR</title>
<?php
include("header.php");
?>
<div class="wrapper">
<div class="header">
<div class="headerContent">
<div class="searchContainer">
<form action="search.php" method="GET">
<div class="searchBarContainer">
<input type="hidden" name="collection" value="<?php echo $collection; ?>">
<input class="searchBox" type="text" name="term" value="<?php echo htmlspecialchars($term, ENT_QUOTES) ?>" aria-label="search box">
<button class="searchButton">
<img src="images/search-icon.png" alt="search icon">
</button>
</div>
</form>
</div>
</div><!--end of headerContent-->
<div class="tabsContainer">
<ul class="tabList">
<li class="<?php echo $collection == 'open_content' ? 'active' : '' ?>">
<a href='<?php echo "search.php?term=$term&collection=open_content"; ?>'><i class="fas fa-book-open"></i> Open Content</a>
</li>
<li class="<?php echo $collection == 'images' ? 'active' : '' ?>">
<a href='<?php echo "search.php?term=$term&collection=images"; ?>'><i class="fas fa-images"></i> Images</a>
</li>
</ul>
</div>
</div><!--end of header-->
<!-------------------------beginning of main section where seach results will display-------------------------->
<?php
if($collection == "open_content") {
$filters = new filterContentProvider($conn);
}
else {
$filters = new filterImageProvider($conn);
}
if($collection == "open_content") {
$filterType = $filters->getType($conn);
$filterSubject = $filters->getSubject($conn);
$filterOrigin = $filters->getOrigin($conn);
$fitlerLicense = $filters->getLicense($conn);
$filterReviewed = $filters->getReviewed($conn);
echo "<div class='filterContainer'>
<div class='filterContent'>
<div class='filter'>
$filterType
</div>
<div class='filter'>
$filterSubject
</div>
<div class='filter'>
$filterOrigin
</div>
<div class='filter'>
$fitlerLicense
</div>
<div class='filter'>
$filterReviewed
</div>
</div>
</div>";
}
else {
$imageFilterOrigin = $filters->getImageOrigin($conn);
$imageFilterLicense = $filters->getImageLicense($conn);
echo "<div class='filterContainer'>
<div class='filterContent'>
<div class='filter'>
$imageFilterOrigin
</div>
<div class='filter'>
$imageFilterLicense
</div>
</div>
</div>";
}
?>
<div class="mainResultsSection">
<?php
if($collection == "open_content") {
$resultsProvider = new siteResultsProvider($conn);
$pageSize = 25;
}
else {
$resultsProvider = new imageResultsProvider($conn);
$pageSize = 50;
}
$numResults = $resultsProvider->getNumResults($term);
echo "<p class='resultsCount'>" . number_format($numResults) . " results found</p>";
echo $resultsProvider->getResultsHTML($page, $pageSize, $term);
?>
</div>
<div class="paginationContainer">
<div class="pageButtons">
<div class="pageNumberContainer">
<img src="images/pageStart.png" alt="Start of page image">
</div>
<?php
$pagesToShow = 10;
$numPages = ceil($numResults / $pageSize);
$pagesLeft = min($pagesToShow, $numPages);
$currentPage = $page - floor($pagesToShow / 2);
if($currentPage < 1) {
$currentPage = 1;
}
if($currentPage + $pagesLeft > $numPages + 1) {
$currentPage = $numPages + 1 - $pagesLeft;
}
while($pagesLeft != 0 && $currentPage <= $numPages) {
if($currentPage == $page) {
echo "<div class='pageNumberContainer'>
<img src='images/pageSelected.png' alt='selected page page image'/>
<span class='pageNumber'>$currentPage</span>
</div>";
}
else {
echo "<div class='pageNumberContainer'>
<a href='search.php?term=$term&collection=$collection&page=$currentPage'>
<img src='images/page.png' alt='pages image'/>
<span class='pageNumber'>$currentPage</span>
</a>
</div>";
}
$currentPage++;
$pagesLeft--;
}
?>
<div class="pageNumberContainer">
<img src="images/pageEnd.png" alt="End of page image">
</div>
</div>
</div><!--end of pagination container-->
</div><!--end of wrapper-->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
似乎您想做一些事情才能使它正常工作。
如果您希望结果是异步的:
onchange="addFilter('type', this.value)"
),请参见https://www.w3schools.com/jsref/event_onchange.aspaddFilter
)通过AJAX请求将过滤器和查询字符串发送回PHP脚本。如果您使用的是jQuery,则get
方法将为您工作。 https://api.jquery.com/jquery.get/$('#myContainer').html(results);
)如果您不在乎/不想重新加载页面:
只需使onchange
事件再次提交带有搜索参数的表单。如果使用jQuery,则submit
方法将起作用。请确保在选择输入中正确选择选项,否则每次都会清除它们(无法设置多个)。