1

嗨 Djangonauts / autocomplete_light 用户，

我添加了一个 addEventListner 来检查对 autocomplete_light 小部件所做的更改并自动提交选择，而不必进行选择然后单击提交按钮。

这是我的 HTML 模板中的表单和我用来检查更改的 JavaScript

<form novalidate id="select_form" class="contact_form" enctype="multipart/form-data" method="get" action="">
  {% csrf_token %}
  {{ query_form }}
   <div class="button_div">
    <button class="submit" type="submit">Search</button>
  </div>
</form>

<script>
var ac = document.getElementById('id_search-autocomplete');
ac.addEventListener("change", function(event){
    document.forms['select_form'].submit();
}, false);
</script>

如果我在选择突出显示时通过按“Tab”或“Enter”来选择 autocomplate_light 选项，这将正常工作。如果我检查我正在使用的 ClassBasedView 中的 views.py 调度方法，我可以看到以下内容。

(Pdb) self.request.GET
<QueryDict: {u'csrfmiddlewaretoken': [u'TwjMM4YsqBnRwFDVIbo68rP63l1nFScC'], 
             u'search': [u'133'], 
             u'search-autocomplete': [u'rover']}>

我的问题是鼠标单击突出显示的选择不会用“搜索”值填充 QueryDict 对象。

(Pdb) self.request.GET
<QueryDict: {u'csrfmiddlewaretoken': [u'TwjMM4YsqBnRwFDVIbo68rP63l1nFScC'], 
             u'search-autocomplete': [u'rover']}>

这是我在其中设置 pdb 跟踪的 views.py 文件。

视图.py

class ClubIndexView(ListView):
    template_name = 'club_list.html'
    model = Club
    paginate_by = 10
    form_class = ClubForm

    def get_context_data(self, **kwargs):
        context = super(ClubIndexView, self).get_context_data(**kwargs)
        context['query_form'] = self.form_class
        return context

    def get_queryset(self):
        return Club.objects.order_by('name_slug')

    def dispatch(self, request, *args, **kwargs):
        pdb.set_trace()
        # I'm checking self.request.GET here                   <<<<<<<<
        try:
            return HttpResponseRedirect(reverse('club_detail', args=[self.request.GET['search']]))
        except Exception, e:
            print "Error: {0}".format(e)
        return super(ClubIndexView, self).dispatch(request, *args, **kwargs)

我真的很感激任何关于为什么单击鼠标不会将所需的“搜索”添加到 QueryDict 对象的见解。

谢谢。

更新 2014.07.23

所以我不知道这是否是最佳实践，但通过阅读 autocomplete.js 并摆弄我设法让它工作的选择对象：

我的 HTML 模板中的 JS

<script>
$('#id_search-autocomplete').bind(
    'selectChoice',
    function(e, choice, autocomplete) {
        console.log(choice[0].getAttribute('data-value'))
        var ac = document.getElementById('id_search-autocomplete');
        ac.value = choice[0].getAttribute('data-value')
        document.forms['select_form'].submit();
    }
);
</script>

视图.py

def dispatch(self, request, *args, **kwargs):
    try:
        return HttpResponseRedirect(reverse('club_detail', args=[self.request.GET['search-autocomplete']]))
    except Exception, e:
        print "Error: {0}".format(e)
    return super(ClubIndexView, self).dispatch(request, *args, **kwargs)
4

0 回答 0