您的位置：首页 > 其它

输入搜索词出现提示信息供选择

2015-08-23 12:09 453 查看
像百度那样，当你输入一些字词的时候会出现一些可能是你需要提供给你选择，当然，如果不是你需要的你也大可不必理会。

实现的思路其实很简单，就是对键盘的监听，当你按下按键的时候获取你输入的文字，然后把文字通过异步的方式传到后台处理，处理后把你可能需要的信息返回到页面。

代码如下：

 jsp与js代码：

<span style="font-size:18px;"><%@page pageEncoding="utf-8" isELIgnored="false"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.selected{
color:red;
font-size:24px;
font-style:italic;
}
</style>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var length = 0;
var downNum = 0;//记录按下向下方向键的次数
$(function(){
$('#keyword').keyup(fn);
$('#keyword').keydown(keydown);
});
function f
4000
n(){
$.ajax({
'url':'../manager/SearchTip$showTip.action',
'type':'post',
'data':{'keyword':$('#keyword').val()},
'dataType':'text',
'success':function(data){
//分解服务器返回的结果(小米,小说,小学生作文)
var arr = data.split(',');
//将分解之后得到的选项添加到tips里面。
length = arr.length;
$('#tips').empty();
for(var i=0;i<arr.length;i++){
var a = arr[i];
$('#tips').append("<div class='item ' id='"+i+"'>" + a + "</div>");
}
//对每个选项绑订mouseenter事件,当光标经过，加亮该选项
$('.item').mouseenter(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
//对每个选项绑订click事件,点击某个选项时，将该选项的值,添加到搜索输入框，并且清空所有选项
$('.item').click(function(){
$('#keyword').val($(this).text());
$('#tips').empty();
});

}
});
}

//下面开始是键盘向上向下按键选中选项的操作
function keydown(){
var e = e||event;
var currKey = e.keyCode||e.which||e.charCode;
if(currKey==40){//按下向上键
downNum = downNum + 1;
$("#"+(downNum-1)).addClass('selected');
if(downNum>length){
downNum = length;
$("#"+(downNum-1)).addClass('selected');
}
}else if(currKey==38){//按下向上键
if(downNum>0){
downNum = downNum - 1;
$("#"+(downNum-1)).addClass('selected');
}
$("#"+(downNum-1)).addClass('selected');
}else if(currKey==13){//按下回车键
$('#keyword').val($("#"+(downNum-1)).text());
$('#tips').empty();
downNum = 0;
};
}
// document.onkeydown = keydown;
</script>

<table cellpadding="0" cellspacing="0">
<tr>
<td><input name="keyword" id="keyword"/></td>
<td><input type="button" value="搜索"/></td>
</tr>
<tr>
<td colspan="2"><div id="tips"></div></td>
</tr>
</table>

</span>


java代码：
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

@Controller
@Scope("prototype")
public class SearchTipAction extends BaseAction{

private static final long serialVersionUID = 1L;
private HttpServletResponse response;
private String keyword;

//输入某些字，有输入提示语
public void showTip(){
response = ServletActionContext.getResponse();
PrintWriter out = null;
response.setCharacterEncoding("utf-8");//设置返回编码，否则乱码
try {
out = response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
//获取输入信息，在这里你就可以查数据库或者要进行你的业务操作了；我这里就模拟输入的是“中”字了

if("中".equals(keyword)){
out.println("中国,中心,中学,中央");//返回的提示信息
}
out.close();
}

public String getKeyword() {
return keyword;
}

public void setKeyword(String keyword) {
this.keyword = keyword;
}

}


我这里还有一个小小的样式问题，就是当你按下向上或者向下按键的时候被选中的提示语样式会一闪而过，但是不影响功能。

嗯，可以了，希望可以帮到你。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  提示信息 提示语 搜索快捷 搜索功能 搜索提示
相关文章推荐
新的分享
章节导航