Creating an Ajax Search Engine

When we first got given this assessment I was really excited that there was going to be a search engine in it as I have always wanted to know how to create one that functions instead of just a placeholder image on the screen.

As always I had no idea how to actually create a search engine only that there were two main types and Ajax and a PHP based search engine. An Ajax system uses a form and jQuery as a result allows for data to appear without having the refresh the page.

First off I googled Ajax search engine and found an article that, while helpful was not exactly what I was looking for. It discussed how to make your website ‘search friendly’ by:

• adding relevant keywords and alt tags to images
• removing hidden text
• eliminating apparent content duplication
• using straight HTML navigation links on your website

Going onto youtube I found many videos that created ajax search systems. All of them used the same format:

$.ajax({
type:”POST”,
url:””,
data:{
function:function,
target:traget
},
dataType:”,
success:function(res) {
// LOOP THROUGH THE DATA IN THE DATABASE IF SOMEONE SEARCHES SOMETHING
}
});

However, none of them seemed to work for me when I tried to replicate them. Finally, I came across another video tutorial that went through the same process above but for some reason worked when I copied it. At this point, I was able to search specific keywords from a separate document  which I placed in the url:””, part of the function. Now came the challenge of linking what the function to the assessment’s databse.

This proved not as difficult as I thought it would be as all I had to do was change the url and tell the ajax which the spesific funciton it was searching for on the file. That wasn’t the end of it though I had to make sure that I saved the values of what the user searched as a variable everytime they pressed a key so that it would search while the user was typing a word into the search bar. Now this might seem simple but at the time I was havig trouble saving the variables to the overlord the SELECT query was not ‘perfect’ and therefore nothign worked. After some brianstorming the SELECT query was altered and the search engine functioned all was needed was to filter it by campus.

Filtering campuses

In order to filter the search results by new fuction had to be added to the overlord file so that the resuslts would only show if the value of the campus was selected unless it would show all campuses. Once this was created all I had to do was add another post value to the data:{} function and created a drop down menu with all campuses that were going to use the webite. Now this wasn’t where the prolems started saving teh values of the drop down menu to match the values in the database in order for the search to function was pretty straight forward. Making the funciton work was a different story. For some reason none of the data from the database was being passed to the search page. After much brainstorming and  consoleloging it was discovered that the php had to be converted to the JSON file inorder to be read by the Ajax. Once this was done the search function worked smoothly the users were able to search a flim name and look up keyword and the film’s synopsis while displaying the cover image of the said film.

By the end the code looked like this:

// SEARCH ENGINE FUNCTION
function search() {
console.log(‘Keypress!’);
var search = $(‘#search’).val();
var campus_selection = $(‘#campus_selection’).val();
console.log(campus_selection);
if (search != ”) {
$.ajax({
type:”POST”,
url:”overlord.php”,
data:{
function:’search_project’,
target:search,
campus:campus_selection
},
dataType:’json’,
success:function(res) {
// LOOP THROUGH THE DATA IN THE DATABASE IF SOMEONE SEARCHES SOMETHING
$(‘#searchList’).html(”);
var count = 0;
$.each(res, function(index,value) {
if(value[‘id’] != null){
console.log(value);
$(‘#searchList’).append(“

</a><a href=’displayfilm.php?id=”+value[‘id’]+”‘><p class=’film_title_search text_width’>”+value[‘title’]+”</p></a><p class=’max_length text_width’>”+value[‘synopsis’]+”</p>”);
// WHEN THE CONENT IS NOT IN THE DATABASE
count++;
}
});
$(‘#searchList’).append( “

“);
if (count < 1){
$(‘#searchList’).html(”);
$(‘#searchList’).append(“<p class=’empty_search’>Sorry there are no results</p>”);
}

}
});
} else {
$(‘#searchList’).html(”);
}
}

$(document).ready(function(){

<?php if (isset($_POST[‘search’])) { ?>
search();
<?php }?>

$(document).on(‘change keyup’, ‘#search, #campus_selection’, function() {
search();
});

});

I have to say I am very happy with how this turned out and I learnt alot from it I look forwrad to using this knoweldge in future projects.