Jquery自动补全多个值，远程！

Question

我是jquery的新手！我在我的应用程序中使用jquery ui自动完成，其中自动完成值来自数据库。下面是我正在使用的代码，但什么也没有发生

search.php

<?php

    $conn = mysql_connect("localhost", "root", "");
    mysql_select_db("webforum", $conn);

    $q = strtolower($_GET["term"]);

    $query = mysql_query("select name from groups where name like %$q%");
    while ($row = mysql_fetch_array($query)) {
        echo json_encode($row);
    }
    ?>

这是test.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta  charset="utf-8">
    <title> jQuery UI Autocomplete - Multiple, remote </title>
    <link rel="stylesheet" href="theme/jquery.ui.all.css">
        <script type="text/javascript" src="jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.position.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.autocomplete.js"></script>
        <style type="text/css">
    .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
    </style>
        <script type="text/javascript">
    $(function() {
        function split( val ) {
            return val.split( /,\s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }

        $( "#birds" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).data( "autocomplete" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                source: function( request, response ) {
                    $.getJSON( "http://localhost/webforum/search.php", {
                        term: extractLast( request.term )
                    }, response );
                },
                search: function() {
                    // custom minLength
                    var term = extractLast( this.value );
                    if ( term.length < 2 ) {
                        return false;
                    }
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( ", " );
                    return false;
                }
            });
    });
    </script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds" size="50" />
</div>

</div>
</body>
</html>

有人能帮我吗？提前感谢！

Answer 1

你的json看起来怎么样？为了使用jquery-ui自动完成，你至少需要有标签和值属性：

{
   'label' : 'your_label',
   'value' : 'your_value'
}

在您的js代码中，您请求的值属性似乎没有在由php生成的json上设置。

这里有一个类似的问题：Having problems with jQuery UI Autocomplete

所以php必须以正确的方式构建结果：

    $conn = mysql_connect("localhost", "root", "");
    mysql_select_db("webforum", $conn);

    $q = strtolower($_GET["term"]);

   $return = array();

    $query = mysql_query("select name from groups where name like %$q%");
    while ($row = mysql_fetch_array($query))
    {
        //since we have just 1 value from the db just use it as both value and label
        array_push($return,array('label'=>$row['name'],'value'=>$row['name']));
    }

   echo(json_encode($return));

另外，使用$_GET[]参数进行查询并不安全。

Answer 2

取自jQuery自动完成文档。

本地数据可以是一个简单的字符串数组，也可以包含数组中每一项的对象，具有标签和/或值属性。label属性将显示在“建议”菜单中。在用户从菜单中选择某项内容后，该值将被插入到输入元素中。如果只指定了一个属性，它将同时用于两个属性，例如。如果仅提供value-properties，则该值也将用作标签。

当使用字符串时，Autocomplete插件希望该字符串指向将返回JSON数据的URL资源。它可以在同一主机上，也可以在不同的主机上(必须提供JSONP)。请求参数"term“被添加到该URL。数据本身可以采用与上述本地数据相同的格式。

假设上述情况，请将您的代码调整为：

<?php

$conn = mysql_connect("localhost", "root", "");
mysql_select_db("webforum", $conn);

$q = strtolower($_GET["term"]);

$query = mysql_query("select name from groups where name like %$q%");
$results = array();
while ($row = mysql_fetch_array($query)) {
    array_push($results, $row);
}
echo json_encode($results);

?>