9

我是一个在 jQuery 中解析 JSON 的完整菜鸟。以为我得到了回应......我的数据是这种形式：

Array(
[1]=>abc,
[3]=>mango,
[4]=>apple,
[5]=>fruits
)

通过这种方式，我希望此列表显示为自动完成列表。我在用。

    jQuery("#name").autocomplete( '<?php echo HTTP_PATH.'/songs/sss'; ?>', {
    multiple: true,
    mustMatch: true,        
    matchContains: true,
    autoFill: false,
    dataType: "json",
    parse: function(data) {
            return jQuery.map(data, function(item) {
                return { data: item, value: item.label, result: item.label};
            });
        },
        formatItem: function(item) {
            return item.label;
        },
        formatResult: function(item) {
            return item.id;
        },
        formatMatch: function(item) {
            return item.label;
        }

});

我想要它显示列表时的值，即我的数据中的标签。当我选择一个标签时，它应该显示标签。但是在提交时它应该实际提交密钥。我的意思是我希望它作为 HTML 的选择框工作。

返回的 JSON

 [{"id":1,"label":"Mehdi Hassan"},{"id":2,"label":"Jagjit Singh"},{"id":3,"label":"Suresh Vadekar"}]
4

5 回答 5

11

您的 JSON 似乎不是一个数组，只是一个对象（散列图）。查看官方文档：

预期数据格式

来自本地数据、url 或回调的数据可以有两种变体：

  • 字符串数组：[ "Choice1", "Choice2" ]

  • 具有标签和值属性的对象数组：[ { label: "Choice1", value: "value1" }, ... ]

在您的情况下，它应该采用以下格式：

[
   {"1":"Shad.aab"},
   {"158":"Adadad"},
   {"159":"Asdadad"},
   {"166":"Abbas"},
   {"167":"Sdadad"},
   {"171":"Shadaab Please check it out"},
   {"173":"Check This Please"},
]

（记住左边是标签，右边的值，我想在你的数据中，都应该颠倒......）

于 2012-04-23T19:22:46.913 回答
5

如果我对您的理解正确，您想使用自动完成来填充名称文本字段，但想利用与 POST 表单中的名称关联的另一个值。

[如果您能够使用最新的 jQueryUI 版本的自动完成] - 遵循http://jqueryui.com/demos/autocomplete/#custom-data上的“自定义数据和显示”自动完成示例，您将在自动完成中看到提示，它们显示选定的标签，但是，它们还将关联的值保存在隐藏的输入中，该输入也回发到服务器。鉴于您当前的 json 格式：

html:

<label for="username">Name:</label>
<input id="username" size="50" />             <!-- holds display name -->
<input id="userid" name="userid" size="50" /> <!-- holds userid -->
...

js：

<script>
  $("#username").autocomplete({
    source: '<?php echo HTTP_PATH.'/songs/sss'; ?>',

    // Update display name when user mouses over selection
    focus: function( event, ui ) {
      $( "#username" ).val( ui.item.label );
      return false;
    },

    // Set display name and hidden input on user selection
    select: function( event, ui ) {
      $( "#username" ).val( ui.item.label );
      $( "#userid" ).val( ui.item.id );
      return false;
    }
  }); 
</script>

php POST 目标：

<?php
  // Use [hidden] input to do your magic
  if(isset($_POST['userid']))
    echo 'Wooo..here is my key: ' . $_POST['userid'];
?>
于 2012-05-29T09:42:24.557 回答
3

你需要json_encode($your_array)在后端做。

它将 PHP 数组转换为您的前端 (jQuery) 可以解析和处理的 JSON 编码字符串。

于 2012-05-28T11:27:09.337 回答
3

问题看起来在这里：

jQuery("#name").autocomplete( '<?php echo HTTP_PATH.'/songs/sss'; ?>', { multiple: true, ...

它应该是这样的：

jQuery("#name").autocomplete( { source: '<?php echo HTTP_PATH.'/songs/sss'; ?>', multiple: true, ...

还要确保您在加载/准备好时使用它，而不仅仅是在普通的 <script> 标记内

$(function(){ jQuery("#name").autocomplete(); });

使用 firebug 来验证当您在该字段中键入一个字母时，它会向设置为自动完成的源页面发送请求。



这是我用来重新创建/解决您的问题的代码：

索引.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
    $(function(){
        jQuery("#name").autocomplete({
            source: 'index_json.php',
            multiple: true,
            mustMatch: true,
            matchContains: true,
            autoFill: false,
            dataType: "json",
            parse: function(data) {
                return jQuery.map(data, function(item) {
                    return { data: item, value: item.label, result: item.label};
                });
            },
            formatItem: function(item) {
                return item.label;
            },
            formatResult: function(item) {
                return item.id;
            },
            formatMatch: function(item) {
                return item.label;
            }
        });
    });
</script>
</head>
<body>
    <form>
        <label for="name">Name: </label>
        <input id="name" name="name" />
    </form>
</body>
</html>

index_json.php

<?
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
echo '[{"id":1,"label":"Mehdi Hassan"},{"id":2,"label":"Jagjit Singh"},{"id":3,"label":"Suresh Vadekar"}]';
?>




我对您的请求感到非常困惑，但是已经采用了您的代码并使其按照您的指定方式工作（我认为）。

当它从我的数据中显示 list.ie 标签时，我想要价值。当我选择标签时，它也应该显示标签。但在提交时它实际上应该提交密钥。我的意思是我希望它作为 HTML 的选择框工作。

听起来好像您想要一个仅用于搜索的输入框和一个静态选择列表，该列表从自动完成更改但保留在那里而不是消失...

于 2012-05-23T22:16:07.303 回答
1

我不确定我是否很好地理解了你的问题。但在我的经验中，我面临着同样的要求。我从上面的链接中使用了ajax 自动完成 js 。（通过链接了解完整的详细信息）

这里的亮点是，这个 js 为您提供了一个回调onSelect，您可以在选择自动完成建议后设置您的值。

json编码的字符串应该像

query:'Li',
suggestions:['Mahendi Hassan','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],
data:['1','2','3','4']
  • 查询 - 原始查询值
  • 建议 - 逗号分隔的建议值数组
  • 数据（可选）- 数据数组，其中包含选择数据时回调函数的值。

现在在您的 中有一些隐藏input字段form，并将所选建议的数据设置为该隐藏input字段的值，如下所示。

jQuery(function () {
    options = {
        minChars: 2,
        serviceUrl: "ur/php file",
        onSelect: function (value, data) {
            $('#hiddenUserProfileIdProps').val(data);  //Setting value to hidden field
        }
    });
    a = $('#enterEmailLink').autocomplete(options);
    a.disable();
});

然后提交您的表格。而已。

于 2012-05-28T06:53:46.113 回答