【问题标题】：Render data for autocompletion from a MongoDB database从 MongoDB 数据库渲染数据以进行自动完成
【发布时间】：2021-04-01 17:27:33
【问题描述】：

我正在尝试在 HTML 字段中生成自动补全。我想将数据源从硬编码更改为 myMongoDB 数据库。我能够通过以下方式呈现硬编码数组中的数据：

$(document).ready(function() {

  var perfumes = ["dior", "pacco", "moschino"];

  $("#autocomplete").autocomplete({
    source: perfumes,
    minLength: 0
  }).focus(function() {
    /* Muestra todas las opciones al enfocar el input */
    $(this).autocomplete('search', $(this).val())
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="recommendations">
  <!-- <div class="login-page"> -->
  <div class="form">
    <form class="form" action="{% url 'similar_results' %}" method="get" autocomplete="off">
      <input id="autocomplete" type="text" placeholder="Perfume name...">
      <input id="perfumename" type="submit" value="Find Similar Perfumes" />
    </form>
  </div>
  <!-- jQuery-UI CSS -->
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/cupertino/jquery-ui.css" />
  <!-- jQuery-Min JS -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <!-- jQuery-UI JS -->
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</div>

但是，当我试图将它调整到我从查询到 MongoDB 数据库索引的数据时，它并不那么简单。确实，这个：

  $(document).ready(function () {
    $("#autocomplete").autocomplete({
        source: async function(request, response) {
            let data = await fetch(`http://localhost:8000/similar/similar_results/?query=${request.term}`)
                .then(results => results.json())
                .then(results => results.map(result => {
                    return { label: result.name, value: result.name, id: result._id };
                }));
            response(data);
        }
    });
  });

不渲染任何东西。即使http://localhost:8000/similar/similar_results/?query=${request.term} 返回预期的文档。

我也尝试做一些接近this fiddle的事情，效果很好

$(document).ready(function () {
  const datos = await fetch(`http://localhost:8000/similar/similar_results/?query=${request.term}`);
  const filtrar = (w) => {
    return datos

  }
  // handle click and add class
  $("#autocomplete").autocomplete({
    source: async function(request, response) {
        let data = filtrar().map(result => {
                return { label: result.name, value: result.name, id: result._id };
            });
        response(data);
    },
    minLength:2,
    select: function(event, ui){
      console.log(ui.item);
    }
  });
})

但我的尝试没有。

更新

Django version 3.1.1, using settings 'scentmate.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
JE SUIS PASSE PAR LA # This shows we went through the Django code which query the database
JE SUIS PASSE PAR LA # This shows we went through the Django code which query the database
[27/Mar/2021 19:01:20] "GET /similar/similar_results/?query=at HTTP/1.1" 200 11389
[27/Mar/2021 19:01:21] "GET /similar/similar_results/?query=atel HTTP/1.1" 200 11389

这是查询数据库的代码：

class SearchResultsView(ListView):
    model = Perfume
    template_name = 'todo/search_similar_results.html'

    def get_queryset(self):  # new
        query = self.request.GET.get('q')
        print("JE SUIS PASSE PAR LA")
        # object_list = list(collection.find({"q0.Results.0.Name": {"$regex": str(query), "$options": "i"}}))
        object_list = list(collection.aggregate([
                {
                    '$search': {
                        'index': 'default',
                        'compound': {
                            'must': {
                                'text': {
                                    'query': str(query),
                                    'path': 'name',
                                    'fuzzy': {
                                        'maxEdits': 2
                                    }
                                }
                            }
                        }
                    }
                }
            ]
        ))
        # print(object_list[0])
        return object_list

【问题讨论】：

你检查data是否有任何价值？
@Swati 我试过了。我对javascript很陌生，所以我在this jsfiddle的第9行做了一个console.log，但没有任何结果......
你可以试试this 看看是否有效。确保网址是否正确。
感谢您的贡献@Swati 我刚刚尝试过。一方面，正如您在控制台输出的更新中看到的那样，我仍然在 django 后端查询the function in views.py。但是，在另一端，没有自动完成弹出。我还在$ajax 函数之后添加了console.log("some string");，但没有任何显示。我真的是 javascript 的菜鸟。
您正在使用 ..get('q') 使用 ajax 获取参数传递，这应该是 get('query')

标签： javascript jquery python-3.x mongodb autocomplete

【解决方案1】：

https://api.jqueryui.com/autocomplete/#option-source在接口上很清楚作为源的功能：

函数：第三种变体，回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成，包括 JSONP。回调有两个参数：

一个request 对象，具有单个term 属性，它引用当前文本输入中的值。例如，如果用户在城市字段中输入 "new yo"，则自动完成项将等于 "new yo"。

response 回调，它需要一个参数：建议给用户的数据。此数据应根据提供的术语进行过滤，并且可以采用上述任何简单本地数据的格式。在请求期间提供自定义源回调以处理错误时，这一点很重要。即使遇到错误，您也必须始终调用response 回调。这可确保小部件始终具有正确的状态。

您使用与文档格式不匹配的对象数组 { label: result.name, value: result.name, id: result._id }; 返回调用响应回调。而是在地图的 lambda 中返回一个纯字符串：

  $(document).ready(function () {
    $("#autocomplete").autocomplete({
        source: function(request, response) {
            fetch(`http://localhost:8000/similar/similar_results/?query=${request.term}`)
                .then(results => results.json())
                .then(results => results.map(result => result.name))
                .then(response);
        }
    });
  });

附带说明，请尽量避免将 Promise 与 async/await 语法混用。选择你喜欢的那个并保持一致。这将使代码更易于维护，并且可以帮助您防止意外行为。

【讨论】：