From 94c28436f2484d3fa40534c7d140f177e421f03e Mon Sep 17 00:00:00 2001
From: TheJoeCoder <joe@radialbog9.uk>
Date: Mon, 21 Apr 2025 20:03:35 +0100
Subject: [PATCH] Improve search box functionality
---
librarian/templates/librarian/base.html | 51 ++++++++++++++-----------
1 file changed, 29 insertions(+), 22 deletions(-)
diff --git a/librarian/templates/librarian/base.html b/librarian/templates/librarian/base.html
index 86a34ee..cdc7569 100644
--- a/librarian/templates/librarian/base.html
+++ b/librarian/templates/librarian/base.html
@@ -20,19 +20,24 @@
<i class="bi bi-upc"></i>
</a>
</div>
- <div class="d-flex px-2" role="search">
- <select id="search-type" class="form-select me-2" aria-label="Search Type">
- <option value="all" selected>Everything</option>
- <option value="jump_copy">Quick Copy</option>
- <option value="jump_patron">Quick Patron</option>
- </select>
- <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" id="search-q">
- <button class="btn btn-outline-success" id="search-submit">Search</button>
+ <div class="d-flex px-3" role="search">
+ <div class="input-group me-2">
+ <input class="form-control" type="search" placeholder="Search" aria-label="Search Query" id="search-q">
+
+ <button class="form-control btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" style="flex-grow: 0.1"></button>
+ <ul class="dropdown-menu dropdown-menu-end">
+ <li><a class="dropdown-item" href="#" onclick="setSearchType('all')">Search Everything</a></li>
+ <li><a class="dropdown-item" href="#" onclick="setSearchType('jump_copy')">Jump to Copy</a></li>
+ <li><a class="dropdown-item" href="#" onclick="setSearchType('jump_patron')">Jump to Patron</a></li>
+ </ul>
+
+
+ <button class="btn btn-outline-success" id="search-submit" type="submit" aria-label="Search Submit">Search</button>
+ </div>
</div>
<form id="form-search-everything" action="{% url 'librarian:search_all' %}">
- <input type="hidden" name="search-type" id="search-type-hidden">
- <input type="hidden" name="search-q" id="search-q-hidden">
+ <input type="hidden" name="q" id="search-q-hidden">
</form>
{% endblock %}
@@ -48,6 +53,7 @@
<script>
// Search Box JS
+ let searchType = 'all';
function updatePlaceholder(selectedType) {
let placeholderText;
@@ -77,21 +83,23 @@
return searchType ? searchType : 'all';
}
- $("#search-type").on("change", function() {
- const selectedType = $(this).val();
+ function setSearchType(selectedType) {
+ searchType = selectedType;
localStorage.setItem('searchType', selectedType);
// Update the search placeholder based on the selected type
updatePlaceholder(selectedType);
- });
+ }
$("#search-submit").on("click", function() {
- const searchType = $("#search-type").val();
- const searchQuery = $("#search-q").val();
+ const searchQuery = $("#search-q").val().trim();
+ if (searchQuery === "") {
+ alert("Please enter a search query.");
+ return;
+ }
if (searchType === 'all') {
// Set the hidden inputs in the form
- $("#search-type-hidden").val(searchType);
$("#search-q-hidden").val(searchQuery);
// Submit the form
@@ -99,8 +107,7 @@
} else if (searchType === 'jump_copy') {
// Perform an AJAX request to get the copy details
- const assnNo = searchQuery.trim();
- $.ajax(`{% url "api:copy-by-assn" %}${assnNo}/`, {
+ $.ajax(`{% url "api:copy-by-assn" %}${searchQuery}/`, {
dataType: "json",
success: (data) => {
window.location.href = `{% url "librarian:copy_detail" %}${data.id}?quick`;
@@ -112,8 +119,7 @@
});
} else if (searchType === 'jump_patron') {
- const bcid = searchQuery.trim();
- $.ajax(`{% url "api:user-by-cardno" %}${bcid}/`, {
+ $.ajax(`{% url "api:user-by-cardno" %}${searchQuery}/`, {
dataType: "json",
success: (data) => {
window.location.href = `{% url "librarian:user_detail" %}${data.id}?quick`;
@@ -135,17 +141,18 @@
$(document).ready(function() {
// Get search type currently in local storage
- let searchType = getSearchType();
+ searchType = getSearchType();
// Set the selected option in the dropdown
$('#search-type').val(searchType);
updatePlaceholder(searchType);
+ // Focus on the search input if the URL has a "quick" parameter
+ // i.e. we've come from a quick action
const urlParams = new URLSearchParams(window.location.search);
if(urlParams.has("quick")) {
$("#search-q").focus();
}
-
});
</script>
--
GitLab