Does jQuery autocomplete work with a dynamic array as source

Question

I am currently trying to create an autocomplete with a source that is stored in a javascript variable but this variable can be updated by another function. So, what I would like is that at each time the user updates the autocomplete field, the source field of autocomplete is generated.

Here is the code I use:

<head>
    <script>
        var availableTags = ['java', 'javascript']
        // can be called anytime
        var addToTags = function(str){availableTags.push(str)}

        $(function() {
            $( "#tags" ).autocomplete({
                source: availableTags
            });
        });
    </script>
</head>
<body>
    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags" />
    </div>
</body>

Do I need to do a callback-like function?

I think your source needs to be a function, rather than an array. api.jqueryui.com/autocomplete/#option-source — hyankov
– hyankov, Commented Dec 13, 2012 at 9:13
@Bergi I corrected the code in the question that line should be var addToTags = function(str){availableTags.push(str)}. you can pair review it. — Arash Milani
– Arash Milani, Commented Dec 13, 2012 at 9:18
@ArashMilani Thanks a lot for the edit, it is exactly what I wanted (copy-paste error). — Christopher Chiche
– Christopher Chiche, Commented Dec 13, 2012 at 10:09

Bergi · Accepted Answer · 2012-12-13 09:18:26Z

13

a source that is stored in a javascript variable but this variable can be updated by another function.

That should just work. If both the autocomplete and the updating function reference the same array, you can push new values at any time which will be used as soon as the array is evaluated next time (e.g. on keystroke).

I would like that at each time the user updates the autocomplete field, the source field of autocomplete is generated.

That's a different one. Yes, this needs a callback function to generate the source array dynamically, but that's simple. Have a look at the docs:

$( "#tags" ).autocomplete({
    source: function(request, resolve) {
        // fetch new values with request.term
        resolve(availableTags);
    }
});

answered Dec 13, 2012 at 9:18

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

Comments

Matanya · Accepted Answer · 2012-12-13 09:39:51Z

3

Just add a reset call to auto-complete in you addToTags function:

var addToTags = function(str){
   availableTags.push(str);
   $( "#tags" ).autocomplete({
       source: availableTags
   });
}

edited Dec 13, 2012 at 9:39

answered Dec 13, 2012 at 9:18

Matanya

6,3469 gold badges50 silver badges82 bronze badges

5 Comments

Bergi Over a year ago

I might've mentioned this in my own answer, but I was quite sure that this does not work seamlessly when the autocomplete is currently active. Does it?

Matanya Over a year ago

that is why I addded the destroy statement. This code is equivalent to calling autocomplete on the first time

Bergi Over a year ago

Yes, it does destroy the currently open suggestions. Have a look at jsfiddle.net/HBtsF and try to use autocomplete there!

Matanya Over a year ago

Following your comment I've removed the destroy call and tried to push items to the array on each interval. It worked. I've edited my answer accordingly. check it out yourself: jsfiddle.net/HBtsF/1

Christopher Chiche Over a year ago

This answer is nice but I would prefer to manage the autocomplete independently of side effect methods.

Azad · Accepted Answer · 2016-09-02 07:13:46Z

1

this is very straight forward

$( "#tags" ).autocomplete('option', 'source', availableTags)

setting availableTags array wherever needed

answered Sep 2, 2016 at 7:13

Azad

5,2725 gold badges31 silver badges59 bronze badges

1 Comment

hussfelt Over a year ago

Thank you! This was exactly what solved running within a Google App Script and google.script.run.

Collectives™ on Stack Overflow

Does jQuery autocomplete work with a dynamic array as source

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related