Question

我一直在搞乱这个问题，试图让它发挥作用。任何人都可以看看你是否有任何指针。

<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提供的数据。 Simples。只是它不起作用......

任何人都有任何想法，我错过了什么？

此致

----编辑----

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

<!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>

完美无缺。这么好的事实我认为我要保持这个代码不是它应该如何工作但是......

Answer 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']

Answer 2

试试这段代码，它适用于我

$().ready(function() {
$("#materials").autocomplete("autocomplete.php", {
        width: 260,
        matchContains: true,
        autoFill:true,
        selectFirst: false
    });
});

Answer 3

从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"});
});

Answer 4

你的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;取出。

使用PHP进行Jquery自动完成

4 个答案: