您的位置：首页 > 编程语言 > Go语言

简单实现google百度搜索建议

2011-11-23 23:00 267 查看

1、文章目的：学习动态提示搜索

2、实现工具：eclipse、Dreamweaver

3、实现思路：

（1）、输入一定的字符串让系统自动提醒相关类似的信息。

（2）、事件绑定，在什么条件下发生。

（3）、即时查询数据库，动态返回信息到页面。

4、具体实现：

(1)html:

<body onload="load()">

< input id="input" onkeyup="keyup()"/>//输入内容

<div id="result" ></div>//提示层

<div id="display" ></div>//展示层

</body>

（2）js代码：

function load(){

$('#result').hide();//默认不显示

}

function keyup(){

if($('#input').val().length>2){//输入length 大于2 的字符串开始触发提示

execute($('#input').val(),'like');

}else{

$('#result').hide();//不提示不显示

}

}

function  execute(content,type){

$.ajax({

url:'path/...',  //访问后台数据库，并封装有效信息

type:'post',

data:'content='+ $('#input').val(),

dataType:'html',//json,test,html,xml均可

success:function(returnData){//returnData数据库返回信息

if(type=='like'){

$('#result').show();//显示提示

$('#result').innerHTML=returnData.ResponseText;//包含有超链接及方法的html，包含多条相似信息

}else{

$('#result').hide();

$('#display').innerHTML=returnData.ResponseText;//页面展示结果

}

}

});

}

//返回的html中onclick="search(returnOkStr)"

//点击查询结果

function search(returnOkStr){

$('#input').val(returnOkStr);//输入框内显示完整信息

execute(returnOkStr,'');//返回真实有效的信息，输出到页面展示

}

（3）java、css代码略：

只需要controller做好返回即可。

(4)效果展示：

输入:so

出现:soso

sodu

................

(注：最好限制一下提示的条数，否则在数据量庞大的时候很不好控制，div提示应该是浮动层！)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航