Question

19

jQuery autocomplete with images

rated 0 times [ 24] [ 5] / answers: 1 / hits: 23576 / 15 Years ago, tue, may 26, 2009, 12:00:00

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:

$(#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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yaquelina

Add To Favorites

Follow

Total Points: 517

Total Questions: 101

Total Answers: 96

Location: Egypt

Member since Tue, Jul 6, 2021

3 Years ago

yaquelina questions

1 Unable to access process variable in Vue3JS Vite project

Sun, Feb 13, 22, 00:00, 2 Years ago

1 How to return an array of unique objects based on the id of the object in es6?

Mon, Dec 27, 21, 00:00, 2 Years ago

1 How to run nodemon + forever in the background

Tue, Jun 2, 20, 00:00, 4 Years ago

1 How to remove warning in React native

Sun, Mar 8, 20, 00:00, 4 Years ago

1 Angular 9 - You must pass in a NgModule or NgModuleFactory to be bootstrapped

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 15 Years ago kalynnkathrynd · Accepted Answer

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

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

        width: 320,

Width of the drop down

        max: 4,

Maximum suggestions

        highlight: false,

Highlight true/false

        scroll: true,

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

        scrollHeight: 300,

Height of the auto complete drop down.

        formatItem: function(data, i, n, value) {

            return <img src='images/ + value + '/>  + value.split(.)[0];

        },

How to format the response returned from images.php.

        formatResult: function(data, value) {

             return value.split(.)[0];

        }

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

});

Closing brackets :p