JQuery Autocomplete
Back story
So as of now you should probably already know what jquery is (javascript wrapper library to make it significantly easier to deal with and read) also JSON objects (much like maps [key: value]) and ajax Ajax Wiki. Well in this tutorial we are going to slam these all together.
Technicals and Code
The code below will give you a straight forward look at a jQuery autocomplete text box. It is an input box and some jquery code to setup the box. Super simple… moving on.
<head>
jQuery("#name").autocomplete({
source: {'abc','def','ghi'....}
});
</head>
<body>
<input id="name">
</body>
Next we will only focus on the jquery aspect and add the ajax calls to our php/struts/asp whatever method
jQuery("#name").autocomplete( {
source: function (request, response) {
$.ajax({
url: 'ENTER YOUR URL HERE',
data: {
searchTerm: request.term
//'searchTerm' is what you are going to pull from the request
},
type: "POST",
success: function(data) {
//GREAT SUCCESS
}
});//end ajax
}//end source of autocomplete
});
This is still fairly straight forward. Once the custom JSON gets thrown into this mix is when we really start to feel like we are doing something. Lets start by looking at the JSON we build to send BACK to the page so we know what kind of data we are dealing with, then we can get rid of the ‘GREAT SUCCESS’ comment
//Java
JSONArray array = new JSONArray();
JSONObject object = null;
for (CustomObj obj : m_objects) {
object = new JSONObject();
object.put("name", obj.getName());
object.put("value", obj.getValue());
object.put("year", obj.getYear());
array.put(object);
}
//end Java
//jQuery
//skipping autocomplete start and moving straight to success callback
success: function(data) {//data is the object that is returned
response($.map(data, function(el) {
//el is an element within the data object also known as our custom json object
return {
name: el.name,//corresponds with json object built above
value: el.value,
year: el.year
}
}));
}
//end jQuery
The $.map is the function that really does the magic hear. It treats the response as a map and makes the new objects to return. In the return we build the object from the corresponding java JSON we built. We are mostly there now. All we have to do is tell jQuery what it should do with the values, since, by default it expects a label and a value.
jQuery("#name").autocomplete( {
.....
}).data("autocomplete")._renderItem = function(ul, item) {
return $("<li>")
.data("item.autocomplete", item)
.append("<a>" + item.name + "</a>")
.appendTo(ul);
};
This is a fairly straightforward function. It takes the data from the autocomplete._rederItem function and replaces it with our own function. The item in this case, referred to in the with item.name, the .name refers to the object we created in the success callback. You could use anything you desired there (in our example here we can use .name, .value, or .year).
Hopefully this can help someone some time, thanks for reading