时间戳

首页 > 解决方案 > 从 MongoDB 数据库渲染数据以进行自动完成

javascript - 从 MongoDB 数据库渲染数据以进行自动完成

问题描述

我正在尝试在 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}返回预期的文件。

我也尝试做一些接近这个小提琴的东西，效果很好

$(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

标签： javascriptjquerypython-3.xmongodbautocomplete

解决方案

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 语法混用。选择你喜欢的那个并保持一致。它将使代码更易于维护，并可以帮助您防止意外行为。

推荐阅读