63 |
64 |
65 |
68 |
69 |
--------------------------------------------------------------------------------
/scripts/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IanLunn/AJAX-Search-Suggest--WeAreHunted.com-Style-/29927636a4b6ce9514676c956310f42676548c1d/scripts/.DS_Store
--------------------------------------------------------------------------------
/scripts/ajax-search-suggest.js:
--------------------------------------------------------------------------------
1 | /*
2 | Demo: AJAX Search Suggest (WeAreHunted.com Style)
3 | Version 1.0
4 | Author: Ian Lunn
5 | Author URL: http://www.ianlunn.co.uk/
6 | Demo URL: http://www.ianlunn.co.uk/demos/ajax-search-suggest-wearehunted/
7 | Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/ajax-search-suggest-wearehunted/
8 | GitHub: https://github.com/IanLunn/AJAX-Search-Suggest--WeAreHunted.com-Style-/
9 |
10 | Dual licensed under the MIT and GPL licenses:
11 | http://www.opensource.org/licenses/mit-license.php
12 | http://www.gnu.org/licenses/gpl.html
13 | */
14 |
15 | $(document).ready(function(){ //when the browser has rendered the page...
16 |
17 | //save selectors we'll be using more than once into variables for better performance
18 | var $hiddenSearch = $("#hidden-search"),
19 | $displaySearch = $("#display-search"),
20 | $searchOverlay = $("#search-overlay"),
21 | $artistsList = $("#artists");
22 |
23 | $("#search").click(function(){ //when the search link is clicked...
24 | $searchOverlay.show(); //show the search overlay
25 | $hiddenSearch.focus(); //give the hidden input box focus
26 | });
27 |
28 | $searchOverlay.click(function(event){ //when the search overlay is clicked...
29 | $hiddenSearch.focus(); //give the hidden input box focus
30 | if(event.target.id == "search-overlay" || event.target.id == "close"){ //...only if the user is clicking the empty areas of the overlay (and not child elements)...
31 | $hiddenSearch.blur(); //remove focus from the hidden input
32 | $(this).animate({"opacity": 0}, 500, function(){ //...animate it's opacity to 0...
33 | $(this).hide().css("opacity", 1); //...hide it (so the user can click the elements behind it again) and reset its opacity
34 | });
35 | }
36 | });
37 |
38 | //when the user pushes a key whilst the input box has focus...
39 | $hiddenSearch.keydown(function(e){
40 | currentQuery = $displaySearch.val(); //get the current value of the search input
41 | if(e.keyCode == 8){ //if the user hits backspace...
42 |
43 | latestQuery = currentQuery.substring(0, currentQuery.length - 1); //...remove the last character
44 | $displaySearch.val(latestQuery); //...update the search input box
45 | updateResults(latestQuery); //...update the results
46 |
47 | }else if(e.keyCode == 32 || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 48 && e.keyCode <= 57)){ //if the user hits spacebar (32), characters a - z (65 - 90) or numeric keys(0 - 9)...
48 | latestQuery = currentQuery + String.fromCharCode(e.keyCode); //...add the newly entered key onto the current query
49 | $displaySearch.val(latestQuery); //...update the search input value with the latest query
50 | updateResults(latestQuery); //...update the results
51 | }
52 | });
53 |
54 | function updateResults(latestQuery){
55 | if(latestQuery.length > 0){ //if there is a query to process...
56 | $.post("auto-suggest.php", {latestQuery: latestQuery}, function(data){ //..send that query to the php script "auto-suggest.php" via ajax
57 |
58 | if(data.length > 0){ //if the php script returns a result...
59 | data = $.parseJSON(data); //turn the string from the PHP script into a JavaScript object
60 | $("#artists li").remove(":contains('No results')"); //remove the "No results" text if it's being displayed
61 | $("#results").show(); //show the results container
62 |
63 | previousTerms = new Array(); //set up an array that will hold the terms currently being displayed
64 | $("#artists li").each(function(){ //for each result currently being displayed...
65 | previousTerms.push($(this).text()); //add it to the previousTerms array
66 | });
67 |
68 | keepTerms = new Array();
69 |
70 | for(term in data){ //for each matched term in the returned data...
71 | url = data[term]; //get the url for the matched term;
72 | if($.inArray(term, previousTerms) === -1){ //if this term isn't in the previous list of terms (and isn't already being displayed)...
73 | $artistsList.prepend('
62 | 
64 |
65 |
68 |
69 |
--------------------------------------------------------------------------------
/scripts/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IanLunn/AJAX-Search-Suggest--WeAreHunted.com-Style-/29927636a4b6ce9514676c956310f42676548c1d/scripts/.DS_Store
--------------------------------------------------------------------------------
/scripts/ajax-search-suggest.js:
--------------------------------------------------------------------------------
1 | /*
2 | Demo: AJAX Search Suggest (WeAreHunted.com Style)
3 | Version 1.0
4 | Author: Ian Lunn
5 | Author URL: http://www.ianlunn.co.uk/
6 | Demo URL: http://www.ianlunn.co.uk/demos/ajax-search-suggest-wearehunted/
7 | Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/ajax-search-suggest-wearehunted/
8 | GitHub: https://github.com/IanLunn/AJAX-Search-Suggest--WeAreHunted.com-Style-/
9 |
10 | Dual licensed under the MIT and GPL licenses:
11 | http://www.opensource.org/licenses/mit-license.php
12 | http://www.gnu.org/licenses/gpl.html
13 | */
14 |
15 | $(document).ready(function(){ //when the browser has rendered the page...
16 |
17 | //save selectors we'll be using more than once into variables for better performance
18 | var $hiddenSearch = $("#hidden-search"),
19 | $displaySearch = $("#display-search"),
20 | $searchOverlay = $("#search-overlay"),
21 | $artistsList = $("#artists");
22 |
23 | $("#search").click(function(){ //when the search link is clicked...
24 | $searchOverlay.show(); //show the search overlay
25 | $hiddenSearch.focus(); //give the hidden input box focus
26 | });
27 |
28 | $searchOverlay.click(function(event){ //when the search overlay is clicked...
29 | $hiddenSearch.focus(); //give the hidden input box focus
30 | if(event.target.id == "search-overlay" || event.target.id == "close"){ //...only if the user is clicking the empty areas of the overlay (and not child elements)...
31 | $hiddenSearch.blur(); //remove focus from the hidden input
32 | $(this).animate({"opacity": 0}, 500, function(){ //...animate it's opacity to 0...
33 | $(this).hide().css("opacity", 1); //...hide it (so the user can click the elements behind it again) and reset its opacity
34 | });
35 | }
36 | });
37 |
38 | //when the user pushes a key whilst the input box has focus...
39 | $hiddenSearch.keydown(function(e){
40 | currentQuery = $displaySearch.val(); //get the current value of the search input
41 | if(e.keyCode == 8){ //if the user hits backspace...
42 |
43 | latestQuery = currentQuery.substring(0, currentQuery.length - 1); //...remove the last character
44 | $displaySearch.val(latestQuery); //...update the search input box
45 | updateResults(latestQuery); //...update the results
46 |
47 | }else if(e.keyCode == 32 || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 48 && e.keyCode <= 57)){ //if the user hits spacebar (32), characters a - z (65 - 90) or numeric keys(0 - 9)...
48 | latestQuery = currentQuery + String.fromCharCode(e.keyCode); //...add the newly entered key onto the current query
49 | $displaySearch.val(latestQuery); //...update the search input value with the latest query
50 | updateResults(latestQuery); //...update the results
51 | }
52 | });
53 |
54 | function updateResults(latestQuery){
55 | if(latestQuery.length > 0){ //if there is a query to process...
56 | $.post("auto-suggest.php", {latestQuery: latestQuery}, function(data){ //..send that query to the php script "auto-suggest.php" via ajax
57 |
58 | if(data.length > 0){ //if the php script returns a result...
59 | data = $.parseJSON(data); //turn the string from the PHP script into a JavaScript object
60 | $("#artists li").remove(":contains('No results')"); //remove the "No results" text if it's being displayed
61 | $("#results").show(); //show the results container
62 |
63 | previousTerms = new Array(); //set up an array that will hold the terms currently being displayed
64 | $("#artists li").each(function(){ //for each result currently being displayed...
65 | previousTerms.push($(this).text()); //add it to the previousTerms array
66 | });
67 |
68 | keepTerms = new Array();
69 |
70 | for(term in data){ //for each matched term in the returned data...
71 | url = data[term]; //get the url for the matched term;
72 | if($.inArray(term, previousTerms) === -1){ //if this term isn't in the previous list of terms (and isn't already being displayed)...
73 | $artistsList.prepend('