请问，jquery怎么控制文本框自动补全

陈丽莉

本帖最后由李希鹏于 2013-4-10 08:12 编辑

RT，模仿搜索引擎

王怀亮 · 王怀亮

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script src="js/advance/jquery.js" type="text/javascript"></script>
<script src="js/advance/test.js" type="text/javascript"></script>
<style>
body
{
font-family:Arial;
font-size:14px;
padding:0px;
margin:10px;
}
.txt1
{
/* 用户输入框的样式 */
width:200px;
}
#popup
{
/* 提示框div块的样式 */
position:absolute;
left:80px;
top:32px;
width:204px;
/*border:solid 1px black;*/
color:#004a7e;
}
#popup.show1{
/* 显示提示框的边框 */
border:1px solid #004a7e;
}
ul{
list-style:none;
margin:0px; padding:0px;
color:#004a7e;
}
li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="con">
自动补全：<input id="txt1" type="text" class ="txt1" onkeyup="findcon();"/>
</div>
<div id="popup">
<ul id="con_ul" class="show1"></ul>
</div>
<div>
</div>
</form>
</body>
</html>

复制代码

JS代码：

var hightlight =-1;
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oconUl;
function initVars(){
//初始化变量
oInputField = $("#txt1");
oPopDiv = $("#popup");
oconUl = $("#con_ul");
}
function clearcon(){
//清除提示内容
oconUl.empty();
oPopDiv.removeClass("show");
}
function setcon(the_con){
//显示提示框，传入的参数即为匹配出来的结果组成的数组
clearcon(); //每输入一个字母就先清除原先的提示，再继续
oPopDiv.addClass("show");
for(var i=0;i<the_con.length;i++)
//将匹配的提示结果逐一显示给用户
oconUl.append($("<li>"+the_con[i]+"</li>"));
oconUl.find("li").click(function(){
oInputField.val($(this).text());
clearcon();
}).hover(
function(){$(this).addClass("mouseOver");},
function(){$(this).removeClass("mouseOver");}
);
}
function findcon(event){
initVars(); //初始化变量
var myEvent = event || window.event;
var keycode = myEvent.keyCode; //获取键盘键值
if ((keycode >= 65 && keycode <= 90) || keycode==8 || keycode == 46) {
if(oInputField.val().length > 0){
//获取异步数据
var url="handler/test.ashx?parms="+oInputField.val();
$.get(url,function(data){
var aResult = new Array();
if(data.length > 0){
aResult = data.split(",");
setcon(aResult); //显示服务器结果
}
else
clearcon();
});
}
else{
clearcon(); //无输入时清除提示框（例如用户按del键）
hightlight = -1
}
}else if(keycode==38||keycode==40){ //如果输入的是向上向下
if(keycode==38){
//向上
var autoNodes = oconUl.find("li");
if (hightlight != -1 ){
//把高亮节点恢复
autoNodes.eq(hightlight).removeClass("mouseOver");
hightlight--;
}else{
hightlight = autoNodes.length - 1
}
if(hightlight == -1){
//如果到顶把高亮移动到最后
hightlight = autoNodes.length - 1;
};
autoNodes.eq(hightlight).addClass("mouseOver");
}
if(keycode==40){
//向下
var autoNodes =oconUl.find("li");
if (hightlight != -1 ){
//把高亮节点恢复
autoNodes.eq(hightlight).removeClass("mouseOver");
}
hightlight++;
if(hightlight == autoNodes.length){
//如果到顶把高亮移动到最后
hightlight = 0;
}
autoNodes.eq(hightlight).addClass("mouseOver");
}
}else if (keycode==13){
//如果输入的是回车
if(hightlight!=-1){
//取出节点的内容
var context = oconUl.find("li").eq(hightlight).text();
clearcon();
hightlight = -1;
oInputField.val(context);
}
}
}

复制代码

李希鹏 · 李希鹏

王怀亮发表于 2013-4-9 21:59
HTML代码：JS代码：

:handshake
有个思路就行了

帐号		自动登录	找回密码
密码			加入黑马

请问，jquery怎么控制文本框自动补全

评分

2 个回复

评分