jQuery自动完成不处理不同的数据

发布于 2025-01-18 23:33:53 字数 2078 浏览 1 评论 0 原文

我的 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"
}

原文

I have a problem with Jquery Autocomplete.
My code work perfectly but when I change the Data Source, it is not working.

Here is my code and work perfectly.

<!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>

But if I change the data to this below is not working and the result not show up. Here is the data and not working:

{
   "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"
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乱世争霸 2025-01-25 23:33:53

基于 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);
            }
        });
   });

Based on documentation it's not working because should be an array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]. You can use the following code to fix your problem:

   $(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);
            }
        });
   });

回复收藏 0 原文

~没有更多了~