使用mysql数据库的数据自动完成jQuery

时间:2014-02-27 12:00:52

标签: php jquery mysql

我创建了这个jquery自动完成,但结果它返回[]。 在users表中有两个字段:“ID”(int autoincrement)和“Name(varchar)”并填充。

auto_complete_jquery.html:

<html>
<head>
    <title><!-- Insert your title here --></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
 <script>
$(function() {
$("#tags").autocomplete({source: "name.php", dataType: 'json'});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>

connection.php:

<?php
    $hostname="localhost";
    $username="root";
    $password="";
    $conn=mysql_connect($hostname,$username,$password);
        $dbs = mysql_select_db("jquery_test",$conn);
    if(!$conn)
    {
        echo("Error connection MySQL.");
        exit();
    }
?>

name.php:

<?php
    $return_arr = array();
    $term = $_GET["term"];
    include "connection.php";
    $result= mysql_query("SELECT * FROM users WHERE MATCH(Name) AGAINST('".$term."*')") or die (mysql_error());
    ?>
            <?php

            while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
             {
                $row_array['value'] = $row['tagName'];
                array_push($return_arr,$row_array);
             }

             mysql_close($conn);
             $json=json_encode($return_arr);
             echo $json;
            ?>

1 个答案:

答案 0 :(得分:0)

希望你能找到这个,

$( "#PopulateData" ).autocomplete({
            minLength:2, 
            delay: 50,  
            selectFirst: true,
            open: function () {
                $(this).data("autocomplete").menu.element.width(409);
            },
            source:function(request,response){
             removeConflict.ajax({
                  url: 'remotefile.php?list='+$('#PopulateData').val(),
                  data: request,
                  dataType: null,
                  type: "GET",
                  success: function(data){
                    var listarray= jQuery.parseJSON(data);
                    response(
                    $.map(listarray, function(item) {
                        var text = item.jsonpropertyA;
                        var code = item.jsonpropertyb;
                        console.log(text )
                        return {
                            label: code,
                            value: text

                        }
                    })
                   )},
                 error:function(data){
                     console.log(data)
                  }
             });
           },
          select: function( event, ui ) {
            console.log('value:'+ ui.item.value + ',label:'+ui.item.label);
        }
    });

从服务器响应返回json对象,标签和值将返回到自动完成文本框。

注意:你可以做一些修改,套装你的。 :)