如何使用数据库连接jquery ui自动完成小部件?

时间:2015-06-19 09:50:41

标签: javascript php jquery html json

upload.php的

<?php
include('lib.php');

$text = $mysqli->real_escape_string($_GET['term']);
$query = "SELECT * FROM user WHERE area LIKE (:keyword) ORDER BY id ASC 
LIMIT 0, 10";
$result = $mysqli->query($query);
$json = '[';
$first = true;
while($row = $result->fetch_assoc()) 
{
if (!$first) { $json .=  ','; } else { $first = false; }
$json .= '{"value":"'.$row['area'].'"}';
 }
 $json .= ']';
 echo $json;
 ?>

area_list.js

$(function(){

   var test=["red","blue","pink","Black" ,"Grey"];  


   $("#term2").autocomplete({

    source:'<?php include upload_where.php; ?>'


    });


 });

HTML

<input id="term2" placeholder="e.g New Delhi, Mumbai" />

如果您认为代码是正确的,可能我的服务器不支持json,因为我之前没有使用过json。

2 个答案:

答案 0 :(得分:1)

你不能在javascript中包含你的php。 所以你需要为自动完成创建一个php脚本。 在这个脚本中,最好使用数组存储结果,然后使用“json_encode”将其转换为json。

autocomplete.php:

<?php
include('lib.php');

if(true === isset($_GET['term']) && false === empty($_GET['term']))
{
    $text = $mysqli->real_escape_string($_GET['term']);
    $query = "SELECT * FROM user WHERE area LIKE (:keyword) ORDER BY id ASC 
    LIMIT 0, 10";
    $result = $mysqli->query($query);

    $json = array();
    $first = true;
    while($row = $result->fetch_assoc()) 
    {
        $json[] = $row['area'];
    }
    header('Content-Type: application/json');
    echo json_encode($json);
}
?>

对于javascript,请使用ajax检索结果

$('#term2').autocomplete({    
        minChars:2,
        noCache: false, //default is false, set to true to disable caching    
        // callback functions:
        source: function( request, response ) {
            $.ajax({
                url: "autocomplete.php", //Correspond to PHP page
                dataType: "json",
                data: {term: request.term},
                success: function(data) {
                            return data;
                }
            });
        }
    });

答案 1 :(得分:0)

您使用字符串作为输入,但您确实需要一个数组作为自动完成源。

如果您不想编写ajax请求,如果您的js是通过php 动态生成的,那么您可以用以下代码替换您的代码:

$(function(){
   var test=["red","blue","pink","Black" ,"Grey"];  
   $("#term2").autocomplete({
    source:<?php include upload_where.php; ?>
    });
 });

然而使用php生成你的js 并不是一个好主意。所以你可以使用ThinkTank答案