以编程方式选择 django-autocomplete-light 中的第一个建议答案

【问题标题】：Programmatically select the first suggestion in django-autocomplete-light以编程方式选择 django-autocomplete-light 中的第一个建议
【发布时间】：2013-05-14 08:34:17
【问题描述】：

如何选择第一个给定选项？我正在根据用户的位置向自动完成小部件提供来自反向地理编码结果（城市）的数据。我有一个包含城市的数据库，我需要选择第一个建议的选项。

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();

感谢您的帮助。

截图：

http://cl.ly/image/2V0I373e2C0M（已实现）
http://cl.ly/image/3S2p382o2N12（目标）

参考资料：

【问题讨论】：

也许我在西里尔字母中遗漏了一些东西，但发布的两个屏幕截图不一样吗？
@summea 感谢收看，已修复

标签： javascript python django autocomplete django-autocomplete-light

【解决方案1】：

您也必须以编程方式选择选项：

$('#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]);

这个想法是在第一个自动完成建议时触发“selectChoice”。

【讨论】：

不，它不起作用。它不会选择第一个建议的元素
@DmitryDemidenko 但数据值必须是存储城市的 ID 而不是字符串 :)
真正的输出是<span data-value="2453" class="div">Санкт-Петербург</span>

【解决方案2】：

如果只有一个选项，以下是如何自动选择第一个选项：

        $(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]);
                }
            }
        });

【讨论】：

3.x这个版本怎么做？
v3 对 v3 使用 select2，而不是 jquery-auocomplete-light：stackoverflow.com/questions/25395427/…

【解决方案3】：

根据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]);
    }
}

【讨论】：