js搜索提示仿百度搜索

仿百度搜索,用的基本的js事件和ajax请求,服务器后端返回xml类型,代码比较齐全,基本上可以直接使用。


<style>
#auto_div{
position:absolute;
border-width:1px;
border:1px #808080 solid;
}
</style>



<input type="text" name="userName" id="auto_txt" value=""/>
<div style="border-width:1px; background-color: white;" id="auto_div"></div>



//高亮的索引
var highLightIndex = -1;
//超时的标识(对用户连续快速按下键盘的事件做延时处理,只对用户在500ms内最后一次请求,让其生效)
var timeoutId;
$(document).ready(function(){
init();
$('#auto_txt').bind('keyup',processKeyup);
});

/***
* 初始化弹出框列表的位置,大小
*/
function init(){
$('#auto_div').hide();
var pos = $('#auto_txt').position();
var topPosition = pos.top+$('#auto_txt').height()+7;
var leftPosition = pos.left;
$('#auto_div').offset({top:topPosition,left:leftPosition});
$('#auto_div').width(131);
}
/**
* 处理点击鼠标后使div消失
* @param event
*/
document.onclick = function(event){
var e = event || window.event;
var elem = e.srcElement||e.target;
while(elem){
if(elem.id == "auto_div"){
return;
}
elem = elem.parentNode;
}
//隐藏div的方法
$('#auto_div').hide();
}

/**
* 处理键盘按下后弹起的事件
* @param event
*/
function processKeyup(event){
var myEvent = event || windows.event;
var keyCode = myEvent.keyCode;
//输入是字母,或者退格键则需要重新请求
if((keyCode >= 65 && keyCode <= 90)
|| keyCode == 32
|| (keyCode >= 48 && keyCode <= 57)){
//以下两行代码是为了防止用户快速输入导致频繁请求服务器
//这样便可以在用户300ms内快速输入的情况下,只请求服务器一次
//大大提高服务器性能
highLightIndex = -1;
clearTimeout(timeoutId);
timeoutId = setTimeout(processAjaxRequest,300);
//处理上下键(up,down)
}else if(keyCode == 38 || keyCode == 40){
processKeyUpAndDown(keyCode);
//按下了回车键
}else if(keyCode == 13){
processEnter();
}
}

/**
* 处理Ajax请求
* @param data
*/
function processAjaxRequest(){
$.ajax({
type:"post", //http请求方法,默认:"post"
url:"${contextPath}/common/ajaxCheckName/"+$('#auto_txt').val(), //发送请求的地址
dataType:"xml", //预期服务器返回的数据类型
success:processAjaxResponse
});
}

/**
* 处理Ajax回复
* @param data Ajax请求得到的返回结果为dom文档对象
*/
function processAjaxResponse(data){
$('#auto_div').html('').show();
$('#auto_div').css('z-index','999');
$('#auto_div').css('position','absoulte');
var xml = $(data);
var words = xml.find('word');
if(words.length == 0){
$('#auto_div').html('无搜索数据');
}
for(var i = 0 ; i < words.length ; i ++){
var word_div = $('<div></div>');
word_div.html(words.eq(i).text());
word_div.hover(fnOver,fnOut);
word_div.click(getAutoText);
$('#auto_div').append(word_div);
}
}

/**
* 处理鼠标滑过
*/
function fnOver(){
changeToWhite();
$(this).css('background-color','cyan');
highLightIndex = $(this).index();
//下面一行注释掉了,百度搜索也没这功能,就是鼠标移动时,跟着改变搜索框的内容
//$('#auto_txt').val($('#auto_div').children().eq(highLightIndex).html());
}

/**
* 处理鼠标移除
*/
function fnOut(){
$(this).css('background-color','white');
}

/**
* 得到自动填充文本
*/
function getAutoText(){
//有高亮显示的则选中当前选中当前高亮的文本
if(highLightIndex != -1){
$('#auto_txt').val($(this).html().trim());
$('#auto_div').html('').hide();
}
}

/**
* 处理按下Enter键
* @param keyCode
*/
function processEnter(){
if(highLightIndex != -1){
$('auto_txt').val($('#auto_div').children().eq(highLightIndex).html().trim());
$('#auto_div').html('').hide();
}
}

/**
* 处理按上下键的情况
*/
function processKeyUpAndDown(keyCode){
var words = $('#auto_div').children();
var num = words.length;
if(num <= 0) return;
changeToWhite();
highLightIndex = ((keyCode != 38 ? num + 1:num - 1)+highLightIndex) % num;
words.eq(highLightIndex).css('background-color','cyan');
$('#auto_txt').val(words.eq(highLightIndex).html().trim());
}

/**
* 如果有高亮的则把高亮变白
*/
function changeToWhite(){
if(highLightIndex != -1){
$('#auto_div').children().eq(highLightIndex).css('background-color','white');
}
}


后台处理ajax请求的代码,包括List转换为XML

public void ajaxCheckName(@PathVariable String userName, HttpServletResponse response) throws IOException, Exception {
List<UserInfo> userInfoList = hrUserInfoService.getUserListByName(userName);
List<String> nameList = new ArrayList<String>();
for(UserInfo userInfo : userInfoList){
nameList.add(userInfo.getUserName());
}
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write(new StringUtil().list2Xml(nameList));
}

/**
*
* @method list2Xml
* @description List转换为XML
*
* list to xml xml <words><word><key label="key1">value1</key><key
* label="key2">value2</key>......</word><word><key
* label="key1">value1</key><key
* label="key2">value2</key>......</word></words>
*
* @param list
* @return
* @throws Exception
* @author chengpp
* @date 2014-11-20 下午4:57:35
*
*/
public String list2Xml(List<String> list) throws Exception {
Document document = DocumentHelper.createDocument();
Element wordsElement = document.addElement("words");
int i = 0;
for (Object o : list) {
Element wordElement = wordsElement.addElement("word");
if (o instanceof Map) {
for (Object obj : ((Map<?, ?>) o).keySet()) {
Element keyElement = wordElement.addElement("key");
keyElement.addAttribute("label", String.valueOf(obj));
keyElement.setText(String.valueOf(((Map<?, ?>) o).get(obj)));
}
} else {
Element keyElement = wordElement.addElement("key");
keyElement.addAttribute("label", String.valueOf(i));
keyElement.setText(String.valueOf(o));
}
i++;
}
return doc2String(document);
}

/**
*
* @param document
* @return
*/
public String doc2String(Document document) {
String s = "";
try {
// 使用输出流来进行转化
ByteArrayOutputStream out = new ByteArrayOutputStream();
// 使用UTF-8编码
OutputFormat format = new OutputFormat(" ", true, "UTF-8");
XMLWriter writer = new XMLWriter(out, format);
writer.write(document);
s = out.toString("UTF-8");
} catch (Exception ex) {
ex.printStackTrace();
}
return s;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值