时间戳

首页 > 解决方案 > 如何使用带有 json 返回对象的 jQuery-Autocomplete

javascript - 如何使用带有 json 返回对象的 jQuery-Autocomplete

问题描述

我正在尝试在文本输入字段（此处的文档）上使用 jQuery-Autocomplete 库。因此，我使用此 Ajax 查找从数据库中获取数据：

// 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 使用descriptionjson 中的所有值自动完成输入字段。

// 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 作为屏幕截图返回：

在此处输入图像描述

标签： javascriptjqueryjquery-ui-autocomplete

解决方案

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

{
    // 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

推荐阅读