CODEWITHSUNDEEP
jqueryautocomplete
Shyju
Shyju

Reputation: 218862

jQuery Autocomplete images with options

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.

Upvotes: 2

Views: 5301

Answers (1)

tvanfosson
tvanfosson

Reputation: 532625

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];
    }
});

Upvotes: 4

Related Questions