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

Question

我正试图在一个文本输入字段上使用jQuery-自动完成库(文件在此).Therefor我使用这个Ajax lookup从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);
                }
            });
        }
    });
})

它返回 response 为json的这种格式。

[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自动完成输入字段，使用所有的。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

根据文档，autocomplete 只接受两种格式的数据，value-data 或 only value。

{
    // 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.comeditjs-mbxtd8