Jquery 自动完成不适用于不同的数据

Question

我对 Jquery 自动完成有疑问。我的代码运行完美，但是当我更改数据源时，它无法运行。

这是我的代码，运行完美。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Seach Autocomplete</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
    <label for="field_id">ID</label>
    <input id="field_id" type="text" style="width: 200px;">
    <label for="field">Search</label>
    <input id="field" type="text" style="width: 200px;">
</body>
</html>
<script>
    $(function() {

        var data = [
            {
                "id": "17",
                "value": "Albania",
                "label": "Albania"
            },
            {
                "id": "18",
                "value": "Algeria",
                "label": "Algeria"
            },
            {
                "id": "20",
                "value": "American Samoa",
                "label": "American Samoa"
            }

        ];

        $("#field").autocomplete({
            source: data,
            minLength: 1,
            select: function(event, ui) {
                $("#field_id").val(ui.item.id);
            }
        });
    });
</script>

但是，如果我将数据更改为下面的数据，则无法正常工作，结果也不会显示。这是数据，但不起作用：

{
   "id": 298,
   "city_name": "Jakarta Timur",
   "province_name": "DKI Jakarta"
},
{
   "id": 299,
   "city_name": "Kabupaten Tangerang",
   "province_name": "Banten"
},
{
   "id": 230,
   "city_name": "Jakarta Timur",
   "province_name": "DKI Jakarta"
}

Answer 1

基于 documentation 它不起作用，因为应该是一个具有标签和值属性的对象数组：[ { label: "Choice1", value: "value1" }, ... ]。您可以使用以下代码来解决您的问题：

   $(function() {

        var data = [
            {
                "id": 298,
                "city_name": "Jakarta Timur",
                "province_name": "DKI Jakarta"
            }
        ];
        
        data.forEach(function(obj) {
            let keys = Object.keys(obj);
            obj.label = obj[keys[1]];
            obj.value = obj[keys[2]];
            delete obj[keys[1]];
            delete obj[keys[2]];
            
        });
        

        $("#field").autocomplete({
            source: data,
            minLength: 1,
            select: function(event, ui) {
                $("#field_id").val(ui.item.id);
            }
        });
   });

Jquery 自动完成不适用于不同的数据

Jquery Autocomplete not working on different Data

javascript

jquery

autocomplete