0

AJAXを使用してユーザーのテキストをオートコンプリートしようとしています。今、私はAJAXに、ユーザーが入力したときにオートコンプリート機能に必要な結果を「suggestions」divに返すようにしました。しかし、私が達成しようとしているのは、入力フィールド（ "prod-name"）から出てくるドロップダウンで、ユーザーが好みの提案をクリックして入力の「値」にすることができるオプションとしての提案があります（同様のあなたがタイプするときにグーグルがどのように検索候補を持っているかについて、しかし単純化されたバージョン）。

これまでの私のマークアップ：

<script type="text/javascript">
    function search(searchword) {
      $('#suggestion').load('invoice-get-data.php?searchword=' + searchword);
    }
</script>
</head>
<body>

<div class="prod-name">
    <input onKeyPress="search(this.value)" type="text" id="prod-name"/>
    <div id="suggestion"></div>
</div>
</body>

これまでの私のAJAXコード（invoice-get-data.phpコードスニペット）

$searchword = $_GET['searchword'];

    $results = mysql_query("SELECT * FROM products WHERE prod_name LIKE '".$searchword."%'") or die(mysql_error());

    while($row = mysql_fetch_array($results)){
        echo $row['prod-name'] . '<br>';
    }
4

1 に答える 1

1

jquery uiは、このようなオートコンプリート用のウィジェットを提供します：http: //jqueryui.com/autocomplete/。

javascript側は次のようになります。

<script>
$(function() {
    $( "#prod-name" ).autocomplete({
        source: "invoice-get-data.php",
        minLength: 2,
        select: function( event, ui ) {
            alert("Product #" + ui.item.id + " selected");
            return true;
        }
    }
    });
});
</script>

そして、PHP側は次のようになります。

$searchword = $_GET['term'];

$results = mysql_query("SELECT * FROM products WHERE prod_name LIKE '".$searchword."%'") or die(mysql_error());

$data = array();
while($row = mysql_fetch_array($results)){
    $data[]     = array(
        "id"        => $row['id'],
        "value"     => $row['prod-name'],
        "label"     => $row['prod-name']
    );
}   

echo json_encode($data);
于 2012-12-05T01:16:33.160 に答える