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

Posted 2023-02-24

【中文标题】引导自动完成错误：无法读取未定义的属性“”

【英文标题】：Bootstrap Auto-complete Error: Cannot read property " " of undefined

【发布时间】：2020-03-10 02:52:06

【问题描述】：

我正在尝试使用 Bootstrap 自动完成，与 Django .. 我测试了调用和成功发送到我的视图的 ajax 请求， 但我的表格没有得到回复.. 由于控制台类型出现错误： 未捕获的类型错误：无法读取未定义的属性“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>

【参考方案1】：

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

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

在文档“准备就绪”之前，无法安全地操作页面。 jQuery 会为您检测到这种准备状态。 $( document ).ready() 中包含的代码只会在页面文档对象模型 (DOM) 准备好执行 javascript 代码时运行。

现在我的代码在以下编辑后可以正常工作： （你可以在 django 中使用它） 搜索.html

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

【讨论】：

非常非常感谢。当我找到你的答案......以及我的问题的解决方案时，我花了一整天的时间来找出为什么我的自动完成不起作用并且完全绝望。 :-)

@PaulZakharov 这真的让我很开心，这就是我们为彼此而在这里的原因:-)