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

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

php jquery mysql ajax

如何在Ajax和PHP中创建自动完成搜索？,php,jquery,mysql,ajax,Php,Jquery,Mysql,Ajax,我正在创建一个基本的自动完成ajax脚本来获取mysql数据库搜索结果，但无法在php页面中显示结果我可以在search.php中看到从数据库获取的数据是一个数组，但在check.php页面中没有显示相同的数据。这是因为某种css还是其他问题任何建议都会大有裨益这是代码> check.php <html> <head> <title></title> <link rel="stylesheet" type="text/css" hre

我正在创建一个基本的自动完成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>

<?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()

?>


li.ui-菜单项{
字体大小：12px！重要；
}
$（文档）.ready（函数（）{
$（“#区域搜索”）。自动完成({
来源：“search.php”，
最小长度：1
});
});
搜索：

search.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>

<?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()

?>

是的，因为您使用的是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"/>

是的，因为您使用的是jQueryUI插件，所以需要嵌入适当的css

要遵循已经完成的操作，请在html模板中使用以下行：

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

当我输入所需的字母表时，它会显示‘无搜索结果’当我输入所需的字母表时，它会显示‘无搜索结果’我添加了这个，现在它不会显示任何内容，数据是在search.php中获取的，虽然与往常一样，但现在没有任何内容在check.phpy您应该查看此处的文档，了解如何从远程源获取数据：您是否从数据库获取任何数据？你从成功回报中得到了什么？控制台中有错误吗？调用search.php时，您能检查伺服响应吗？因此，如果我单独运行search.php，它会返回如下db数据：[{“label”：“d”，“value”：“d”}，{“label”：“a”，“value”：“a”}，{“label”：“f”，“value”：“f”}，{“label”：“d”，“value”：“d”}。这里的值从dbi中看起来是正确的，添加了这个，现在它没有显示任何内容，数据在search.php中获取，虽然与往常一样，但现在没有任何内容在check.phpy您应该检查这里的文档，了解如何从远程源获取数据：您从db获取任何数据吗？你从成功回报中得到了什么？控制台中有错误吗？调用search.php时，您能检查伺服响应吗？因此，如果我单独运行search.php，它会返回如下db数据：[{“label”：“d”，“value”：“d”}，{“label”：“a”，“value”：“a”}，{“label”：“f”，“value”：“f”}，{“label”：“d”，“value”：“d”}。此处的值在db中显示正确