jquery 自动补全功能(附java调用例子)_jquery特效

jquery 自动补全功能(附java调用例子): 发布时间：2020-10-03编辑：脚本学堂

jquery 自动补全功能的实现代码，jquery实现表单数据的自动补全，常用于邮箱地址后缀的自动补全操作，jquery模拟键盘事件的例子学习。

jquery实现自动补全功能

代码：
$(function() {
// 自动补全
var maxcount = 0;// 表示他最大的值
var thisCount =0;// 初始化他框的位置
$("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; position: absolute;' id='autoTxt'></div>");
$("#sele").keyup(function(even) {
var v = even.which;
if (v == 38 || v == 40 || v == 13)// 当点击上下键或者确定键时阻止他传送数据
{
return;
}
var txt = $("#sele").val();//取得输入框的值
if (txt != "") {
//拼装数据
$.ajax({
url : "Birthday_autoCompletion",//从后台取得json数据
type : "post",
dataType : "json",
data : {"bir.userName" : txt
},
success : function(ls) {
var offset = $("#sele").offset();
$("#autoTxt").show();
$("#autoTxt").css("top", (offset.top + 30) + "px");
$("#autoTxt").css("left", offset.left + "px");
var Candidate = "";
maxcount = 0;//再重新得值
$.each(ls, function(k, v) {
Candidate += "<li id='" +maxcount+ "'>" + v + "</li>";
maxcount++;
}); // www.jb200.com
$("#autoTxt").html(Candidate);
$("#autoTxt li:eq(0)").css("background", "#A8A5A5");
//高亮对象
$('body').highLight();
$('body').highLight($("#sele").val());
event.preventDefault();
//当单击某个ＬＩ时反映
$("#autoTxt li").click(function(){
$("#sele").val($("#autoTxt li:eq("+this.id+")").text());
$("#autoTxt").html("");
$("#autoTxt").hide();
});
//移动对象
$("#autoTxt li").hover(function(){
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq("+this.id+")").css("background", "#A8A5A5");
thisCount=this.id;},function(){
$("#autoTxt li").css("background", "#FFFFFF");});
},
error : function() {
$("#autoTxt").html("");
$("#autoTxt").hide();
maxcount = 0;
}
});
} else {
$("#autoTxt").hide();
maxcount = 0;
$("#sestart").click();
}
});
//当单击body时则隐藏搜索值
$("body").click(function(){
$("#autoTxt").html("");
$("#autoTxt").hide();
thisCount=0;
});
// 写移动事件//上键３８下键４０确定键１３
$("body").keyup(function(even) {
var v = even.which;
if (v == 38)// 按上键时
{
if(thisCount!=0){//等于零时则证明不能上了。所以获得焦点
$("#sele").blur();
if(thisCount>0)
--thisCount;
else
thisCount=0;
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
}else{$("#sele").focus();}
} else if (v == 40) {// 按下键时
if(thisCount<maxcount-1)
{
$("#sele").blur();
++thisCount;
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
}
} else if (v == 13) {// 按确认键时
var tt=$("#"+thisCount).text();
if(tt!="")
{
$("#sele").val(tt);
$("#autoTxt").html("");
$("#autoTxt").hide();
}else
{
if($("#sele").val()!="")
$("#sestart").click();
}
} else {
if($("#autoTxt").html()!="")
{
$("#sele").focus();
thisCount=0;
}
}
});
});

jquery 自动补全功能

1.servlet中

复制代码代码示例:

public void doPost(HttpServletRequest request, HttpServletResponse response)

  throws ServletException, IOException {

    String word = request.getParameter("word");

  request.setAttribute("word", word);

  System.out.println("dd");

  request.getRequestDispatcher("testXml.jsp").forward(request, response);

 }

2.建一个xml文件(testXml.jsp)

复制代码代码示例:

<%@ page contentType="text/xml;charset=utf-8" language="java"%>

<words>

 <word>aafdfds</word>

 <word>afdgwe</word>

 <word>aewgsdf</word>

 <word>agwefsd</word>

 <word>aaafdsf</word>

 <word>afewtge</word>

 <word>bbsfa</word>

 <word>bbfsf</word>

 <word>bfsfs</word>

</words>

3.Html文件

复制代码代码示例:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./jQuery/css/test.css">
<script type="text/javascript" src="./jQuery/js/jquery.js"></script>
<script type="text/javascript" src="./jQuery/test/test_8.js"></script>
<style type="text/css">
div{
   table-layout: auto;
}
</style>
</head>
   
<body>
   <input type="text" id="word"/>
   <input type="button" value="提交"/>
   <div id="auto"></div>
</body>
</html>

4.建一个js文件(test_8.js)

复制代码代码示例:

var currIndex = -1;
$(function(){
var timeInterval;
var word = $("#word");
//设置样式
$("#auto").css("border","1px solid black")
.css("position","absolute")
.css("top",word.offset().top+word.height()+1+"px")
.css("left",word.offset().left+"px")
.css("width",word.width()+"px")
.hide();

//添加键盘事件
word.keyup(function(e){
var e = e || window.event;

//如查输入的是字母或退格或删除
if(e.keyCode >= 65 && e.keyCode <= 90 || e.keyCode == 8 || e.keyCode == 46){
var auto = $("#auto");
auto.html("");
auto.hide();
currIndex = -1;
var value = word.val();

//清除事件
clearTimeout(timeInterval);

if(value != ""){
//延迟发送
timeInterval = setTimeout(ajaxPost,500);
   }

}else if(e.keyCode == 38 || e.keyCode == 40){
//向上或向下

if(e.keyCode == 38){//向上
var divs = $("#auto > div");
if(currIndex != -1){
divs.eq(currIndex).css("background-color","white");
}
currIndex--;
if(currIndex == -1){
currIndex = divs.length - 1;
}
divs.eq(currIndex).css("background-color","red");
   }
   if(e.keyCode == 40){//向下
var divs = $("#auto > div");
if(currIndex != -1){
divs.eq(currIndex).css("background-color","white");
}
currIndex++;
if(currIndex == divs.length){
currIndex = 0;
}
divs.eq(currIndex).css("background-color","red");
   }
}else if(e.keyCode == 13){
   //回车
   //alert("dd");
   var divs = $("#auto > div");
   var value = divs.eq(currIndex).text();
   $("#word").val(value);
   $("#auto").hide();
   currIndex = -1;
}
});

$("input[type='button']").click(function(){
alert("文本框中的内容是："+word.val());
});
});

其它自动补全效果的代码：

上一篇：jquery特效代码：文本框搜索选项下拉选择效果
下一篇：jquery邮箱自动补全功能实例代码

与 jquery 自动补全功能(附java调用例子) 有关的文章

本文标题：jquery 自动补全功能(附java调用例子)
本页链接：http://www.jb200.com/article/30869.html

浏览排行

栏目分类

热点文章

jquery 自动补全功能(附java调用例子)