• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

利用html+css+mysql+php实现类似googlesuggest的功能

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  其实大家对google suggest这种搜索关键字自动提示的功能非常的了解,但是在作为如果只做前端工作的我们,我们可以很流利的跟人家说出下面这句话:

“google suggest是通过Ajax的异步交互,实时刷新页面,将关键字传给后台服务器,同时将返回结果展示在前台页面”,我们可以很流利的告诉人家,前台展示我们都知道,通过javascript的源生js代码,通过

监听onreadyStateChange事件,设置回调函数,然后用写烂了的document.getElementById('info').innerHTML=reponseText;就可以将后台返回的数据展示到前台,但是如果让我再写这篇东西之前说说,

那到底后台都做了些什么,具体的实现原理,我可能就哑口无言了!迫于对php强烈的学习的渴望,没多久我就学会了其中的原理,

大概步骤仍未几部分:

1、首先我们要知道get方式发送的请求,会在地址栏url后面缀有明显的名值对:如图:

从中我们可以看出来get发送请求的一些特征,以?隔开后面每一个名值对之间用一个&隔开,所以我们可以想象的就是如果用户这是提交的表单中有密码的东西,那么它也会显性的显示在url上面,所以就会出现安全问题,当然扯远了,不是今天要谈的主题。

2、那么类似google suggest的功能我们首先要明确整个思路

html+css:实现页面的布局和渲染,没沙克说了

jquery:1、监控键盘按键,当有内容键入的时候,就显示input框下面的div层

2、当键入的时候,触发回调函数,将input内部的value值以url的形式传送给后台php文件,进行判断处理

3、将返回的数据以li的形式,展示在div层中,同时当鼠标单击的时候,能将内容显示在input框中

4、通过 $.each()方法对返回回来的数据进行特殊的插入处理

<script type="text/javascript">
    $(function(){
        $("#txt1").keyup(function(e){
            var $val=$(this).val();
            /*var $id=0;
            if($("#txtHint:visible").length==1){                
                if(e.which==40){
                    $('#txtHint li').eq($id).addClass("hover").siblings().removeClass("hover");
                    $id++;
                }    
            }*/
            showHint($val);
            
            
        });
    })
    function showHint(str){
        if(str.length==0){
            $("#txt1").val('');
            return false
        }
        var url="lyl.php";
        url+="?name="+str;
        url+="&s>Math.random();
        $.get(url,function(data){
            $("#txtHint").html("");
            var $array=data.split(',');
            $.each($array,function(index,value){
                $('<li>'+value+'</li>').appendTo($("#txtHint"));
                $("#txtHint").show();
                $('#txtHint li').click(function(){
                    $("#txt1").val($(this).text());
                    $(this).parent().hide();
                });
            });
        });
    }
</script>

 

php+mysql:1、建立数据库链接

2、创建数据表,将准备的数组内容,以数组遍历的方式,通过mysql语句中的insert方式,插入到数据库表中,如图

$con=mysql_connect("localhost","root","");
    mysql_select_db("phptest",$con);
    $sql="create table autucomplete(
        id int not null auto_increment,
        primary key(id),
        name varchar(15)
    )";
    mysql_query($sql,$con);
    for($i=0;$i<count($a);$i++){//通过这个操作,将数组以遍历的方式全部插入到了数据库表中
        mysql_query("insert into autucomplete (name) values ('".$a[$i]."')");
    }

3、通过mysql的select方法选择出来,并通过mysql_fetch-array方法将从数据库表中取得的数据以数组的方式存储起来

$sql2="select * from autucomplete";
    $result=mysql_query($sql2,$con);
    $a =array();
    $num = 0;
    while($row=mysql_fetch_array($result)){
        $a[$num]=$row[name];
        $num++;
    }

4、将数据库中需要进行逻辑判断的字段,(判断数据库中是否以此为首字母开头的数据),并返回的一个response值,作为php返回给前台的数据

以上我们要注意 php和前台关联的一个重要的点就是$name=$_GET['name'];,将前台数据及时返回给后台php,然后再动态的刷新前台的内容。

 

其实向google和百度选择了两种方式来进行提示功能

百度 是及时监控用户的按键,没按一个键就会发送一个请求,但是当你输入了相同内容的时候将不再发送请求

google 是先检测你按键的内容,但是这些请求并没有真正地发送成功,只有当你确定了要输出的时候,才会发送成功


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap