热门：网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置：.Net中文社区>> AJAX编程>>正文内容

仿百度搜索智能提示(纯JS实现)

发布时间：2010年03月04日点击数： 次佚名

项目中经常用到搜索智能提示，开源的象jQuery、yui等都有，但是觉得有点臃肿，于是自己用ajaxpro+JavaScript搞了一个可能还有若干个bug。相信新手应该用得着吧，老鸟就算了。

前台核心代码

  1. var arrList = new Array();//要搜索的数据 
  2.     var objouter, objInput, objInputId = "txtSearch";//控件ID 
  3.     var selectedIndex = -1, intTmp; 
  4.     //初始化 
  5.     function smanPromptList() { 
  6.         this.style = "overflow:hidden;width:393px;height:auto;background:#FFFFFF;border:1px solid #000000;font-size:14px;cursor:default;" 
  7.         if (arrList.constructor != Array) { 
  8.             alert('smanPromptList初始化失败:第一个参数非数组!'); 
  9.             return; 
  10.         } 
  11.         document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' onblur></div>"); 
  12.         document.write("<style type=\"text/css\">.sman_selectedStyle{background-Color:#3366CC;color:#FFFFFF}</style>"); 
  13.  
  14.         arrList.sort(function(a, b) { 
  15.             if (a.length > b.length) return 1; 
  16.             else if (a.length == b.length) return a.localeCompare(b); 
  17.             else return -1; 
  18.         }); 
  19.         objouter = document.getElementById("__smanDisp") //显示的DIV对象  
  20.         objInput = document.getElementById(objInputId);  //文本框对象 
  21.         if (objInput == null) { 
  22.             alert('smanPromptList初始化失败:没有找到"' + objInputId + '"文本框'); 
  23.             return; 
  24.         } 
  25.         objInput.onblur = function() { objouter.style.display = 'none'; } 
  26.         objInput.onkeyup = checkKeyCode; 
  27.         objInput.onfocus = checkAndShow; 
  28.     } 
  29.  
  30.     function getAbsoluteHeight(ob) { 
  31.         return ob.offsetHeight; 
  32.     } 
  33.     function getAbsoluteWidth(ob) { 
  34.         return ob.offsetWidth; 
  35.     } 
  36.     function getAbsoluteLeft(ob) { 
  37.         var s_el = 0, el = ob; 
  38.         while (el) { 
  39.             s_el = s_el + el.offsetLeft; 
  40.             el = el.offsetParent; 
  41.         }; 
  42.         return s_el; 
  43.     } 
  44.     function getAbsoluteTop(ob) { 
  45.         var s_el = 0, el = ob; 
  46.         while (el) { 
  47.             s_el = s_el + el.offsetTop; 
  48.             el = el.offsetParent; 
  49.         }; 
  50.         return s_el; 
  51.     } 
  52.     function outSelection(Index) { 
  53.         objInput.value = objouter.children[Index].innerText.Trim(); 
  54.         objouter.style.display = 'none'; 
  55.     } 
  56.     function divPosition() { 
  57.         objouter.style.top = getAbsoluteHeight(objInput) + getAbsoluteTop(objInput); 
  58.         objouter.style.left = getAbsoluteLeft(objInput); 
  59.         objouter.style.width = getAbsoluteWidth(objInput); 
  60.     } 
  61.     function chageSelection(isUp) { 
  62.         if (objouter.style.display == 'none') { 
  63.             objouter.style.display = ''; 
  64.         } 
  65.         else { 
  66.             if (isUp) 
  67.                 selectedIndex++; 
  68.             else 
  69.                 selectedIndex--; 
  70.         } 
  71.         var maxIndex = objouter.children.length - 1; 
  72.         if (selectedIndex < 0) { selectedIndex = 0; } 
  73.         if (selectedIndex > maxIndex) { selectedIndex = maxIndex; } 
  74.         if (selectedIndex == maxIndex) { selectedIndex = -1; } 
  75.  
  76.         for (intTmp = 0; intTmp <= maxIndex; intTmp++) { 
  77.             if (intTmp == selectedIndex) { 
  78.                 objouter.children[intTmp].className = "sman_selectedStyle"; 
  79.                 objInput.value = objouter.children[selectedIndex].innerText.Trim(); 
  80.             } 
  81.             else { 
  82.                 objouter.children[intTmp].className = ""; 
  83.             } 
  84.         } 
  85.     } 
  86.     function checkKeyCode() { 
  87.         var ie = (document.all) ? true : false 
  88.         if (ie) { 
  89.             var keyCode = event.keyCode 
  90.             if (keyCode == 40 || keyCode == 38) { 
  91.                 var isUp = false 
  92.                 if (keyCode == 40) 
  93.                     isUp = true; 
  94.                 chageSelection(isUp) 
  95.             } 
  96.             else if (keyCode == 13) { 
  97.                 outSelection(selectedIndex); 
  98.             } 
  99.             else { 
  100.                 checkAndShow(); 
  101.             } 
  102.         } 
  103.         else { 
  104.             checkAndShow(); 
  105.         } 
  106.         divPosition(); 
  107.     } 
  108.  
  109.     function checkAndShow() { 
  110.         var strInput = objInput.value.Trim(); 
  111.         if (strInput != "") { 
  112.             divPosition(); 
  113.             selectedIndex = -1; 
  114.             arrList.length = 0; 
  115.             objouter.innerHTML = ""; 
  116.             //=======================这里修改数据================================ 
  117.             var result = WebApplicationTestDiv.WebForm11.GetArray(strInput).value; 
  118.             //=================================================================== 
  119.             var data = eval('(' + result + ')'); 
  120.             for (var j = 0; j < data.length; j++) { 
  121.  
  122.                 arrList[j] = data[j]; 
  123.             } 
  124.  
  125.             for (intTmp = 0; intTmp < arrList.length; intTmp++) { 
  126.                 for (i = 0; i < arrList[intTmp].length; i++) { 
  127.                     if (arrList[intTmp].substr(i, strInput.length).toUpperCase() == strInput.toUpperCase()) { 
  128.                         addOption(arrList[intTmp], strInput); 
  129.                     } 
  130.                     if (objouter.childNodes.length >= 10) { 
  131.                         break; 
  132.                     } 
  133.                 } 
  134.             } 
  135.             if (objouter.childNodes.length > 0) { 
  136.                 objouter.innerHTML += "<div style=\"width:395px;height:22px;text-align:right;color:Blue;text-decoration:underline;cursor:pointer;\">关闭</div>"; 
  137.             } 
  138.             objouter.style.display = ''; 
  139.         } 
  140.         else { 
  141.             objouter.style.display = 'none'; 
  142.         } 
  143.     } 
  144.     //显示搜索的数据并关键字涂色 
  145.     function addOption(value, keyw) { 
  146.         var v = value.replace(keyw, "<b><font color=\"red\">" + keyw + "</font></b>"); 
  147.         objouter.innerHTML += "<div style=\"width:395px;height:22px\" onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('" + objInputId + "').value='" + value + "'\">" + v + "</div>" 
  148.     } 
  149.     String.prototype.Trim = function() { 
  150.         return this.replace(/(^\s*)|(\s*$)/g, ""); 
  151.     } 
  152.     smanPromptList(); 

