使用 JavaScript 和 Django 实现实时搜索

Question

我正在尝试制作类似于您进行谷歌搜索时的实时搜索功能。搜索按名称查询我数据库中的咖啡馆。

我已经获得了这样的功能，如果整个搜索值与数据库中的咖啡馆名称匹配，它会显示给用户，但我希望这样做，以便在用户键入时检查搜索值，并出现咖啡馆直到用户完成输入（此时应该只剩下一家咖啡馆）。

这是我所拥有的：

$("#search-box").keyup(function() {
  search()  
});
  

function search(){
  let searchTerm = document.getElementById("search-box").value;
      $.ajax({
        type: 'GET',
        url: '/electra/search/',
        data: {
          'search_term':searchTerm
        },
        success: function (data) {
            console.log(searchTerm); //refer to below function for the running of this loop
            $("#search-results").text(data);
          }
        });
  };

views.py：

def search(request):
    template_name = 'testingland/write_image.html'
    search_term = request.GET.get('search_term', None)
    print(search_term)
    qs = mapCafes.objects.filter(cafe_name = search_term)
    return JsonResponse([
            [cafe.cafe_name, cafe.cafe_address]
            for cafe in qs
    ], safe=False)

我一直在使用 qs 过滤器，但无法找到解决此问题的最佳方法。

Answer 1

当你写作时：

qs = mapCafes.objects.filter(cafe_name = search_term)

由于您没有指定任何查找，因此假定为exact 查找，即cafe_name 必须与提供的search_term 完全匹配。相反，您希望使用contains [Django-docs] 或icontains 之类的查找，以便获得包含给定search_term 的所有mapCafes 实例：

qs = mapCafes.objects.filter(cafe_name__icontains = search_term)

注意：按照约定，python 中的类名应为PascalCase。模型名称也应该是 singular 所以它应该是 MapCafe 而不是 mapCafes。