从 MongoDB 数据库呈现用于自动完成的数据

Question

我正在尝试在 HTML 字段中生成自动完成。我想将数据源从硬编码更改为我的 MongoDB 数据库。我能够从硬编码数组中呈现数据：

$(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} returns 预期的文件。

我也试过做一些接近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

Answer 1

https://api.jqueryui.com/autocomplete/#option-source 作为源函数的界面非常清楚：

Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:

A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".

A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

您 return 使用与记录格式不匹配的对象数组 { label: result.name, value: result.name, id: result._id }; 调用响应回调。 Return 地图的 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);
        }
    });
  });

作为旁注，尽量避免将 promises 与 async/await 语法混合。选择您喜欢的一个并保持一致。这将使代码更易于维护，并可能帮助您防止意外行为。

从 MongoDB 数据库呈现用于自动完成的数据

Render data for autocompletion from a MongoDB database

javascript

jquery

python-3.x

mongodb

autocomplete

更新