Sutherland Shire Libraries Catalogue Search
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 - 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(); } });
});
Developer | Martin Boyce |
Username | boycetrus |
Uploaded | September 20, 2022 |
Rating | 3 |
Size | 2,732 Kb |
Views | 14,168 |
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!
Name | Size |
Scratchpad | 5,672 Kb |
Booklist Using Google Spreadsheets as JSON Source and Handlebars for templating | 3,063 Kb |
Nested flexbox layout for library catalog | 3,271 Kb |
Flexbox horozontal scrolling booklist | 5,605 Kb |
Sutherland Shire Libraries Catalogue Search | 2,732 Kb |
Google Analytics Event Tracking using html5 data attributes | 2,560 Kb |
Fetching book covers with the Google Books API | 8,769 Kb |
AJAX content from an RSS feed using jQuery | 3,878 Kb |
Google Maps API Custom Overlay | 3,336 Kb |
Test Case for ajax fail on single result | 3,297 Kb |
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!
Name | Username | Size |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Canvas Background Effect | Sonick | 3,513 Kb |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Table border-collapse property | Maxds | 1,672 Kb |
A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
Flexbox slider | Rendro | 3,459 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!