按击键顺序返回实时搜索结果-Django和JavaScript

我正在尝试建立一个搜索栏，允许用户在数据库中搜索存储的场馆名称。我希望它是一个实时搜索，在用户键入时返回结果。类似于谷歌

我已经基本完成了这个功能，它会在用户键入时动态返回场地，并返回包含所键入字母的场地

问题: 我不知道如何按打字顺序返回包含字母的场地

以下是我的JS函数：

const search = function() {
  let searchTerm = document.getElementById("search-box").value;
  $.ajax({
    type: 'GET',
    url: '/electra/search/',
    data: {
      'search_term': searchTerm
    },
    success: function(data) {
      data.forEach(([cafeName]) => {
        var cafeName = cafeName;
        var searchList = $(
          `<div>
                  <ul class="list-item border-top" data-idtext="${cafeName}" id="${cafeName}">${cafeName}</ul>
              </div>`
        );
        searchList.appendTo('#search-results');
      });

      $("ul").click(function(event) {
        var selectedVenue = event.target.id;
        $("#search-results").empty()
        getVenueDetails(selectedVenue)
      });
    }
  });
};

---

不同之处在于，您的代码返回的结果中包含（%term%）搜索词，而google返回的结果以它开头（term%）。很抱歉，您能澄清一下您的意思吗？您返回的结果中搜索词可以出现在任何地方。所以，如果有人输入“bo”，你会得到“booth”以及“robot”或“hobo”。更改搜索语法，使其只返回仅以“bo”开头的结果。

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__icontains = search_term)[0:5]
    return JsonResponse([
            [cafe.cafe_name]
            for cafe in qs
    ], safe=False)