PHP结合AJAX实现搜索提示功能

首先将创建一个输入框；然后监听输入框的keyup事件，当事件触发时，使用AJAX请求将输入的内容发送给PHP；接着PHP根据输入的内容进行数据查找并返回；最后将返回的数据进行渲染即可。

示例代码

客户端：

<script>  
    $(document).ready(function(){  
        var xhr=null;  
        $('input[name=keyword]').keyup(function() {  
              if(xhr){  
                  xhr.abort();//如果存在ajax的请求，就放弃请求  
              }  
            var inputText= $.trim(this.value);  
            if(inputText!=){//检测键盘输入的内容是否为空，为空就不发出请求  
            xhr=$.ajax({  
                type: 'GET',  
                url: 'service/suggestion.PHP',  
                cache:false,//不从浏览器缓存中加载请求信息  
                data: keyword= + inputText,//向服务器端发送的数据  
                dataType: 'json',//服务器返回数据的类型为json  
                success: function (json) {  
                    if (json.length != 0) {//检测返回的结果是否为空  
                        var lists = <ul>;  
                        $.each(json, function () {  
                            lists += <li>+this.pd_name+</li>;//遍历出每一条返回的数据  
                        });  
                        lists+=</ul>;  
  
                        $(#searchBox).html(lists).show();//将搜索到的结果展示出来  
  
                        $(li).click(function(){  
                            $(#keyword).val($(this).text());//点击某个li就会获取当前的值  
                            $(#searchBox).hide();  
                        })  
  
                    } else {  
                        $(#searchBox).hide();  
                    }  
  
  
                }  
  
            });  
            }else{  
                $(#searchBox).hide();//没有查询结果就隐藏搜索框  
            }  
        }).blur(function(){  
            $(#searchBox).hide();//输入框失去焦点的时候就隐藏搜索框  
        });  
  
    });  
</script>

服务端：

<?PHP  
session_start();  
  
function connectDb(){//连接数据库的函数  
$db_server=localhost;  
$db_name=test;//数据库的名称  
$db_user=root;//数据库的用户名，不同的用户权限不同  
$db_pwd=;//数据库的密码  
$dsn=MysqL:host=$db_server;dbname=$db_name;charset=utf8;//使用PDO的方法连接数据库  
  
try{  
$connect=new PDO($dsn,$db_user,$db_pwd,array(PDO::ATTR_PERSISTENT=>true));//如果需要数据库长连接，需要最后加一个参数  
  
}  
catch(PDOException $e){  
    exit('数据库连接失败');  
}  
    return $connect;  
  
}  
  
function test($keyword){//从数据库中查找关键字的函数  
$db=connectDb();  
$result=$db->prepare(select 字段名 from 数据库名字 where 字段名 like ?);  
$result->bindParam(1,$keyword);//第一个问号的值  
$result=>execute;  
  
return $result->fetchAll(PDO::FETCH_ASSOC);  
  
  
}  
  
$keyword=$_GET['keyword'];//获取输入框的内容  
  
$suggestion=test($keyword);  
  
echo json_encode($suggestion);//输出查询的结果（json格式输出）  
  
?>

推荐教程：《PHP教程》

PHP结合AJAX实现搜索提示功能

相关推荐