jquery 关键字自动匹配补全精心修改

2010-04-19 16:41:20 by 【6yang】, 353 visits, 收藏 | 返回

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 关键字自动匹配补全精心修改</title><script src="http://www.jquery123.com/js/jquery-1.3.2.min.js"></script>
<script language="javascript">
/**
* @author 6yang
* @param hightlight 记录高亮节点的位置
* @param timeout 查询延时时间
* @param wordHeight=15 word 输入框的高度一定要跟css定义的一样
* @param wordWidth=160 word 输入框的宽度一定要跟css定义的一样
* @param
* @param
* 有许多需要修改的代码。可以提取出来更灵活的应用
*/

var hightlight = -1 ;
var timeout;
var wordHeight=15;   //修改css的时候要修改这里
var wordWidth=160;

$(document).ready( function(){
$("#showTip").hide();

//初始化word 与tip的位置
var offset = $("#word").offset();
    $("#tip").css("left",offset.left-1);   //1 输入框的宽度
$("#tip").css("top",offset.top+20);    //20 输入框的高度

$("#auto").css("left",offset.left);   //1 输入框的宽度
$("#auto").css("top",offset.top+20);    //20 输入框的高度

$("#word").click(function(){
  showTip();
});

var obj = document.getElementById("friendName");
var offset = $("#word").offset();
$("#tip").css("left",offset.left);   //1 输入框的宽度

$("#word").keyup(function(event){
  //处理文本框的事件
  var myEvent = event || window.event;
  var keycode = myEvent.keyCode;   //获取键盘键值

  hiddenTip();

  if ((keycode >= 65 && keycode <= 90) || keycode==8 || keycode == 46) {

   var word = $("#word").val(); //取得文本框的内容
   if (word != "") {
    //与数据库交互
    //返回数据
    //回调方法
    clearTimeout(timeout);
    setTimeout(function(){
     addword();
     $("#auto").show();
    }
    ,500);
   }else {
    $("#auto").hide();
    hightlight = -1
   }
  }else if(keycode==38||keycode==40){ //如果输入的是向上向下

   if(keycode==38){
   //向上
     var autoNodes = $("#auto").children("div");

      if (hightlight != -1 ){
      //把高亮节点恢复
      autoNodes.eq(hightlight).css("background-color","white");
    hightlight--;
      }else{
      hightlight = autoNodes.length - 1
      }

      if(hightlight == -1){
      //如果到顶把高亮移动到最后
      hightlight = autoNodes.length - 1;
      };
      autoNodes.eq(hightlight).css("background-color","red");
   }
   if(keycode==40){
   //向下
      var autoNodes = $("#auto").children("div");
      if (hightlight != -1 ){
      //把高亮节点恢复
      autoNodes.eq(hightlight).css("background-color","white");
      }
      hightlight++;
      if(hightlight == autoNodes.length){
      //如果到顶把高亮移动到最后
      hightlight = 0;
      }
      autoNodes.eq(hightlight).css("background-color","red");
   }
  }else if (keycode==13){
   //如果输入的是回车

   if(hightlight!=-1){
    //取出节点的内容
    var context = $("#auto").hide().children("div").eq(hightlight).text();
    hightlight = -1;
    $("#word").val(context);
   }else{
     alert('文本框的'+$("#word").val()+'被提交了');
     $("#auto").hide();
     //文本框失去焦点
     $("#word").get(0).blur();
   }

  }

});

$("input[type='button']").click(function(){
     alert('文本框的'+$("#word").val()+'被提交了');
})

})
function addword(){
//添加返回的数据
var i=0;
var node = $("#auto");
node.html("");
for (i; i < 9; i++) {
  var node1 = $("<div>");
  node1.html("<div class='clear Autolistcontent'><span class='fl wi1'><a href='http://www.6yang.net' title='辛苦的设计出来'><img src='kk.jpg' alt='aaa'></a></span><span class='fl wi2'><strong>" +"</strong>" +"</span><span class='fr wi3'>内容</span></div>").appendTo(node);
  node1.attr("id",i);
  node1.mousemove(function(){
  if(hightlight != -1){    //取消原来的高亮
   $("#auto").children("div").eq(hightlight).css("background-color","white");
  }
  hightlight = $(this).attr("id"); //添加现在的高亮
     $(this).css("background-color","red");

  });
  //增加click事件
  node1.click(function(){
   var context = $(this).text();
    hightlight = -1;
    $("#word").val(context);
   $("#auto").hide();
  })
}
}
function showTip() {
if($("#word").val()==""){
     $("#tip").fadeIn("fast");    //显示提示
}
}

function hiddenTip() {
$("#tip").fadeOut("fast"); //隐藏提示
}

function test(){
alert("1");
var aa = new Array();

}

</script>
<style type="text/css"> /*
* 查询结果
*/
.comp{
   border: 1px solid red;
   width:300px;
   position: absolute;

   display:none;
   background-color: white;
   z-index:4;
      }
/*
* 提示
*/
.tip{
position:absolute;
width: 300px;
display:none;
background-color: antiquewhite   ;
z-index:3;
}
/*
* 输入框
*/
#word{
width: 160px;
height:15px;
}

</style>
</head>
<body>
  一个自动补全的插件~~~~~~~~<input type="text" id="word" />
  <input type="button" value="提交" />
  <div id="auto" class="comp" ></div>
  <div id="tip" class="tip" >请输入随意的字母</div>
  <div ></div>
</body>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=719&cid=3

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 学习技术库

jquery 关键字自动匹配补全精心修改

图片原图

技术标签 TAGS

专业技术精选

首页 > 技术 > 学习技术库

jquery 关键字自动匹配 补全 精心修改

图片原图

jquery 关键字自动匹配补全精心修改