|
| 1 | +/** |
| 2 | + * PEP Capping 2017 Algozzine's Class |
| 3 | + * |
| 4 | + * Live search js function that allows users to search while typing and view results on their current page |
| 5 | + * |
| 6 | + * Ussage: When there exists a page where a user has the ability to seach/query a database, this class will |
| 7 | + * take in user specified input and query the database with each keystroke. The results are sent back to the |
| 8 | + * origin page (where the user is), and displayed in a parent/child based view. |
| 9 | + * |
| 10 | + * @author Vallie Joseph |
| 11 | + * @copyright 2017 Marist College |
| 12 | + * @since 0.1.2 |
| 13 | + * @version 0.1.2 |
| 14 | + * |
| 15 | + * @param input - form input given by the user |
| 16 | + * @param results - the main section in which results will be displayed, must of parent/child structure |
| 17 | + * i.e Unordered Lists, Ordered Lists, or Tables |
| 18 | + * @param urlResult - where the ajax url will point to- see AJAX url documentation |
| 19 | + * @param formMethod - method in which ajax will submit the form - see AJAX type documentation |
| 20 | + * @param typeData - type that ajax will return your data in, options are text, html, and json |
| 21 | + * @param resultFilter - this is how you will extract the specific desired elements from your results, for example, |
| 22 | + * If the user types 'John Doe' into the form input field, AJAX will return the information it recieves from a succesful submission. |
| 23 | + * If the submission is succesful, the returned information may be html (based on developer specifications in typeData) |
| 24 | + * If we return html, we may only be interested in the list elements of the results- this is the place to specify that |
| 25 | + * @setInputListener = constructor |
| 26 | + */ |
| 27 | + |
| 28 | +//init vars |
| 29 | +var input; |
| 30 | +var results; |
| 31 | +var indiResults; |
| 32 | +var urlResult; |
| 33 | +var formMethod; |
| 34 | +var typeData; |
| 35 | +var resultFilter; |
| 36 | + |
| 37 | +//set values to vars, this is done wherever the livesearch is called |
| 38 | +function setInputListener(inputField , resultField, resultHolder, uUrl, method, typeD){ |
| 39 | + |
| 40 | + input = inputField; |
| 41 | + results = resultField; |
| 42 | + indiResults = resultHolder; |
| 43 | + urlResult = uUrl + '/'; |
| 44 | + typeData = typeD; |
| 45 | + return this; |
| 46 | +} |
| 47 | + |
| 48 | +//set the method type for ajax submission |
| 49 | +function setMethod(method){ |
| 50 | + var regex= /(GET|PUT)/g; |
| 51 | + var methods = method.match(regex); |
| 52 | + if(methods != null){ |
| 53 | + return this; |
| 54 | + } |
| 55 | + console.log("The method was not set correctly"); |
| 56 | + return false; |
| 57 | +} |
| 58 | + |
| 59 | +//setting the filter / find for returning only desired result html |
| 60 | +function setResultFilter(filter){ |
| 61 | + resultFilter = filter; |
| 62 | + return this; |
| 63 | +} |
| 64 | + |
| 65 | +//actual jquery live search fn, takes in the form where live search is being performed |
| 66 | +(function( $form ){ |
| 67 | + $.fn.liveSearch = function() { |
| 68 | + //giving the form it's own var for simplicity sake, later functions redefine the 'this' method |
| 69 | + var uForm = $(this); |
| 70 | + |
| 71 | + //taking cleaning user supplied input - no extra spaces or , will be queried |
| 72 | + function filterResults(raw){ |
| 73 | + return raw.replace(/\s+/g,' ').trim().replace(',','');; |
| 74 | + } |
| 75 | + //set the form input element text to cleaned text, nice and tidy |
| 76 | + uForm.find(":text").val(filterResults(uForm.find(":text").first().val())); |
| 77 | + var userInput= uForm.find(":text").val(); |
| 78 | + |
| 79 | + //ajax - asynchronously requesting resutls from our result page |
| 80 | + $.ajax({ |
| 81 | + type: formMethod, |
| 82 | + url: urlResult+userInput, |
| 83 | + dataType: typeData, |
| 84 | + data: uForm.serialize(), |
| 85 | + success:function(data){ |
| 86 | + //clear the search result display each time we look up new results - otherwise duplicates show |
| 87 | + results.empty(); |
| 88 | + var userResults = $(data).find(resultFilter); |
| 89 | + |
| 90 | + //jquery for each short hand, populating result list with well...results |
| 91 | + $(userResults).each(function(){ |
| 92 | + //creates new children for dev specified parent |
| 93 | + $(results).append($(indiResults).addClass('search-result').html($(this).text())); |
| 94 | + |
| 95 | + }); |
| 96 | + //whenever a result is clicked, complete the search to direct the user to the results page |
| 97 | + //this should work with any child of the desired element (Ex: rows in a table, list elemetns in a list) |
| 98 | + $(results).children().each(function() { |
| 99 | + $(this).click(function(){ |
| 100 | + //first make sure the user input is updated |
| 101 | + input.val(filterResults($(this).text())); |
| 102 | + //submit that form! |
| 103 | + uForm.submit(); |
| 104 | + }); |
| 105 | + |
| 106 | + $(this).keypress(function(e) { |
| 107 | + if (e.key === 'Enter' || e.key === 'Space') { |
| 108 | + $(this).click(); |
| 109 | + } |
| 110 | + }); |
| 111 | + }); |
| 112 | + } |
| 113 | + }); |
| 114 | + return this; |
| 115 | + }; |
| 116 | +})( jQuery ); |
0 commit comments