jQuery自動完成功能不起作用

Question

我正在為項目使用django。 這是我為獲取查詢建議而創建的視圖：

def query_suggestions(request):
 if request.GET.has_key('term'):
   cols = Col.objects.filter(name__istartswith = request.GET['term'])[:3]
   fes = Fe.objects.filter(name__istartswith=request.GET['term'])[:3]
   users = User.objects.filter(first_name__istartswith=request.GET['term'])[:3]
   json_str = ""
   if users:
    json_str = json.dumps([{'label': user.first_name, 'value': '/'+ user.username + '/'} for user in users])
   if cols:
     json_str += json.dumps([{'label': col.name, 'value': col.get_absolute_url()} for col in cols])
   if fes:
     json_str += json.dumps([{'label': fe.name, 'value': fe.get_absolute_url()} for fe in fes])
   return HttpResponse(json_str)
 return HttpResponse()

此腳本使用jQuery進行自動補全：

$("#header-search-input").autocomplete({
      source: "/query_suggestions/",
      focus: function (event, ui) {
        $(event.target).val(ui.item.label);
        return false;
      },
      select: function (event, ui) {
        $(event.target).val(ui.item.label);
        window.location = ui.item.value;
        return false;
      }
    });

因此，輸入值m返回[{"value": "/moni/", "label": "Moni"}, {"value": "/manisha/", "label": "Manisha"}][{"value": "/col/mira/", "label": "Mira"}]的HttpResponse() [{"value": "/moni/", "label": "Moni"}, {"value": "/manisha/", "label": "Manisha"}][{"value": "/col/mira/", "label": "Mira"}]

提示，這不會在search-input-bar下方顯示自動完成建議。 但是，如果我輸入mo它會返回[{"value": "/moni/", "label": "Moni"}]以及search-input-bar下的建議。 這是什么原因？

Answer 1

正如您從示例中看到的那樣，該代碼不會生成有效的JSON：列表之間沒有逗號。

您不想通過串聯字符串來產生JSON。 相反，請在Python中建立列表或字典，然后最后轉儲至JSON：

data = []
if users:
  data.append([{'label': user.first_name, 'value': '/'+ user.username + '/'} for user in users])
if cols:
  data.append([{'label': col.name, 'value': col.get_absolute_url()} for col in cols])
if fes:
  data.append([{'label': fe.name, 'value': fe.get_absolute_url()} for fe in fes])
json_str = json.dumps(data)