Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live Search #47

Merged
merged 1 commit into from
Oct 16, 2017
+162 −19
Merged

Live Search #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions public/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -505,4 +505,12 @@ label[for=password] {
.thin-title{
font-weight:300;
font-size: 1.5rem;
}

/* Results for Live Search */
.search-result:focus,
.search-result:hover {
cursor:pointer!important;
background-color:#5C629C;
color:white;
}
1 change: 1 addition & 0 deletions public/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
<script type="text/javascript" src="/js/search.js"></script>
<script type="text/javascript" src="/js/livesearch.js"></script>
</head>
<body>
<div class="non-menu-content d-flex flex-column
Expand Down
116 changes: 116 additions & 0 deletions public/js/livesearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
/**
* PEP Capping 2017 Algozzine's Class
*
* Live search js function that allows users to search while typing and view results on their current page
*
* Ussage: When there exists a page where a user has the ability to seach/query a database, this class will
* take in user specified input and query the database with each keystroke. The results are sent back to the
* origin page (where the user is), and displayed in a parent/child based view.
*
* @author Vallie Joseph
* @copyright 2017 Marist College
* @since 0.1.2
* @version 0.1.2
*
* @param input - form input given by the user
* @param results - the main section in which results will be displayed, must of parent/child structure
* i.e Unordered Lists, Ordered Lists, or Tables
* @param urlResult - where the ajax url will point to- see AJAX url documentation
* @param formMethod - method in which ajax will submit the form - see AJAX type documentation
* @param typeData - type that ajax will return your data in, options are text, html, and json
* @param resultFilter - this is how you will extract the specific desired elements from your results, for example,
* If the user types 'John Doe' into the form input field, AJAX will return the information it recieves from a succesful submission.
* If the submission is succesful, the returned information may be html (based on developer specifications in typeData)
* If we return html, we may only be interested in the list elements of the results- this is the place to specify that
* @setInputListener = constructor
*/

//init vars
var input;
var results;
var indiResults;
var urlResult;
var formMethod;
var typeData;
var resultFilter;

//set values to vars, this is done wherever the livesearch is called
function setInputListener(inputField , resultField, resultHolder, uUrl, method, typeD){

input = inputField;
results = resultField;
indiResults = resultHolder;
urlResult = uUrl + '/';
typeData = typeD;
return this;
}

//set the method type for ajax submission
function setMethod(method){
var regex= /(GET|PUT)/g;
var methods = method.match(regex);
if(methods != null){
return this;
}
console.log("The method was not set correctly");
return false;
}

//setting the filter / find for returning only desired result html
function setResultFilter(filter){
resultFilter = filter;
return this;
}

//actual jquery live search fn, takes in the form where live search is being performed
(function( $form ){
$.fn.liveSearch = function() {
//giving the form it's own var for simplicity sake, later functions redefine the 'this' method
var uForm = $(this);

//taking cleaning user supplied input - no extra spaces or , will be queried
function filterResults(raw){
return raw.replace(/\s+/g,' ').trim().replace(',','');;
}
//set the form input element text to cleaned text, nice and tidy
uForm.find(":text").val(filterResults(uForm.find(":text").first().val()));
var userInput= uForm.find(":text").val();

//ajax - asynchronously requesting resutls from our result page
$.ajax({
type: formMethod,
url: urlResult+userInput,
dataType: typeData,
data: uForm.serialize(),
success:function(data){
//clear the search result display each time we look up new results - otherwise duplicates show
results.empty();
var userResults = $(data).find(resultFilter);

//jquery for each short hand, populating result list with well...results
$(userResults).each(function(){
//creates new children for dev specified parent
$(results).append($(indiResults).addClass('search-result').html($(this).text()));

});
//whenever a result is clicked, complete the search to direct the user to the results page
//this should work with any child of the desired element (Ex: rows in a table, list elemetns in a list)
$(results).children().each(function() {
$(this).click(function(){
//first make sure the user input is updated
input.val(filterResults($(this).text()));
//submit that form!
uForm.submit();
});

$(this).keypress(function(e) {
if (e.key === 'Enter' || e.key === 'Space') {
$(this).click();
}
});
});
}
});
return this;
};
})( jQuery );
17 changes: 0 additions & 17 deletions shared/LiveSearch.php
View file
Open in desktop

This file was deleted.

39 changes: 37 additions & 2 deletions views/agency-requests/agency_requests.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,18 @@
<?php
/**
* PEP Capping 2017 Algozzine's Class
*
* Allows a user to search for participants in the database.
*
* The main purpose of this page is to allow users a quick way to
* access participant information (specifically agency requests). The
* page uses a live search that
*
* @author Vallie Joseph
* @copyright 2017 Marist College
* @since 0.1.2
* @version 0.1.2
*/
authorizedPage();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
Expand All @@ -16,13 +30,34 @@
<br />
<form class="search-agency" method="POST" action="/agency-requests">
<div class="form-group">
<input type="text" class="form-control" name="searchquery" placeholder="Begin typing participant's name...">
<input type="text" class="form-control user-search" name="searchquery" placeholder="Begin typing participant's name...">
<ul class='list-group'></ul>
</div>
<button type="submit" class="btn cpca form-control">Submit</button>
<button type="submit" class="btn cpca form-control submit-search">Submit</button>
</form>
</div>
</div>

<script>
//Disables the default browser autocomplete
$( ".search-agency" ).attr( "autocomplete", "off" );

//construct live search, needs the user input field, where search results will go,
//desired class name of search result elements, url for where ajax is sending the request, and
//type of data ajax is returning
setInputListener($(".user-search"),$(".list-group"),"<li class='list-group-item suggestion' tabindex='0'></li>", "/participant-search", "html");

//Set the ajax submit method to either put or get, will default to GET if left blank
setMethod("PUT");

//set what class you're lookin for in the search results
setResultFilter('.list-group-item span');

//search dynamically with every user input
$(".user-search").keyup(function(){
$('.search-agency').liveSearch();
});
</script>

<?php
include('footer.php');
Expand Down