后台核心代码：

  1. [AjaxPro.AjaxMethod] 
  2.         public string GetArray(string name) 
  3.         { 
  4.             try 
  5.             { 
  6.                 List<string> list = new List<string>(); 
  7.                 #region 
  8.                 list.Add("1"); 
  9.                 list.Add("12"); 
  10.                 list.Add("123"); 
  11.                 list.Add("1234"); 
  12.                 list.Add("12345"); 
  13.                 list.Add("123456"); 
  14.                 list.Add("1234567"); 
  15.                 list.Add("12345678"); 
  16.                 list.Add("123456789"); 
  17.                 list.Add("9876543210"); 
  18.                 list.Add("987654321"); 
  19.                 list.Add("98765432"); 
  20.                 list.Add("9876543"); 
  21.                 list.Add("987654"); 
  22.                 list.Add("98765"); 
  23.                 list.Add("9876"); 
  24.                 list.Add("987"); 
  25.                 list.Add("98"); 
  26.                 list.Add("9"); 
  27.                 list.Add("1111222"); 
  28.                 list.Add("1sdfsdf.comdos32.cn"); 
  29.                 list.Add("111222.comdos32.cn"); 
  30.                 list.Add("a11sdafs.netdos32.cn"); 
  31.                 list.Add("b22dsafsdfdos32.cn"); 
  32.                 list.Add("c333asdfsadfdos32.cn"); 
  33.                 list.Add("4444dsafasdfdos32.cn"); 
  34.                 list.Add("dddsfddsafdsafdos32.cn"); 
  35.                 list.Add("121213dsafsdafdos32.cn"); 
  36.                 list.Add("43213asdfadsfdos32.cn"); 
  37.                 list.Add("dsa3121dasf3dos32.cn"); 
  38.                 list.Add("a213dos32.cn"); 
  39.                 list.Add("323313dos32.cn"); 
  40.                 list.Add("3213dos32.cn"); 
  41.                 list.Add("32213dos32.cn"); 
  42.                 list.Add("dsfsdddddos32.cn"); 
  43.                 list.Add("ds911dfsfddos32.cn"); 
  44.                 list.Add("ffdafddos32.cn"); 
  45.                 list.Add("杨澜"); 
  46.                 list.Add("杨扬"); 
  47.                 list.Add("杨白劳"); 
  48.                 list.Add("杨钰莹"); 
  49.                 list.Add("杨百万"); 
  50.                 list.Add("杨一洋"); 
  51.                 list.Add("杨丞琳"); 
  52.                 list.Add("杨一尔"); 
  53.                 list.Add("杨二尔"); 
  54.                 #endregion 
  55.                 List<string> l1 = list.FindAll(delegate(string ss) { return ss.Contains(name); }); 
  56.                 string str = "["; 
  57.                 foreach (string s in l1) 
  58.                 { 
  59.                     str += "\"" + s + "\"" + ","; 
  60.                 } 
  61.                 str = str.TrimEnd(',') + "]"; 
  62.                 return str; 
  63.             } 
  64.             catch (Exception ex) 
  65.             { 
  66.                 throw ex; 
  67.             } 
  68.         } 

效果图如下：

随机文章推荐

本站热点业务

更多模板/案例展示

热门推荐

最近更新

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作
本站部份资源来于互联网,只供学习之用,不得用于商业,如有侵犯版权请联系告知,本站将第一时间删除!
copyright © 2008-2010 .Net中文社区 ASPXCS.NET™.All Rights Reserved 滇ICP备08102132号