Bootstrap自动完成错误：无法读取未定义的属性“”

2024-05-06 • 问答

我正在尝试对Django ..使用Bootstrap自动完成功能。我测试了调用并将ajax请求成功发送到我的视图，但是我没有收到我的回复。由于类型的控制台中出现错误： 未捕获的TypeError：无法读取未定义的属性'updatedItem'

该错误多次出现，并以不同的名称替代“ updatedItem” ----，并在我开始输入表单时出现。

...我在这里想念的东西！

views.py

def SearchMedical(request):
    results_pharmacy = None
    if request.GET.get('q'):
        q = request.GET['q']
        results_pharmacy = PharmacyDetails.objects.filter(name__istartswith = q).values_list('name',flat=True)
        json = list(results_pharmacy)
        return JsonResponse(json,safe=False)

search.html

<script src="https://cdn.jsdelivr.net/gh/xcash/bootstrap-autocomplete@master/dist/latest/bootstrap-autocomplete.min.js"></script>


       <form method="GET" action="{% url 'searchMedical' %}" id="searchMedical">

<input class="basicAutoComplete form-control rounded-0" autocomplete="off"  type="text" placeholder="Pharmacy name">
</form>


<script>
$('.basicAutoComplete').autoComplete({
    resolverSettings: {
        url: '{% url "searchMedical" %}'
    },minLength: 1

});
</script>

我发现了我的错误！我忘了将JQuery代码封装在文档就绪事件中：$（document）.ready（）

我从一些DOCS提出了以下解释：无论何时使用jQuery操作网页，都需要等到文档就绪事件触发。文档就绪事件表明页面的DOM现在已经就绪，因此您可以操作它而不必担心尚未创建DOM的某些部分。在加载所有图像等之前，但在整个DOM本身就绪之后，将触发文档就绪事件。

在文档“就绪”之前，无法安全地操纵页面。 jQuery为您检测到这种就绪状态。 $（document）.ready（）内的代码仅在页面文档对象模型（DOM）准备好执行JavaScript代码后才能运行。

现在，在进行以下编辑后，我的代码可以正常工作：（您可以在Django中使用它）
search.html

<script>
    $(document).ready(function(){
$('.basicAutoComplete').autoComplete({
    resolverSettings: {
        url: '{% url "ajax_search" %}'
    },minLength: 1
});
    });
</script>

Bootstrap自动完成错误：无法读取未定义的属性“”

fy5151 回答：Bootstrap自动完成错误：无法读取未定义的属性“”

大家都在问