jquery自动补全技术
******************jsp
<script type="text/javascript" src=\'#\'" %>js/jquery.js"></script>
<script type="text/javascript" src=\'#\'" %>js/jqueryauto.js"></script>
<form action="findAllSongs.action" method="post">
<span class="STYLE10">歌手:</span>
<input class="textfield" size="15" id="word" name="singerName"
value="<s:property value="singerName"/>" />
<span class="STYLE10">歌曲:</span>
<input class="textfield" size="15" id="word1" name="songName"
value="<s:property value="songName"/>" />
<input class="button" type="submit" value="搜索"
name="submitSearch" />
<div id='auto'></div>
<div id='auto1'></div>
</form>
*************************jqueryauto.js
//表示当前高亮的节点
var highlightindex = -1;
var timeoutId;
$(document).ready(function() {
var wordInput = $("#word");
var word1Input = $("#word1");
var wordInputOffset = wordInput.offset();
var word1InputOffset = word1Input.offset();
//自动补全框最开始应该隐藏起来
$("#auto").hide().css("border","1px red solid").css("position","absolute")
.css("top",wordInputOffset.top + wordInput.height() + 5 + "px")
.css("left",wordInputOffset.left + "px").width(wordInput.width() + 30);
$("#auto1").hide().css("border","1px red solid").css("position","absolute")
.css("top",word1InputOffset.top + word1Input.height() + 5 + "px")
.css("left",word1InputOffset.left + "px").width(word1Input.width() + 30);
//给文本框word添加键盘按下并弹起的事件
wordInput.keyup(function(event) {
//处理文本框中的键盘事件
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//如果输入的是字母，应该将文本框中最新的信息发送给服务器
//如果输入的是退格键或删除键，也应该将文本框中的最新信息发送给服务器
if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46||keyCode==32) {
//1.首先获取文本框中的内容
var wordText = $("#word").val();
var autoNode = $("#auto");
if (wordText != "") {
//2.将文本框中的内容发送给服务器段
//alert(wordText);
clearTimeout(timeoutId);
//对于服务器交互延迟300ms,避免快速打字造成频繁请求
timeoutId = setTimeout(function(){
$.ajax({url:"findSingerByPartWord.action",
type:"post",
dataType:"xml",
data:{word:wordText},
success:function(data){//将dom对象data转换成JQuery的对象
var jqueryObj = $(data);
//找到所有的word节点
var wordNodes = jqueryObj.find("word");
//遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中
//需要清空原来的内容
autoNode.html("");
wordNodes.each(function(i) {
//获取单词内容
var wordNode = $(this);
//新建div节点，将单词内容加入到新建的节点中
//将新建的节点加入到弹出框的节点中
var newDivNode = $("<div style='font-size:11px'>").attr('id',i);
newDivNode.html(wordNode.text()).appendTo(autoNode);
//增加鼠标进入事件，高亮节点
newDivNode.mouseover(function(){
//将原来的高亮节点取消
if(highlightindex!=-1){
$("#auto").children('div').eq(highlightindex)
.css("background-color","white");
}
//记录高亮节点位置
highlightindex = $(this).attr('id');
$(this).css("background-color","red");
});
//增加鼠标移出事件，取消节点高亮
newDivNode.mouseout(function(){
$(this).css("background-color","white");
});
//增加鼠标点击事件，可以进行补全
newDivNode.click(function(){
//取出高亮节点的文本内容
var comText = $(this).text();
$("#auto").hide();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#word").val(comText);
});
});
//如果服务器段有数据返回，则显示弹出框
if (wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
//弹出框隐藏的同时，高亮节点索引值也制成-1
highlightindex = -1;
}}});
},300);
} else {
autoNode.hide();
highlightindex = -1;
}
} else if (keyCode == 38 || keyCode == 40) {
//如果输入的是向上38向下40按键
if (keyCode == 38) {
//向上
var autoNodes = $("#auto").children("div")
if (highlightindex != -1) {
//如果原来存在高亮节点，则将背景色改称白色
autoNodes.eq(highlightindex).css("background-color","white");
highlightindex--;
} else {
highlightindex = autoNodes.length - 1;
}
if (highlightindex == -1) {
//如果修改索引值以后index变成-1，则将索引值指向最后一个元素
highlightindex = autoNodes.length - 1;
}
//让现在高亮的内容变成红色
autoNodes.eq(highlightindex).css("background-color","red");
}
if (keyCode == 40) {
//向下
var autoNodes = $("#auto").children("div")
if (highlightindex != -1) {
//如果原来存在高亮节点，则将背景色改称白色
autoNodes.eq(highlightindex).css("background-color","white");
}
highlightindex++;
if (highlightindex == autoNodes.length) {
//如果修改索引值以后index变成-1，则将索引值指向最后一个元素
highlightindex = 0;
}
//让现在高亮的内容变成红色
autoNodes.eq(highlightindex).css("background-color","red");
}
} else if (keyCode == 13) {
//如果输入的是回车
//下拉框有高亮内容
if (highlightindex != -1) {
//取出高亮节点的文本内容
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#word").val(comText);
} else {
//下拉框没有高亮内容
//alert("文本框中的[" + $("#word").val() + "]被提交了");
$('#word').hide();
//让文本框失去焦点
$('#word').get(0).blur();
}
}
});
//给文本框word添加键盘按下并弹起的事件
word1Input.keyup(function(event) {
//处理文本框中的键盘事件
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//如果输入的是字母，应该将文本框中最新的信息发送给服务器
//如果输入的是退格键或删除键，也应该将文本框中的最新信息发送给服务器
if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46||keyCode==32) {
//1.首先获取文本框中的内容
var wordText = $("#word1").val();
var autoNode = $("#auto1");
if (wordText != "") {
//2.将文本框中的内容发送给服务器段
//alert(wordText);
clearTimeout(timeoutId);
//对于服务器交互延迟300ms,避免快速打字造成频繁请求
timeoutId = setTimeout(function(){
$.ajax({url:"findSongNameByPartWord.action",
type:"post",
dataType:"xml",
data:{word:wordText},
success:function(data){//将dom对象data转换成JQuery的对象
var jqueryObj = $(data);
//找到所有的word节点
var wordNodes = jqueryObj.find("word");
//遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中
//需要清空原来的内容
autoNode.html("");
wordNodes.each(function(i) {
//获取单词内容
var wordNode = $(this);
//新建div节点，将单词内容加入到新建的节点中
//将新建的节点加入到弹出框的节点中
var newDivNode = $("<div style='font-size:11px'>").attr('id',i);
newDivNode.html(wordNode.text()).appendTo(autoNode);
//增加鼠标进入事件，高亮节点
newDivNode.mouseover(function(){
//将原来的高亮节点取消
if(highlightindex!=-1){
$("#auto1").children('div').eq(highlightindex)
.css("background-color","white");
}
//记录高亮节点位置
highlightindex = $(this).attr('id');
$(this).css("background-color","red");
});
//增加鼠标移出事件，取消节点高亮
newDivNode.mouseout(function(){
$(this).css("background-color","white");
});
//增加鼠标点击事件，可以进行补全
newDivNode.click(function(){
//取出高亮节点的文本内容
var comText = $(this).text();
$("#auto1").hide();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#word1").val(comText);
});
});
//如果服务器段有数据返回，则显示弹出框
if (wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
//弹出框隐藏的同时，高亮节点索引值也制成-1
highlightindex = -1;
}}});
},300);
} else {
autoNode.hide();
highlightindex = -1;
}
} else if (keyCode == 38 || keyCode == 40) {
//如果输入的是向上38向下40按键
if (keyCode == 38) {
//向上
var autoNodes = $("#auto1").children("div")
if (highlightindex != -1) {
//如果原来存在高亮节点，则将背景色改称白色
autoNodes.eq(highlightindex).css("background-color","white");
highlightindex--;
} else {
highlightindex = autoNodes.length - 1;
}
if (highlightindex == -1) {
//如果修改索引值以后index变成-1，则将索引值指向最后一个元素
highlightindex = autoNodes.length - 1;
}
//让现在高亮的内容变成红色
autoNodes.eq(highlightindex).css("background-color","red");
}
if (keyCode == 40) {
//向下
var autoNodes = $("#auto1").children("div")
if (highlightindex != -1) {
//如果原来存在高亮节点，则将背景色改称白色
autoNodes.eq(highlightindex).css("background-color","white");
}
highlightindex++;
if (highlightindex == autoNodes.length) {
//如果修改索引值以后index变成-1，则将索引值指向最后一个元素
highlightindex = 0;
}
//让现在高亮的内容变成红色
autoNodes.eq(highlightindex).css("background-color","red");
}
} else if (keyCode == 13) {
//如果输入的是回车
//下拉框有高亮内容
if (highlightindex != -1) {
//取出高亮节点的文本内容
var comText = $("#auto1").hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#word1").val(comText);
} else {
//下拉框没有高亮内容
//alert("文本框中的[" + $("#word").val() + "]被提交了");
$('#word1').hide();
//让文本框失去焦点
$('#word1').get(0).blur();
}
}
});
//给按钮添加事件，表示文本框中的数据被提交
$("input[type='button']").click(function() {
alert("文本框中的[" + $("#word").val() + "]被提交了");
});
$.ajax({
type: "POST",
url: "toRecommendList.action",
dataType : "html",
success: function(html) {
// var recommendobj = $(xml).find("table");
if( $('#recommend').get(0)){
$('#recommend').get(0).innerHTML=html;
}
}
});
*********************struts.xml配置文件
<action name="findSongNameByPartWord" class="findSongsAction" method="findSongNameByPartWord">
<result name="success">/sys/song/result_songname.jsp</result>
</action>
<action name="findSingerByPartWord" class="findSongsAction" method="findSingerByPartWord">
<result name="success">/sys/song/result_singer.jsp</result>
</action>
***************通过<work></word>异步传值 result_singer.jsp ，result_songname.jsp
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<%@taglib uri="/struts-tags" prefix="s"%>
<words>
<s:iterator value="words" >
<word><s:property value="singerName"/></word>
</s:iterator>
</words>
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<%@taglib uri="/struts-tags" prefix="s"%>
<words>
<s:iterator value="words" >
<word><s:property value="songName"/></word>
</s:iterator>
</words>
*******************action 调用dao层或service层模糊查询的的方法
package com.chinaGPS.song.action.sysmanage;
import java.util.List;
import com.chinaGPS.song.service.SingerService;
import com.chinaGPS.song.service.SongInfoService;
import com.opensymphony.xwork2.ActionSupport;
public class FindSongsAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private String word;
private List<String> words;
private SongInfoService songinfoservice;
private String singerName;
private String songName;
private SingerService singerService;
public SingerService getSingerService() {
return singerService;
}
public void setSingerService(SingerService singerService) {
this.singerService = singerService;
}
public String getSingerName() {
return singerName;
}
public void setSingerName(String singerName) {
this.singerName = singerName;
}
public String getSongName() {
return songName;
}
public void setSongName(String songName) {
this.songName = songName;
}
public SongInfoService getSonginfoservice() {
return songinfoservice;
}
public void setSonginfoservice(SongInfoService songinfoservice) {
this.songinfoservice = songinfoservice;
}
public String getWord() {
return word;
}
public void setWord(String word) {
this.word = word;
}
public List<String> getWords() {
return words;
}
public void setWords(List<String> words) {
this.words = words;
}
//根据部分单词查找歌手匹配单词（智能友好提示）
public String findSingerByPartWord(){
//words = segsecSongDao.findSingerBypartWord(word);
words=singerService.findSingerByPartWord(word);
return SUCCESS;
}
//根据部分单词查找歌名匹配单词（智能友好提示）
public String findSongNameByPartWord(){
//words = segsecSongDao.findSongNameBypartWord(word);
words=songinfoservice.findSongNameBypartWord(word);
return SUCCESS;
}
}
本文出自 “java爱好者” 博客，转载请与作者联系！