Sutherland Shire Libraries Catalogue Search

Developer
Size
2,732 Kb
Views
14,168

How do I make an sutherland shire libraries catalogue search?

A catalogue search box that uses javascript to fetch the catalogue search results, rather than an html form. What is a sutherland shire libraries catalogue search? How do you make a sutherland shire libraries catalogue search? This script and codes were developed by Martin Boyce on 20 September 2022, Tuesday.

Sutherland Shire Libraries Catalogue Search Previews

Sutherland Shire Libraries Catalogue Search - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sutherland Shire Libraries Catalogue Search</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="cat-container"> <label for="catalog-search">Search our collection</label> <div class="input-group"> <input id="catalog-search" class="sprite" type="text" name="catalogue-search-textbox" placeholder="search catalogue"> <button id="catalog-search-btn">Search</button> </div><!-- /input-group -->
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sutherland Shire Libraries Catalogue Search - Script Codes CSS Codes

input { width: 250px; padding: 0.4em 1em;
}
button { padding: 0.4em 0.6em;
}

Sutherland Shire Libraries Catalogue Search - Script Codes JS Codes

// the searchCatalogue function (line 7 to 12) generates the url and loads it into the current window
// it is waiting to be invoked when someone clicks on the search button or presses enter
// line 8: set a variable for the bit of the encore url that doesn't change from search to search
// line 9: find the element with the id of catalog-search-textbox and get it's current value
// line 10: create the full search url by concatenating the base url with the search terms
// line 11: load the destination url into the current window
function searchCatalogue() { var baseUrl = "http://gcccl-encore.iii.com/iii/encore/search/C__S"; var searchTerm = $('#catalog-search').val(); var destination = baseUrl + searchTerm; window.location.href = destination;
}
// the document.ready function (lines 27 to 41) listens for the click on the search button or an enter press
// lines 29 to 32 relate to the click on the search button
// lines 34 to 39 relate to pressing the enter key
// line 29: find the element with the id of catalog-search-btn and listen for a click, when a click happens...
// line 30: prevents the default behaviour of clicking on the button. in this case it stops the built in submit
// line 21: run the searchCatalogue function
// line 34: find the element with an id of catalog-search-textbox and listen for each key press
// line 35: after every key press check if the key is 13, ie. the enter key. If it is, run the next 2 lines
// line 36: same as before; overrides any default behaviour
// line 37: same as above; run the searchCatalogue function
$(document).ready(function() { $('#catalog-search-btn').on('click', function(event) { event.preventDefault(); searchCatalogue(); }); $('#catalog-search').keydown(function(event){ if (event.which == 13) { event.preventDefault(); searchCatalogue(); } });
});
Sutherland Shire Libraries Catalogue Search - Script Codes
Sutherland Shire Libraries Catalogue Search - Script Codes
Home Page Home
Developer Martin Boyce
Username boycetrus
Uploaded September 20, 2022
Rating 3
Size 2,732 Kb
Views 14,168
Do you need developer help for Sutherland Shire Libraries Catalogue Search?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Martin Boyce (boycetrus) Script Codes
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!