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、またはコールバックからのデータには、次の 2 つのバリアントがあります。

  • 文字列の配列: [ "Choice1", "Choice2" ]

  • label プロパティと value プロパティを持つオブジェクトの配列: [ { 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 を使用して、そのフィールドに文字を入力すると、オートコンプリート用に設定されたソース ページにリクエストが送信されることを確認します。



問題を再作成/修正するために使用したコードは次のとおりです。

index.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 autocomplete jsを使用しました。(完全な詳細については、リンクを参照してください)

ここでのハイライトは、この js がonSelectオートコンプリートの提案を選択した後に値を設定できるコールバックを提供することです。

json でエンコードされた文字列は次のようになります。

query:'Li',
suggestions:['Mahendi Hassan','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],
data:['1','2','3','4']
  • query - 元のクエリ値
  • 提案 - 提案された値のカンマ区切りの配列
  • data (オプション) - データが選択されたときのコールバック関数の値を含むデータ配列。

にいくつかの隠し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 に答える