Skip to content
Snippets Groups Projects
Verified Commit 94c28436 authored by TheJoeCoder's avatar TheJoeCoder
Browse files

Improve search box functionality

parent f8e3e3c3
Branches master
No related tags found
No related merge requests found
Pipeline #320 passed
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment