how to add images to the search results

Johannes's Avatar

Johannes

30 Jan, 2012 09:38 PM

Dear Drew,
I have a question to your grat plugin:
I want to add an image to each of the auto-suggest results. Is this meant what you do with the formatList: callback function?
If so, i could you please make a small example, how this can be done?

With best regards,
Kai

  1. 1 Posted by Johannes on 30 Jan, 2012 10:03 PM

    Johannes's Avatar

    I'm so sorry, the solution was already there...

    formatList: function(data, elem){
    var my_image = data.image;
    var new_elem = elem.html("add/change stuff here, put image here, etc.");
    return new_elem;
    }

    Best regards

  2. 2 Posted by Richard on 08 Mar, 2012 10:08 PM

    Richard's Avatar

    I have the same question. Where to put this code?

    formatList: function(data, elem){
    var my_image = data.image;
    var new_elem = elem.html("add/change stuff here, put image here, etc.");
    return new_elem;
    }

    Can you write the example where to put the code in? Is it inside here? :

    If yes, which area and how?

    Or put inside the js file?

  3. 3 Posted by Richard on 08 Mar, 2012 10:24 PM

    Richard's Avatar

    Also, I found a bug of duplicate entry. That's not a demo problem. I connected to my database and found this bug still exist. I found the clue below:

    Example 1:
    1) I type "r", it show "richard", then i select "richard".
    2) I type "r", it still show up "richard", then i select "richard" again.
    3) I type "r", no more show up "richard".

    Example 2:
    1) I type "r", it show "richard" and "rex", then i select "richard".
    2) I type "r", it still show up "richard" and "rex", then i select "rex".
    3) I type "r", no more show up "richard" and "rex".

    Hope it help to get it fix soon. Many thanks.

  4. 4 Posted by Richard on 09 Mar, 2012 06:41 PM

    Richard's Avatar

    Hi,

    I found the place where to put the image code:

                    $(function(){
                    $("input[name=share_friends]").autoSuggest("/ajax_input_query.php", {
                    formatList: function(data, elem){
                    var my_id = data.value;                 
                    var my_name = data.name;
                    var my_image = data.image;                  
                    var new_elem = elem.html("'+my_name+'");
                    return new_elem;
                    },                  
                    minChars: 1,
                    keyDelay: 100,
                    selectedItemProp: "name", 
                    searchObjProps: "name", 
                    startText: "Enter your friend's name",
                    emptyText: "Friends not Found"
                    });
                    });
    

    But how to show the image, username and user id in the "elem.html("
    +my_name+");" ???

    Thanks.

  5. 5 Posted by Richard on 10 Mar, 2012 07:32 PM

    Richard's Avatar

    Hi,

    I found another bug in the hidden input. When i have 2 friends:
    1st: richard, 2nd: rex
    The hidden input value is show up the user id: 1, 2,
    The bug is: when i delete the 1st username(richard), the value in the hidden input is not delete! It still show up the user id: 1, 2,

    Please help to fix this too. Thanks!

  6. 6 Posted by Tridem on 02 Jul, 2012 09:26 AM

    Tridem's Avatar

    var my_id = data.value;
    var my_name = data.name;
    var my_image = data.image;
    var new_elem = elem.html(' ' + my_name + ' ID: ' + my_id);

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac