搜索提示

iteye_6992

于 2013-01-22 15:26:52 发布

阅读量111

点赞数

分类专栏： jquery 文章标签： jquery ViewUI

jquery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!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>无标题文档</title>
<script type="text/javascript" src="file:///C|/Documents and Settings/Administrator/桌面/jquery-1.8.3.js"></script>
<style>
.autosearch{
    border:1px solid #999;
width:160px;
position:relative;
}
.autosearch input{
    border:none;
padding:3px;
font-size:12px;
color:#666;
width:154px
   }
   .liNormal, .liHover{ font-size:12px; padding-left:5px; height:18px; line-height:18px; overflow: hidden;}
   .liHover{ background:#EEE}
</style>
</head>

* 搜索提示

* **made by keimon**

* *****2012-01-22*****

*/
var jsonData = [{"id":"453","value":"2AM"},{"id":"955","value":"33333"},{"id":"554","value":"37°"},{"id":"152","value":"3E(? Ш E)"},{"id":"347","value":"4YOU"},{"id":"75","value":"5th STREET"},{"id":"166","value":"7princess"},{"id":"953","value":"<>b<\/b>"},{"id":"24","value":"A205"},{"id":"80","value":"ABS"},{"id":"839","value":"Accoona(雅珂妮)"},{"id":"949","value":"测试一下"},{"id":"950","value":"测试一下"},{"id":"915","value":"淑女屋"},{"id":"295","value":"莎玛斯"},{"id":"130","value":"蓝色多瑙河"},{"id":"162","value":"蜜丝佛陀(MAX FACTOR)"},{"id":"105","value":"郑明明-菲莲"},{"id":"548","value":"酷比熊"},{"id":"47","value":"金加瀛"},{"id":"415","value":"金格尔"},{id":"369","value":"马克西姆"},{"id":"195","value":"～H2O+(水芝澳)"}];

// input框中显示或隐藏默认文字；
$("#a").focus(function(){
    if($(this).val()==this.defaultValue){
   $(this).val("");
}
})
$("#a").blur(function(){
    if($(this).val()==""){
   $(this).val(this.defaultValue);
}
})

//input框搜索提示；
function test(inputObj,jsonData){
   // 设置元素样式
function setStyle(elem,prop){
//      var old = {};
      for(var i in prop){
//          old[i]=elem.style[i];
          elem.style[i] = prop[i];
      }
    // return old;
}

//对json数据的处理，jsondata是json数据，inputValue是json的value中所包含的值，maxLen是获得数据的最大值；
function getDataArr(jsonData,inputValue,maxLen){
     var data = eval(jsonData);
     var arr = [];
     if(inputValue==""){
       return;
     }
     for(var i=0; i<data.length; i++){
       if(jsonData[i].value.indexOf(inputValue)!=-1){
      arr[arr.length]=jsonData[i];
      if(arr.length==20){
        return arr;
      }
    }
     }
     return arr;
   }

   //inputObj是传入进来的input的jquery对象
   var targetInput = inputObj;
/*
   var hiddenObj = document.createElement("input");
   hiddenObj.type="hidden";
   hiddenObj.id = "hidden"+targetInput.get(0).id;
   hiddenObj.name = hiddenObj.id;
*/
   var InputOriginalVal = targetInput.val();
   var parentDiv = targetInput.get(0).parentNode;
// parentDiv.appendChild(hiddenObj);

   var divWidth = $(parentDiv).width();
   var divHeight = $(parentDiv).height();

   var ulObj = document.createElement("ul");
   ulObj.id = "ul"+ targetInput.get(0).id;
   parentDiv.appendChild(ulObj);
   var ulStyle = {
      position: 'absolute',
      top: divHeight,
      left: -1 + 'px',
      margin: 0,
      padding: '5px 0 5px 0',
      width: divWidth,
      height: 'auto',
      zIndex: '99999',
      border: '1px solid #999',
      cursor: 'pointer',
      display: 'none',
      background:'#fff'
   };

   setStyle(ulObj,ulStyle);
   $(ulObj).css("width",divWidth+"px"); //兼容ff；
   //键盘上上下左右，tab，回车键的操作
   targetInput.keydown(function(e){
      var keyCode = e.keyCode;
       //输入不是37、38、39、40、13
      if (keyCode !== 37 && keyCode !== 38 && keyCode !== 39 && keyCode !== 40 && keyCode !== 9 && keyCode !== 13) {
                // 鼠标释放200ms后，创建下拉区域，并将匹配项放在下拉区域中。
         window.setTimeout(function () {
            mainFun(e)
         }, 200)
      }
      // 37为向左箭头，38为向上箭头，39为向右箭头，40为向下箭头
      if (keyCode == 37 || keyCode == 38 || keyCode == 39 || keyCode == 40) {
         var liArr = ulObj.childNodes;
         var liLen = liArr.length;
         if(liLen==0){
         return;
      }
         if(!$('.liHover')[0]){
         $(liArr[0]).addClass("liHover");
         showInputVal(targetInput,liArr,0)
      return;
         }
       var highObj = $(".liHover")[0];
         var highIndex = $(liArr).index($(highObj));
      // 向左、向上箭头
         if (keyCode == 37 || keyCode == 38) {
         if(highIndex==0){
         return;
      }
      $(liArr).removeClass("liHover");
      $(liArr[highIndex-1]).addClass("liHover");
         showInputVal(targetInput,liArr,highIndex-1)
      }
     // 向右、向下箭头
         if (keyCode == 39 || keyCode == 40) {
         if(highIndex==liLen-1){
         return;
      }
      $(liArr).removeClass("liHover");
      $(liArr[highIndex+1]).addClass('liHover');
      showInputVal(targetInput,liArr,highIndex+1)
      }
      }
      if (keyCode == 9 || keyCode == 13) {
         $(ulObj).hide()
      }
})

//input在用键盘输入时的事件
function mainFun(e){
     var inputVal = targetInput.val();
     var resultArr = getDataArr(jsonData,inputVal,20);
     var liStr = "";
     if(resultArr!=null){
       var arrLength = resultArr.length;
    for(var i=0; i<arrLength; i++){
       liStr += '<li hidid=' + resultArr[i].id + ' style="padding-left:5px; height:18px; line-height:18px; overflow:hidden; font-size:12px" id=' + 'li' + targetInput.get(0).id + i + '>' + resultArr[i].value + '</li>';
       }
     }
$(ulObj).html(liStr);
     $(ulObj).show();
     var liArr = ulObj.childNodes;
     var liLen = liArr.length;
     $(liArr).mouseenter(function(){
       $(liArr).removeClass("liHover");
    $(this).addClass("liHover");
    })
}

//根据提示的信息（ul中内容），显示在input中；
function showInputVal(inputObj,liArr,index){
    var liVal = $(liArr[index]).html();
    inputObj.val(liVal);
}

targetInput.keyup(function(){
    if(targetInput.val()==""||targetInput.val()==InputOriginalVal){
      $(ulObj).hide();
    }
})

//页面点击时的进行的处理
$(document).click(function(e){
    var target = e.target;
    var targetName = target.nodeName;
    //alert(targetName.toLowerCase())
    if(targetName.toLowerCase()!="li"){
       $(ulObj).hide();
    }else{
       var liArr = ulObj.childNodes;
       var highObj = $(".liHover")[0];
    var highIndex = $(liArr).index($(highObj));
       showInputVal(targetInput,liArr,highIndex);
       $(ulObj).hide();
    }
})
}

var a = $("#a")
test(a,jsonData)

</script>
</body>
</html>

iteye_6992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搜索提示

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;m
复制链接

扫一扫

专栏目录