Creating A Searchable Text Field With Javascript

I’m continuing to whittle away at the little issues on Gamecycler, my hand coded PHP project centered around people trading video games with each other, and one of my most recent issues I’ve come across is simplifying the registration process. Particularly while selecting games.

This is an example of a game listing, which also happens to be from the game Deadpool:

game

There’s 5 total elements in the listing. One is the entire container <div>, the image, the title, the console, and the year (all of which are also in their own <div>s).

The four pieces of information are all drawn from a MySQL database using PHP.

The question is how to search the title among thousands of games. After doing a bit of Googling, I came across an incredibly handy series of Javascript and JQuery code that made the solution relatively easy.

First, was creating a text box that will be the input area for the search terms:


<form name="searchBox">
Keyword(s): <input type="text" name="keyword" onkeyup="searchFunction()" /></form>

There’s one thing to note here, and that’s the “onkeyup”, which signifies that every time there is a keystroke, it will run the function. Which creates the effect of parsing down search queries each time a letter is typed.

Next is to add the basic search function:


function searchFunction() {
$(".searchable")
.hide()
.filter(":contains('" + $("input[name='keyword']").val() + "')")
.show();
}

** Note: make sure to put this code between <script></script> tags.

1. At the beginning of the function, there’s a signifier for “.searchable”, which refers to any place that there is a class of searchable. So add the searchable class to the
<div>, <p>, <tr> or whatever tag that you want to be searchable. For Gamecycler, I added it to the main <div> that contains the game listing.

2. In the 4th line, where it says input[name=’keyword’], make sure that matches the input field.

For a lot of circumstances, this will be enough to get the results you want, but there’s a couple of changes that need to be made to get the best results out of the function.

The first thing I noticed was that after typing the search code if I pressed enter then it would submit the form and refresh the page with an extension ?keyword=, so as a $_GET method submission.

That means having to disable the enter key submitting the form. Again, after a relatively quick Google search, I came up with this handy line of code:


$(document).on("keypress", "form", function(event) {
return event.keyCode != 13;
});

Of course, there was one last little caveat that needed to be handled, and that had to deal with the case-sensitivity of the search.

Javascript has two built in case functions, upper case and lower case. Unfortunately the function needs to search the game titles that are in Title Case. Again, a quick jump to Google:


String.prototype.toTitleCase = function()
{
return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}

All together the function looks something like this:


<script type="text/javascript">
String.prototype.toTitleCase = function()
{
return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}

function searchFunction() {
$(".searchable")
.hide()
.filter(":contains('" + $("input[name='keyword']").val().toTitleCase() + "')")
.show();
}

$(document).on("keypress", "form", function(event) {
return event.keyCode != 13;
});
</script>

And that should do it! I’d be curious if this works for anyone else. I’m not quite the Javascript developer yet, but it’s good to find code that’s easy to understand.