js 自动提示功能(可与java连接后台使用)_js满足条件时提醒-CSDN博客

本文链接：https://blog.csdn.net/sessionsong/article/details/7858951

写这个是因为在做项目的时候需要用到自动提示这个功能。自我感觉学的还行，就拿出来献丑了。</span>

要是有不妥的地方，请大家指点。

功能效果图：

=====================================================================================

下面是源码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js 自动提示功能(可与java连接后台使用)</title>
<style type="text/css">

</style>


<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
var showIndex = -1;
var topa =0;
var oldSearch = null;
// 提示信息表，根据用户输入的字符在这个表中查找
var messages = ["你好","green","blue","magenta","yellow","ivory","darkmagenta","cornfloewrblue","css","china","connection1","yellow","ivory","darkmagenta","cornfloewrblue","css","china","connection1","yellow","ivory","darkmagenta","cornfloewrblue","css","china","connection1"];
messages.sort();

String.prototype.Trim = function(){
    return this.replace(/(^\s*)|(\s*$)/g, "");
}
// 键盘事件
document.onkeyup = function(event){
    // 兼容 Mozilla Firefox
    if (null == event) {
        event = window.event;
    }
    if (event.keyCode == 13 || event.keyCode == 38 || event.keyCode == 40) {
        keyThings(event.keyCode);
    }
}

function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].eqSN;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");

}

function clear(){
//清除提示内容
$("#colors_ul").remove();
$("#popup").removeClass('show');

}

function mouseover(obj1) {
   showIndex = obj1.id;
   var obj = $('#colors_ul li');

   obj.not(showIndex).removeClass('mouseOver');
   obj.eq(showIndex).addClass('mouseOver');
}

function mouseclick(obj) {
   oInputField.value = obj.innerHTML;
    clear();
   showIndex = -1;
}

function setResults(the_colors){
//显示提示框，传入的参数即为匹配出来的结果组成的数组
clear(); //每输入一个字母就先清除原先的提示，再继续
oPopDiv.className = "show";
var html = "<ul id='colors_ul'>";
for(var i=0;i<the_colors.length;i++){
       html +="<li οnmοuseοver='mouseover(this)' οnclick='mouseclick(this)' id =" + i +" >";
      html+=the_colors[i]+"</li>";
}
html +="</ul>";
// alert($(html).html());
$('#popup').append($(html));
if (the_colors.length > 10) {
    $("#colors_ul").css({"height":"150px","overflow-y":"scroll"});
}
}

function findResults(){

   initVars(); //初始化变量
   var value = oInputField.value.Trim();

   if(value.length > 0){
       if (oldSearch == null || oldSearch != value) { //搜索条件变化了，重新搜索

          var aResult = new Array(); //用于存放匹配结果
          for(var i=0;i<messages.length;i++) {//从信息表中找匹配的信息
           //必须是从单词的开始处匹配
              if(messages[i].indexOf(value) == 0) {
                  aResult.push(messages[i]); //压入结果
               }
          }
          if(aResult.length>0) { //如果有匹配的颜色则显示出来
           setResults(aResult);
           } else {    //否则清除，用户多输入一个字母
           clear(); //就有可能从有匹配到无，到无的时候需要清除
           }
          showIndex = -1;
          oldSearch = value;
      } else { // end if (oldSearch == null || oldSearch != value)
      //搜索条件未发生变化，不需要重新搜索。
      }
   } else { // end if(value.length > 0){
       setResults(messages);
       oldSearch = value;
   }
}

function getAll () {
   initVars();
   if (oInputField.value.Trim().length > 0) {
        findResults();
   } else {
       setResults(messages);
   }
}

function keyThings(key){

//   clear();
   var obj = $('#colors_ul li');
   var len = $('#colors_ul li').length;
   var colors_ul = $('#colors_ul');
   // enter
   if (key == 13) {
   if (showIndex != -1) {
   $("#form1 :input[name=eqSN]").val(obj.eq(showIndex).html());
   }
   clear();
   showIndex = -1;
   }
   // up
   if (key == 38) {
       if(len > 0){
           showIndex--;
           if(showIndex < 0){
               showIndex = len - 1;
               topa = showIndex*15;
           }
           obj.not(showIndex).removeClass('mouseOver');
           obj.eq(showIndex).addClass('mouseOver');
               if(obj.eq(showIndex).position().top >= 150){
                   topa = (showIndex+1)*15 - 150;
                   colors_ul.scrollTop(topa);
               };
       }
   }
       // down
   if (key == 40) {
       if(len > 0){
           showIndex++;
           if(showIndex >= len){
               showIndex = 0;
               topa =0;
           }
           obj.not(showIndex).removeClass('mouseOver');
           obj.eq(showIndex).addClass('mouseOver');
           if(obj.eq(showIndex).position().top >= 150){
               topa+=15;
               colors_ul.scrollTop(topa);
           };
       }
   }

}
</script>
</head>

<body>
   <form method="post" name="myForm1" id="form1" οnkeypress="if(event.keyCode==13){return false;}">
           <input type="text" name="eqSN" id ="eqSN" οnkeyup="findResults()" οnclick="getAll()" autocomplete="off" /> 输入con...可看见效果
               <div id="popup"> 
               </div>
   </form>


<p style="margin-top:200px;">
   通过js实现自动提示的功能，不需要用户一个一个的去输入。输入开头的几个字母，就会自动到提示信息表(messages)中去查询。列出符合要求的信息<br />
   这个还实现了滚动条/上下键选择，鼠标点击等一些便于用户操作的小功能。<br /><br />
   还可以与后台联动。我用的是java语言实现的。很简单，<br />
   1. 把这个页面转为jsp页面。<br />
   2. 改变messages的值。通过el表达式给messages赋值 eg：${eqSNList}<br />

</p>
<p>
   可在IE8 ,firefox 14.0.1, chrom 10.0. 等浏览器上成功运行。样式有些问题。
</p>
</body>
</html>