0

我正在尝试使用 AJAX 自动完成用户文本。现在，当用户键入时，我让 AJAX 将自动完成功能所需的结果返回到“建议”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 回答