Alright, I’m not the greatest PHP artist, but here’s my favorite ChurchInfo improvement. Those who are better at coding, please feel free to comment on security and style.
I don’t have a problem with the default search, but in the name of saving time, I used jQuery UI (Already with this latest version of churchinfo!) to add an autocomplete to the searchbox as you type. Here’s how:
1. Create a thepark.js (or name it something else) file for your jquery commands (I put mine in database/jquery).
2. Load this content into that file. This will send a request to a little helper script we’ll do next every time someone types something in the searchbox:
$(“document”).ready(function(){
$(“#SearchText”).autocomplete({
source: “jquery/JSONSearch.php”,
minLength: 2,
select: function(event, ui) {
var location = ‘PersonView.php?PersonID=’+ui.item.id;
window.location.replace(location);
$(‘#add_per_ID’).val(ui.item.id);
}
});
});
3. Create the helper script file. I called it JSONSearch.php and saved it in my jquery folder. You can put it elsewhere. Adjust paths accordingly.
4. Load this content:
<?
//this page written by Stead Halstead on 8/5/10
require “../Include/Config.php”;
require “../Include/Functions.php”;
//security included, because we aren’t running the normal
if (!isset($_SESSION[‘iUserID’]))
{
Redirect(“Default.php”);
exit;
}
$search = addslashes($_REQUEST[‘term’]);
$fetch = ‘SELECT per_ID, per_FirstName, per_LastName, CONCAT_WS(” “,per_FirstName,per_LastName) AS fullname, per_fam_ID FROM `person_per` WHERE per_FirstName LIKE \’%’.$search.’%\’ OR per_LastName LIKE \’%’.$search.’%\’ OR CONCAT_WS(” “,per_FirstName,per_LastName) LIKE \’%’.$search.’%\’ LIMIT 15′;
//echo $fetch;
$result=mysql_query($fetch);
$return_arr = array();
while($row=mysql_fetch_array($result)) {
$stuff[‘id’]=$row[‘per_ID’];
$stuff[‘famID’]=$row[‘per_fam_ID’];
$stuff[‘per_FirstName’]=$row[‘per_FirstName’];
$stuff[‘per_LastName’]=$row[‘per_LastName’];
$stuff[‘value’]=$row[‘per_FirstName’].” “.$row[‘per_LastName’];
array_push($return_arr,$stuff);
}
//echo “<h1>$search</h1>”;
echo json_encode($return_arr);
?>
5. Link it! Edit header-function.php and around line 211, add:
<script type=”text/javascript” src=”<?php echo $sURLPath.”/”; ?>jquery/thepark.js”></script>
6. Save everything. If all went well, you can type a few characters into the search box and get a list of guesses! Click on one, and it goes directly to their person listing.
Yes the JS is linked…I did as you said and the path is there in the source and I can copy and paste it and it opens the JS.
Also viewed the HTML of the search and the search box is named Filter…I even changed it to be FilterTest just so it’s something different…
I even put the complete path source field of the js ie http://127.0.0.1….and no spelling mistake there…
Is the ID of that search box also filter? The ID for the search box will need to match the ID in the jQuery $(“searchboxid”) spot.
Also, what version of church info are you running? I’m not sure when jQuery and jQuery ui we’re added, but those are needed. They’re in the latest version for sure.
Lastly, I recommend installing the web developer toolbar for Firefox, and firebug. You can use firebug to see if the page is even sending a request to the json search page. With the developer toolbar, (or actually, just the browser), view your JavaScript errors. From there, you should be able to clear the error log, then refresh your church info page. That may reveal the issue.
Thanks!
Using Version 1.2.13…is there a newer one?
I have a simple autocomplete working now…
Loaded up some data:
var data = [
{“label” : “Aragorn”},
{“label” : “Arwen”},
{“label” : “Bilbo Baggins”},
{“label” : “Boromir”},
{“label” : “Frodo Baggins”},
{“label” : “Gandalf”},
{“label” : “Gimli”},
{“label” : “Gollum”},
{“label” : “Legolas”},
{“label” : “Meriadoc Merry Brandybuck”},
{“label” : “Peregrin Pippin Took”},
{“label” : “Samwise Gamgee”}
];
Then in my js:
$(function() {
$(“#searchtest2”).autocomplete({
source:data
})
});
but when I change the source:data to source:test.php which resides in the same folder as the JS nothing….
Ok figured it out…wasn’t getting to the PHP page…thought it was a path relative to the js page but it wasn’t it was looking for it at the root of the domain.
I did have to add these lines to get the jquery stuff working:
had to add these lines to approx line 220 in the header-function
<link rel="stylesheet" type="text/css" href="Include/jquery/jquery-ui-1.8.18.custom.css”>
<script type="text/javascript" src="Include/jquery/jquery-1.7.1.min.js”>
<script type="text/javascript" src="Include/jquery/jquery-ui-1.8.18.custom.min.js”>
now we are all good!
Thanks!
Thanks for posting your solution! That’s interesting you had to link those files, but glad it worked!
Tried to make this work but it’s not doing anything…
If I run the PHP page by itself and edit the $search = “da” it will run the SQL query and get me the result.
When I use the search button in the website it doesn’t do anything? seems like somethings wrong with the js file…
any ideas what would be wrong? the test.php is in the same folder as the js file. And these files are in the \include\jquery folder
$(“document”).ready(function(){
$(“#Filter”).autocomplete({
source: “test.php”,
minLength: 2,
select: function(event, ui) {
var location = ‘PersonView.php?PersonID=’+ui.item.id;
window.location.replace(location);
$(‘#add_per_ID’).val(ui.item.id);
}
});
});
I can think of two things off the top of my head. Is the JavaScript file that you have the above code in linked? I usually view page source to see, and then even copy the path back into the browser for that file. If it doesn’t work, I’ve made a spelling error.
Next, the start of that jQuery block says #Filter. If the ID of your search box isn’t exactly that, the search won’t activate. I don’t think I renamed my search box! but I may have along the way. You can also view the page HTML for this (the output HTML, not the PHP).
Let me know if either of those don’t work for you!