0

ローカルホストでurlオプションを使用してオートコンプリートを使用しようとしています。私のphpファイルは次のように返されます。

[ { label: "025170000", value: "18511"},....{ label: "TE-5170V-Special", value: "8464"} ]

例えば。

私のhtmlコードは次のようになります。

    <head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Remote datasource</title>
    <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.23.custom.css">
    <script src="js/jquery-1.8.0.min.js"></script>
    <script src="js/jquery-ui-1.8.23.custom.min.js"></script>
    <style>
    .ui-autocomplete-loading { background: white right center no-repeat; }
    </style>
    <script>
    $(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $( "#products" ).autocomplete({
            source: "auto_complete.php",
            minLength: 3,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
            }
        });
    });
    </script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
    <label for="products">Products: </label>
    <input id="products" />
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div><!-- End demo -->

文字列の配列で動作させましたが、ラベルと値のペアで動作させることができません。

4

2 に答える 2

0

$.ajax()サーバーからラベルと値のペアを取得しているため、で呼び出しを行う必要がありますsource。これを試して。

$( "#products" ).autocomplete({
    source: function(request, response){
        $.ajax({
            url: "auto_complete.php",
            type: "POST",
            data: {}, //Filtering criteria is specified for the server to filter the results. I'm not exactly sure what needs to be done since you have not posted server code.
            success: function (data) {
                response(data);
            }
        });
    },
    minLength: 3,
    select: function( event, ui ) {
        log( ui.item ?
            "Selected: " + ui.item.value + " aka " + ui.item.id :
            "Nothing selected, input was " + this.value );
    }
});

サーバー側で何をしているのか教えていただければ、dataそれが渡されるのを手伝うことができます。

于 2012-09-20T14:55:41.480 に答える
0

OK、「label」と「value」も引用符で囲む必要があることがわかりました。したがって、次のように表示する必要があります。

[ { "label": "025170000", "value": "18511"},....{ "label": "TE-5170V-Special", "value": "8464"} ]

サーバーサイドスクリプトでこのコードを使用してこれを行いました。

      $result = mysql_query($sql);
  $products = '[';
  while ($row = mysql_fetch_assoc($result)) {
        extract($row);
        $products .= " { \"label\": \"$productnumber\", \"value\": \"$productid\"},";
  }
  $products=substr($products,0,-1); 
  $products .= ' ]';
于 2012-11-14T15:08:37.053 に答える