利用AJAX实现搜索提示功能

应用地址

http://gequ.sinaapp.com

应用地方

发布新音乐的表单。用此方法可以提高用户的用户体验,例如用户输入歌手名时,可以实现智能的提示,当然前提是需要后端的不断的查询,在数据库中用select like查询,然后将查询的结果用JSON编码,返回给前端处理。百度的suggest技术就是使用这个技术,
当然他们处理还增加了很多的技术,例如键盘的坚持事件处理等,不然按照我这么简单的处理,服务器的压力至少要增加十倍,可能还不止,那天简单的调试,差不多一个人就到了3000的pv值,好在这个查询不是很费事件,返回的json也很少,相对于复杂的计算来讲,对小用户群还是可以接受的。

function loadXMLDoc()
{
        var xmlhttp;
        var str = document.form1.singer.value;
        var url = 'ajax/search.php?key='+str;
        if (window.XMLHttpRequest)
        {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
        } else {
                // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                        var div = document.getElementById("search_suggest");
                        div.innerHTML = "";
                        var str = xmlhttp.responseText.split("|");
                        for (var i=0; i<str.length; i++)
                        {
                                var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
                                suggest += 'onmouseout="javascript:suggestOut(this);" ';
                                suggest += 'onclick="javascript:setSearch();" ';
                                suggest += 'class="suggest_link" id="'+str[i]+'">' + str[i] + '</div>';
                                div.innerHTML += suggest;
                                document.getElementById("search_suggest").style.display = '';
                        }
                }
        }
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
}

代码的作用就是发起ajax请求,请求的地址是ajax/search.php?key= ,key就是你查询的关键字了,其实就是一直请求,例如你输入周,就需要查询key=z,key=zh,key=zho,key=zhou,key=周五次过程,当然你也可以在前端加函数处理,例如检测侦听,规定输入的时间在多少秒之外进行第一次查询。这样可以很好的减轻服务器的压力。当然在前端获得了xmlhttp.responseText的时候就需要对得到的返回的字符进行处理,我这里是用|隔开的,只需要对字符串进行拆分然后循环展示就可以了。其余的前端代码实现可以参见音乐用力推的首页。

后端代码

其实后端的实现相对简单很多,当然首先需要把对应的数据库导入到你的mysql中,或者你选择其他的nosql存取。

我的代码贴出:

<?php
//search.php
$key = trim($_GET['key']);//获取搜索的关键字
if ($key != NULL) {
        $mysql = new SaeMysql();
        $search = '%'.$key.'%';//当然这么搜索是极不推荐的
        $sql = sprintf("select sname from singer where sname like '%s' limit 10",s($search));
        $data = $mysql->getData($sql);
        if($data == NULL) {
                echo '暂时没有收录';
                exit(0);
        }
        $return = '';
        foreach ($data as $piece) {
                $return[] = $piece['sname'];
        }
        //讲数组展开拼接成字符串
        $text = implode("|", $return);
        echo $text;
} else {
        echo "请输入!";
}