如何与json返回的对象一起使用jQuery-Autocomplete

Question

我试图在文本输入字段(这里的文件)上使用jQuery库。为此，我使用Ajax查找从db获取数据：

// terminal.js

$(document).ready(function() {
    $.ajax("getStocksAvailable/", {
        method: "GET",
        async: "True",
        dataType: "json",
        success: function (response) {
            console.log(response);
            var myDataInAutocompleteFormat = $.map(response, function (response) {
                return {value: response.fields.description, data: response.pk};
            });

            $("#autocomplete").autocomplete({
                source: myDataInAutocompleteFormat,
                lookup: myDataInAutocompleteFormat,
                onSelect: function (suggestion) {
                    alert("You selected: " + suggestion.value + ", " + suggestion.data);
                }
            });
        }
    });
})

它以这种格式以json的形式返回response：

[0 … 99]
0:
 fields: {description: "DP WORLD"}
     description: "DP WORLD"
 model: "feeder.stocksavailablemodel"
 pk: 17969
__proto__: Object
1: {model: "feeder.stocksavailablemodel", pk: 17970, fields: {…}}
2: {model: "feeder.stocksavailablemodel", pk: 17971, fields: {…}}

我希望jQuery能够使用json中的所有description值自动完成输入字段。

// html

<link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.css">

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js"></script>
<script src="{% static 'js/terminal.js' %}"></script>

错误

Uncaught TypeError: $(...).autocomplete is not a function
    at Object.success (terminal.js:30)
    at c (VM1560 jquery.min.js:2)
    at Object.fireWith [as resolveWith] (VM1560 jquery.min.js:2)
    at l (VM1560 jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (VM1560 jquery.min.js:2)

我假设自动完成器不喜欢json的格式。但我不知道如何使它符合它的要求，所以它能够处理数据。

Json返回屏幕截图：

​

​

Answer 1

根据文档自动完成只接受两种格式的数据，值-数据或仅值：

{
    // Query is not required as of version 1.2.5
    "query": "Unit",
    "suggestions": [
        { "value": "United Arab Emirates", "data": "AE" },
        { "value": "United Kingdom",       "data": "UK" },
        { "value": "United States",        "data": "US" }
    ]
}

{
    "query": "Unit",
    "suggestions": ["United Arab Emirates", "United Kingdom", "United States"]
}

然后，您需要映射您的对象以将其以所需的格式带来。您可以使用transformResult函数来管理Ajax调用中的数据。

$('#autocomplete').autocomplete({
    paramName: 'searchString',
    transformResult: function(response) {
        return {
            suggestions: $.map(response.myData, function(dataItem) {
                return { value: dataItem.valueField, data: dataItem.dataField };
            })
        };
    }
});

使用本地查找(没有ajax)查看这个示例：https://stackblitz.com/edit/js-mbxtd8