jQuery autocomplete with images

Question

I want to implement an autocomplete feature with images in my website.

I would like to use the jQuery autocomplete plugin.

I had a look at their sample code.

Can anyone explain me what the below code means in $(document).ready() event:

Click to copy

$("#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];
  }
});

My ultimate requirement is when I type some letters in the text box, I want the options to come with an image associated with it.

Answer 1

Use this for reference: http://api.jqueryui.com/autocomplete/

---

Click to copy

$("#imageSearch").autocomplete("images.php", {

Apply pluging autocomplete to all fields #imageSearch. First parameter I guess it the page that generates the response based on what is entered (images.php);

Click to copy

        width: 320,

Width of the drop down

Click to copy

        max: 4,

Maximum suggestions

Click to copy

        highlight: false,

Highlight true/false

Click to copy

        scroll: true,

Scroll bar aka drop-down kind of list, or just a long div under.

Click to copy

        scrollHeight: 300,

Height of the auto complete drop down.

Click to copy

        formatItem: function(data, i, n, value) {
            return "<img src='images/" + value + "'/> " + value.split(".")[0];
        },

How to format the response returned from images.php.

Click to copy

        formatResult: function(data, value) {
             return value.split(".")[0];
        }

How to return the value, if the user selects one of the choices.

Click to copy

});

Closing brackets :p