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 |
Fetching book covers with the Google Books API | 8,769 Kb |
Google Maps API Ground Overlay | 2,961 Kb |
Homepage thumbnail | 1,852 Kb |
Nested flexbox layout for library catalog v2 | 3,409 Kb |
Test Case for ajax fail on single result | 3,297 Kb |
Google Maps API Custom Overlay | 3,336 Kb |
Scratchpad | 5,672 Kb |
Test form validation with validate.js | 3,293 Kb |
Flexbox horozontal scrolling booklist | 5,605 Kb |
Google Analytics Event Tracking using html5 data attributes | 2,560 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 |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Headroom.js demo | WickyNilliams | 3,982 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Page Transitions in Backbone | Mikefowler | 3,691 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Simple checkbox style | Vncnz | 2,628 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!