Programmatically select the first suggestion in django-autocomplete-light

Question

How can I select the first given option? I'm feeding the autocomplete widget with the data from reverse geocoding results (city) basing on user's location. I have a database with cities and I need to select the first suggested option.

autocomplete_light_registry.py

autocomplete_light.register(
    City,
    search_fields=('^name',),
    autocomplete_js_attributes={'placeholder': _('Start typing...')}
)

forms.py

class CustomerForm(forms.ModelForm):
    city = forms.ModelChoiceField(City.objects.all(), label=_('City'), widget=autocomplete_light.ChoiceWidget('CityAutocomplete'))

locations.js

$('#id_city_text').val(ymaps.geolocation.city);
var autocomplete = $('#id_city_text').yourlabsAutocomplete();
autocomplete.refresh();

Thanks for your help.

Screenshots:

http://cl.ly/image/2V0I373e2C0M (achieved)
http://cl.ly/image/3S2p382o2N12 (goal)

References:

Maybe I'm missing something in the Cyrillic, but aren't both of the posted screenshots the same? — summea, May 21 '13 at 20:09

Dmitry Demidenko · Answer 1 · 2013-05-23T10:33:20.950

4

You have to select the choice programmatically too:

$('#id_city_text').val(ymaps.geolocation.city);
var autocomplete = $('#id_city_text').yourlabsAutocomplete();
autocomplete.show('<span class="div" data-value="'+ymaps.geolocation.cityId+'">'+ymaps.geolocation.city+'</span>');
$('#id_city_text').trigger('selectChoice', [autocomplete.box.find(':first-child'), autocomplete]);

The idea is to trigger 'selectChoice' on a first auto-complete suggestion.

edited May 23 '13 at 10:33

answered May 22 '13 at 07:58

Dmitry Demidenko

3,427
1
22
22

Nope, it doesn't work. It does not select the 1st suggested element – Michael Samoylov May 22 '13 at 10:02
@DmitryDemidenko But data-value must be the ID for stored City and not a string :) – Michael Samoylov May 22 '13 at 11:38
The real output is `Санкт-Петербург` – Michael Samoylov May 22 '13 at 11:42

score 2 · Accepted Answer · answered May 23 '13 at 08:23

2

Here's how to auto select the first choice if there is only one:

        $(document).ready(function() {
            var autocomplete = $('#id_city_text').yourlabsAutocomplete();
            autocomplete.show = function(html) {
                yourlabs.Autocomplete.prototype.show.call(this, html)
                var choices = this.box.find(this.choiceSelector);

                if (choices.length == 1) {
                    this.input.trigger('selectChoice', [choices, this]);
                }
            }
        });

answered May 23 '13 at 08:23

jpic

32,891
5
112
113

how to do this version 3.x ? – rsb May 11 '17 at 10:06
1

v3 uses select2, not jquery-auocomplete-light, for v3: http://stackoverflow.com/questions/25395427/programmatically-set-the-value-of-a-select2-ajax – jpic May 12 '17 at 21:12

score 1 · Answer 3 · answered May 23 '13 at 09:29

According to https://github.com/yourlabs/django-autocomplete-light/issues/139#issuecomment-18332107

locations.js

$('#id_city_text').val(ymaps.geolocation.city);
var autocomplete = $('#id_city_text').yourlabsAutocomplete();
autocomplete.refresh();
autocomplete.show = function(html) {
    yourlabs.Autocomplete.prototype.show.call(this, html)
    var choices = this.box.find(this.choiceSelector);

    if (choices.length == 1) {
        this.input.trigger('selectChoice', [choices, this]);
    }
}

Programmatically select the first suggestion in django-autocomplete-light

3 Answers3