0

我已经搞砸了太久，试图让它工作。任何人都可以看看你是否有任何指示。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="autocomplete.css" />      
        <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
        <title></title>
    </head>
    <body>
        <style>
            .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
        </style>
        <script>
            $(function() {                
                $( "#materials" ).autocomplete({
                    source: "autocomplete.php",
                    minLength: 2
                });
            });
        </script>
        <div class="demo">

            <div class="ui-widget">
                <label for="materials">Materials: </label>
                <input id="materials" />
            </div>
        </div><!-- End demo -->            
    </body>
</html>

和 php 文件是

require_once "db_con.php"; // Database connection, I know this works.
$q = strtolower($_GET["q"]);
if (!$q)
    return;

$sql = "SELECT * FROM materials WHERE name LIKE '%$q%'"; 
$rsd = mysqli_query($dbc, $sql) or die(mysqli_error($dbc));
while ($rs = mysqli_fetch_array($rsd)) {
    $cname = $rs['name']; // I know this all returns correctly
    echo json_encode($cname); // First time I have ever used json, error might be here.
}

我正在尝试拥有一个由 Jquery 提供支持的自动完成网页，该网页是使用 PHP 从 mysql 提供的数据。简单的。只是它不起作用...

有人知道我缺少什么吗？

问候

- - 编辑 - -

为了检查这是否有效，我完成了以下操作：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="autocomplete.css" />      
        <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
        <title></title>
    </head>
    <body>
        <style>
            .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
        </style>
        <script>
            $(function() {                
                $( "#materials" ).autocomplete({
                    source: <?php
include_once 'db_con.php';
$sql = "SELECT name FROM materials";
$rsd = mysqli_query($dbc, $sql) or die(mysqli_error($dbc));
echo '[';
while ($rs = mysqli_fetch_array($rsd)) {
    echo "'" . $rs['name'] . "', "; //add results to array
}
echo ']';
?>,
                        minLength: 2
                    });
                });
        </script>
        <div class="demo">

            <div class="ui-widget">
                <label for="materials">Materials: </label>
                <input id="materials" />
            </div>


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

效果很好。太好了，我想我会保留这段代码，而不是它应该如何工作，但是......

4

4 回答 4

1

在 PHP 部分，也许尝试这样的事情：

$res = array();  //create a new array
while ($rs = mysqli_fetch_array($rsd)) {
  $res[] = (string)$rs['name']; //add results to array, casted as string
}
header('Content-type: application/json'); //add JSON headers (might work w/o)
echo json_encode($res);  //output array as JSON

...这样你应该把所有结果都放在一个数组中，比如 ['name1', 'name2', 'name3']

于 2012-07-19T08:46:24.470 回答
1

试试这个代码，它对我有用

$().ready(function() {
$("#materials").autocomplete("autocomplete.php", {
        width: 260,
        matchContains: true,
        autoFill:true,
        selectFirst: false
    });
});
于 2012-07-19T08:48:52.657 回答
0

为了处理来自 php ajax 调用的 json 答案，我自定义了源函数并以这种方式自己处理结果：

$(function() {                
    $( "#materials" ).autocomplete({
        source: function(request, response){
            $.post("autocomplete.php", {
                term: request.term
            }, function(data){
                if (data.length == 0) {
                    data.push({
                        label: "No result found",
                    });
                }
                response($.map(data, function(item){
                    return {
                        label: item.name,
                        value: item.name
                    }
                }))
            }, "json");
        },
        minLength: 2,
        dataType : "json"});
});
于 2012-07-19T09:00:53.257 回答
0

你的PHP全错了：

while ($rs = mysqli_fetch_array($rsd)) {
    $cname = $rs['name']; // I know this all returns correctly
    echo json_encode($cname); // First time I have ever used json, error might be here.
}

应该：

$cname = array();
while ($rs = mysqli_fetch_array($rsd)) {
    $cname[]['label'] = $rs['name']; // I know this all returns correctly
    break;
}
echo json_encode($cname); // First time I have ever used json, error might be here.

label是 jqueryautocomplete 使用的数组行中的默认标签字段（我相信）。此外，返回必须是一个数组数组，每个数组行代表一个匹配项。

您可以通过添加一个值字段来使其更复杂，以使文本框实际上等于：

$cname = array();
while ($rs = mysqli_fetch_array($rsd)) {
    $cname[]['label'] = $rs['name']; // I know this all returns correctly
    $cname[]['value'] = $rs['id'];
    break;
}
echo json_encode($cname); // First time I have ever used json, error might be here.

当然我不认为你真的想要break;我把它放进去，因为：

while ($rs = mysqli_fetch_array($rsd)) {
    $cname = $rs['name']; // I know this all returns correctly
    echo json_encode($cname); // First time I have ever used json, error might be here.
}

对我来说，您实际上是从结果中返回单行。如果您不是并且实际上正在返回所有结果，那么请break;退出。

于 2012-07-19T09:13:08.290 回答