如何在Ajax和PHP中创建自动完成搜索?

时间:2015-12-31 09:52:15

标签: php jquery mysql ajax

我正在创建一个基本的自动完成ajax脚本来获取mysql数据库搜索结果但是无法在php页面中显示结果。

我可以看到从search.php中的数据库中获取的数据是一个数组,但是在check.php页面中没有显示相同的数据。这是因为某种css还是其他一些问题?

任何建议都会有很大的帮助!!

以下是代码>

check.php

<html>
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<style type="text/css">

    li.ui-menu-item{
        font-size: 12px !important;
    }

</style>

<script type="text/javascript">

    $(document).ready(function(){
        $('#regionsearch').autocomplete({
            source: 'search.php',
            minLength:1
        });
    });

</script> 


</head>

<body>

<form action="" method="POST">
    Search: <input type="text" name="search" id="regionsearch"/>
</form>

</body>
</html>

的search.php

<?php


$dblink = mysql_connect('localhost', 'root', 'root') or die(mysql_error());
mysql_select_db('user_information');


if(isset($_REQUEST['term']))
    exit();




$rs = mysql_query('Select * from registered_users where first_name like "'.ucfirst($_REQUEST['term']).'%" order by id asc limit 0,10',
    $dblink);

$data = array();
while($row=mysql_fetch_assoc($rs, MYSQL_ASSOC)){
    $data[] = array(
            'label'=>$row['first_name'],
            'value'=>$row['first_name']
        );
}

echo json_encode($data);
flush()

?>

1 个答案:

答案 0 :(得分:0)

是的,因为你使用的是jquery ui插件,你需要嵌入适当的css。

要了解您已经完成的操作,请在您的html模板中使用以下行:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"/>

您还应该使用doc来获取远程数据并调整代码:

  

https://jqueryui.com/autocomplete/#remote-jsonp

$(document).ready(function(){
    $('#regionsearch').autocomplete({
        source: 'search.php',
        minLength:1,
        dataType: "jsonp",
        data: {
            q: request.term
        },
        success: function( data ) {
            response( data );
        }
    });
});