您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > PHP技术 > PHP应用

使用PHP,MySQL和jQuery的Ajax自动完成搜索

作者:UncleToo  来源:原创  日期:2013-12-30 7:47:46
收藏  评论:( 0 )  阅读:915

在本节PHP教程中,我们将使用使用PHP,MySQL和jQuery自动完成搜索功能。当用户在搜索框内输入关键字时,jQuery将自动匹配相关信息。

这里有两种类型的自动搜索:

   1、简单的jQuery自动搜索

   2、使用jQuery填充多个文本框的自动搜索请求。

自动搜索实现原理是这样的:用户在搜索框内输入的每一个关键字都将使用AJAX传输到Apache服务器。服务器将连接MySQL数据库,并查找和这些关键字相关的数据。最后Apache服务器将ajax请求发送到客户端,并将数据显示给用户。

下面我们看具体的实现步骤。这里只是介绍程序部分,数据库部分不再介绍了。

1、创建config.php文件用来连接数据库

<?php
/*
Site : http:www.uncletoo.com
Author :UncleToo
*/
define('DB_HOST', 'localhost');
define('DB_NAME', 'autocomplete');
define('DB_USER','root');
define('DB_PASSWORD','');
$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());
?>

2、创建index.php文件,并在页面上添加搜索框

<input id="country_name" class="form-control txt-auto"/>

3、添加jQuery类库文件及样式文件

<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>

4、下面这段js脚本将实现从文本框中获取关键字,并将关键字传输到服务器端,最后将搜索匹配上的数据展示出来。

$('#country_name').autocomplete({
                source: function( request, response ) {
                    $.ajax({
                        url : 'ajax.php',
                        dataType: "json",
                        data: {
                           name_startsWith: request.term,
                           type: 'country'
                        },
                         success: function( data ) {
                             response( $.map( data, function( item ) {
                                return {
                                    label: item,
                                    value: item
                                }
                            }));
                        }
                    });
                },
                autoFocus: true,
                minLength: 0       
              });

5、创建ajax.php文件。该文件是用来处理ajax请求的,也就是在上一步的AJAX中用到的文件。

<?php
require_once 'config.php';
if($_GET['type'] == 'country'){
    $result = mysql_query("SELECT name FROM country where name LIKE '".strtoupper($_GET['name_startsWith'])."%'"); 
    $data = array();
    while ($row = mysql_fetch_array($result)) {
        array_push($data, $row['name']);   
    }  
    echo json_encode($data);
}
?>


本文由UncleToo原创,转载请注明出处!



除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/application/763.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论