Adding image in Array Item - JavaScript

Question

How to add a image in array item (that will be pushed to Autocomplete) with JavaScript / jQuery?

Hello, I'm trying to learn JS by myself and I'm having a lot of issues. Now I will just explain one of them.

I have jQuery Autocomplete in one text input, I want to display a message when don't have the autocomplete results. Now I just show a message (working), but I want to add a GIF loading image.

My code:

$("input[type=search]").autocomplete({
                delay: 0,
                source: function(request, response) {
                    populate(request.term, response);

                    result = $.ui.autocomplete.filter(result, request.term)

                    // Just prevent to add a lot of "loading" itens to result.
                    for (var i in result){
                        if (i.item.type == "loading"){
                            result.splice(i, 1);
                        }

                        var item = {};
                        item.type = 'loading'
                        item.label = "Loading.."
                        item.value = "Loading.."
                        result.push(item)
                    }
                    response(result)
                }

What can I do to display a GIF with this code?

-------Edit:
Now I tested the code (this code is a new one) and it's appear don't work. What can be the problem?

where is the path for gif image..i dont see any .gif extension — HIRA THAKUR
– HIRA THAKUR, Commented Sep 14, 2013 at 17:11
yes, you're right... but you can't see the .gif path because I don't know how I can insert the image inside the item. That's the point. :/ — Paladini
– Paladini, Commented Sep 14, 2013 at 17:12
so you bring this data to be displayed using ajax and want to show that data in dropdown with images?are you getting your data successfully? — HIRA THAKUR
– HIRA THAKUR, Commented Sep 14, 2013 at 17:26
No, I just show one item with image: "Loading". I want display a loading gif image to "Loading" item in autocomplete result. I can't do something like item.value = "<img src="" class=""> Loading..."; ? — Paladini
– Paladini, Commented Sep 14, 2013 at 17:29

HIRA THAKUR · Accepted Answer · 2013-09-15 18:13:32Z

1

just make sure the code in the source part is correct.This is just a basic module about how to go about things.

 $("input[type=search]").autocomplete({
    delay: 0,
    source: function (request, response) {
        populate(request.term, response);
        //your stuff
    }.data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li />")
            .data("item.autocomplete", item)
            .append("<a><img src='" + your - path + "' />" + your value + "</a>")
            .appendTo(ul);
    };
});

edited Sep 15, 2013 at 18:13

answered Sep 14, 2013 at 17:34

HIRA THAKUR

17.8k14 gold badges60 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Paladini Over a year ago

Wow, amazing code. But I'm getting one error on console: Uncaught TypeError: Cannot set property '_renderItem' of undefined

Paladini Over a year ago

I think we're getting closer, don't leave me now!! hahahah

HIRA THAKUR Over a year ago

@FernandoPaladini:look,you need to learn some basic jquery,ajax for this..its an error and needs to be solved...you have written your code..understand it and solve it...from the info you have given ..its not possible to get any solution..next time when you post some question,ensure that you ask question properly..you might get downvoted if people think you have not researched.This Happens to everybody..time to grab a book or practice some more code..

Paladini Over a year ago

I just change .data("autocomplete") to .data("ui-autocomplete"). Can you edit your answer with this information? if you do that, I'll give you the best answer. Thanks.

Collectives™ on Stack Overflow

Adding image in Array Item - JavaScript

How to add a image in array item (that will be pushed to Autocomplete) with JavaScript / jQuery?

My code:

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

How to add a image in array item (that will be pushed to Autocomplete) with JavaScript / jQuery?

My code:

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related