jQuery: populating an autocomplete on input focused

Question

I cannot figure out how to populate the autocomplete list of an input dynamically. Here is some test code:

<input id="AnlNr">

[....]

var AnlNrTags = ["five","six","seven","eight"];

jQuery( "#AnlNr" )
    .autocomplete({
        source: AnlNrTags,
        }
     })

     .focus(function() {
         AnlNrTags = ["one","two","three","four"];
     });

Autocomplete populates "five","six","seven","eight". OK. Now when the input is focused, I wanted it "one","two","three","four", but the autocomplete selections are still like before. Seems the autocomplete widget isn't designed to re-evaluate the autocomplete source after initialization.

How can I change my autoselection list in .focus?

Thx

Alina.

`Look into this` http://stackoverflow.com/questions/4132058/display-jquery-ui-auto-complete-list-on-focus-event — Jitendra Yadav, Jul 11 '15 at 09:21

score 1 · Accepted Answer · answered Jul 11 '15 at 09:29

1

To change the source property of the autocomplete after initialisation, you need to call it with the option property. Try this:

.focus(function() {
    AnlNrTags = [ "one", "two", "three", "four" ];
    jQuery("#AnlNr").autocomplete('option', 'source', AnlNrTags);
})

Example fiddle

Note that your pattern is a little off. Becuase you are changing the source as soon as the input element is focused means that the first set of options five, six, etc will never be seen.

answered Jul 11 '15 at 09:29

Rory McCrossan

331,213
40
305
339

Jep, that was exactly what my sample was supposed to show. the new values assigned in the .focus handler never make it into the autocomplete list. Thanks for your sample code, looks very promising, will try it tonight. – Alina85 Jul 11 '15 at 13:30

Jitendra Yadav · Answer 2 · 2015-07-11T11:15:29.090

Try this one,

$(function() {
    $('#in1').autocomplete({
        source: ["five","six","seven","eight"],
        minLength: 0
    }).focus(function(){
        var newtag = [ "one", "two", "three", "four" ];
        $("#in1").autocomplete('option', 'source', newtag);           
       $("#in1").data("autocomplete").search($(this).val());
    });
});

DEMO

Look into second demo where merging both values. DEMO-2

jQuery: populating an autocomplete on input focused

2 Answers2