Month: April 2010

This is my first jQuery guide specifically for newbies who either don’t have much experience with jQuery or just need to see an example to understand it. The more examples you read, the better off you are at developing your own stuff.

For those of you hoping to see jQuery UI 1.8’s autocomplete, sorry to disappoint you. I tried to use their new autocomplete built in feature, but was unsuccessful using their new plugin. The autocomplete plugin I will be using was created by Jörn Zaefferer and can be found here.  Even though he has several examples, I still couldn’t figure out how to achieve the autocomplete I was looking for.  My guide also has techniques borrowed from 1300 grams.  My goal is that this guide will be newbie friendly so just about anyone can pick it up from here.

For this example we will be using similar code from FantasySP to search for baseball players. (If you haven’t heard of FantasySP, its a fantasy sports news aggregator that collects player updates from dozens of sites to give you an edge when managing your fantasy team.) When typing a name we want to see what team he plays for and his position:

Let’s take a look at the input box that is used to achieve the autocomplete:

MLB Player Search

Nothing too complex going on here.  The autocomplete=”off” is to make sure the web browser’s autocomplete is disabled.  Now onto the jQuery function. (Unfortunately syntax highlighting won’t be used because it screws with the code. No idea why.)


$(document).ready(function() {

$('#player').autocomplete("/tutorials/autocomplete/auto_complete.php", {
dataType: 'json',
parse: function(data) {
var rows = new Array();
for(var i=0; i
rows[i] = { data:data[i], value:data[i].pos, value:data[i].team, result:data[i].value };
}
return rows;
},
formatItem: function(row, i, n) {
return row.value + ' ' + row.pos + ' ' + row.team +' ';
},
extraParams: {
q: '',
limit: '',
maxRows: 15,
term: function () { return $('#player').val() }
},
max: 25,
width: 200
});
});


Things get complicated when it gets to parse:. Essentially all it’s doing is taking the returned JSON response and organizing it an array so it can be manipulated. I am adding two new JSON values that need to be manipulated, pos and team. They are listed like so: value:data[i].pos, value:data[i].team. The section where it says result:data[i].value is what is returned into the input box when it is selected. We don’t want pos or team included in the box, so we simply use .value.

Next up is “formatItem:”. This is what adds extra styling to the results. It’s fairly straightforward, we are using the same values that were just added to the array in the previous function.

“extraParams:” are the added variables that will be passed to the PHP script. We have q, limit, maxRows and term. q and limit are set to blank because I won’t be using them in this particular example.

Now the easy part is the PHP function:

$var = mysql_real_escape_string(strip_tags($_GET['term']));
$sport = 'mlb';

if($sport == 'mlb' && strlen($var)  >= 1){

	$result = mysql_query("SELECT * FROM players WHERE sport = '$sport' and hisname LIKE '%$var%' LIMIT 25");

	while($row = mysql_fetch_assoc($result)){

        $row_array['pos'] = $row['pos'];
        $row_array['team'] = strtoupper($row['team']);
        $row_array['value'] = $row[hisname];

 array_push($return_arr,$row_array);

}

echo json_encode($return_arr);
}

That is all there is to it folks! Check out the barebones demo. It shows the necessary javascript files needed and syntax highlighting.

If you are great with jQuery and would like to rewrite the javascript function to work with the jQuery UI autocomplete, be my guest. I will glady link to your post or append the code to this post.