jQuery Autocomplete images with options

Question

Dear Techies,

I am a newbie to jQuery.But really fascinated on it.Hats off to jQuery Team

I have an aspx page where i want to implement an auto complete feature for a text box where user will type to search products.If they type,I wanto to show products with name a and their images to in the option.I have a DB table with 3 columns ProductId,ProductName and Image Name.

I tried the jQuery autocomplete plug gin.But could not find a solution for my requirement.Can any one guide me how to go ahead.Thanks in advance.

Answer 1

You'll need to provide the product name and image url back to the autocomplete plugin from your server-side code. You can then override formatItem in the plugin options to modify the markup. Essentially, you'll need to create the html that shows the name and picture. See the image search demo at http://jquery.bassistance.de/autocomplete/demo/. Here's the code from that demo:

$("#imageSearch").autocomplete("images.php", {
 width: 320,
 max: 4,
 highlight: false,
 scroll: true,
 scrollHeight: 300,
 formatItem: function(data, i, n, value) {
  return "<img src='images/" + value + "'/> " + value.split(".")[0];
 },
 formatResult: function(data, value) {
  return value.split(".")[0];
 }
});