1. <!doctype html>
  2. <meta charset="utf-8">
  3. <style type="text/css">
  4.     body {
  5.         margin-left: 0px;
  6.         margin-top: 0px;
  7.         margin-right: 0px;
  8.         margin-bottom: 0px;
  9.     }
  10.  
  11.     .auto_hidden {
  12.         width: 204px;
  13.         border-top: 1px solid #333;
  14.         border-bottom: 1px solid #333;
  15.         border-left: 1px solid #333;
  16.         border-right: 1px solid #333;
  17.         position: absolute;
  18.         display: none;
  19.     }
  20.  
  21.     .auto_show {
  22.         width: 204px;
  23.         border-top: 1px solid #333;
  24.         border-bottom: 1px solid #333;
  25.         border-left: 1px solid #333;
  26.         border-right: 1px solid #333;
  27.         position: absolute;
  28.         z-index: 9999; /* 设置对象的层叠顺序 */
  29.         display: block;
  30.     }
  31.  
  32.     .auto_onmouseover {
  33.         color: #ffffff;
  34.         background-color: highlight;
  35.         width: 100%;
  36.     }
  37.  
  38.     .auto_onmouseout {
  39.         color: #000000;
  40.         width: 100%;
  41.         background-color: #ffffff;
  42.     }
  43. </style>
  44. <script language="javascript" type="text/javascript">
  45.     var $ = function (id) {
  46.         return "string" == typeof id ? document.getElementById(id) : id;
  47.     }
  48.     var Bind = function (object, fun) {
  49.         return function () {
  50.             return fun.apply(object, arguments);
  51.         }
  52.     }
  53.     function AutoComplete(obj, autoObj, arr) {
  54.         this.obj = $(obj); //输入框
  55.         this.autoObj = $(autoObj);//DIV的根节点
  56.         this.value_arr = arr; //不要包含重复值
  57.         this.index = -1; //当前选中的DIV的索引
  58.         this.search_value = ""; //保存当前搜索的字符
  59.     }
  60.     AutoComplete.prototype = {
  61.         //初始化DIV的位置
  62.         init: function () {
  63.             this.autoObj.style.left = this.obj.offsetLeft + "px";
  64.             this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
  65.             this.autoObj.style.width = this.obj.offsetWidth - 2 + "px";//减去边框的长度2px
  66.         },
  67.         //删除自动完成需要的所有DIV
  68.         deleteDIV: function () {
  69.             while (this.autoObj.hasChildNodes()) {
  70.                 this.autoObj.removeChild(this.autoObj.firstChild);
  71.             }
  72.             this.autoObj.className = "auto_hidden";
  73.         },
  74.         //设置值
  75.         setValue: function (_this) {
  76.             return function () {
  77.                 _this.obj.value = this.seq;
  78.                 _this.autoObj.className = "auto_hidden";
  79.             }
  80.         },
  81.         //模拟鼠标移动至DIV时，DIV高亮
  82.         autoOnmouseover: function (_this, _div_index) {
  83.             return function () {
  84.                 _this.index = _div_index;
  85.                 var length = _this.autoObj.children.length;
  86.                 for (var j = 0; j < length; j++) {
  87.                     if (j != _this.index) {
  88.                         _this.autoObj.childNodes[j].className = 'auto_onmouseout';
  89.                     } else {
  90.                         _this.autoObj.childNodes[j].className = 'auto_onmouseover';
  91.                     }
  92.                 }
  93.             }
  94.         },
  95.         //更改classname
  96.         changeClassname: function (length) {
  97.             for (var i = 0; i < length; i++) {
  98.                 if (i != this.index) {
  99.                     this.autoObj.childNodes[i].className = 'auto_onmouseout';
  100.                 } else {
  101.                     this.autoObj.childNodes[i].className = 'auto_onmouseover';
  102.                     this.obj.value = this.autoObj.childNodes[i].seq;
  103.                 }
  104.             }
  105.         },
  106.  
  107.         //响应键盘
  108.         pressKey: function (event) {
  109.             var length = this.autoObj.children.length;
  110.             //光标键"↓"
  111.             if (event.keyCode == 40) {
  112.                 ++this.index;
  113.                 if (this.index > length) {
  114.                     this.index = 0;
  115.                 } else if (this.index == length) {
  116.                     this.obj.value = this.search_value;
  117.                 }
  118.                 this.changeClassname(length);
  119.             }
  120.                 //光标键"↑"
  121.             else if (event.keyCode == 38) {
  122.                 this.index--;
  123.                 if (this.index < -1) {
  124.                     this.index = length - 1;
  125.                 } else if (this.index == -1) {
  126.                     this.obj.value = this.search_value;
  127.                 }
  128.                 this.changeClassname(length);
  129.             }
  130.                 //回车键
  131.             else if (event.keyCode == 13) {
  132.                 this.autoObj.className = "auto_hidden";
  133.                 this.index = -1;
  134.             } else {
  135.                 this.index = -1;
  136.             }
  137.         },
  138.         //程序入口
  139.         start: function (event) {
  140.             if (event.keyCode != 13 && event.keyCode != 38 && event.keyCode != 40) {
  141.                 this.init();
  142.                 this.deleteDIV();
  143.                 this.search_value = this.obj.value;
  144.                 var valueArr = this.value_arr;
  145.                 valueArr.sort();
  146.                 if (this.obj.value.replace(/(^\s*)|(\s*$)/g, '') == "") { return; }//值为空，退出
  147.                 try { var reg = new RegExp("(" + this.obj.value + ")", "i"); }
  148.                 catch (e) { return; }
  149.                 var div_index = 0;//记录创建的DIV的索引
  150.                 for (var i = 0; i < valueArr.length; i++) {
  151.                     if (reg.test(valueArr[i])) {
  152.                         var div = document.createElement("div");
  153.                         div.className = "auto_onmouseout";
  154.                         div.seq = valueArr[i];
  155.                         div.onclick = this.setValue(this);
  156.                         div.onmouseover = this.autoOnmouseover(this, div_index);
  157.                         div.innerHTML = valueArr[i].replace(reg, "<strong>$1</strong>");//搜索到的字符粗体显示
  158.                         this.autoObj.appendChild(div);
  159.                         this.autoObj.className = "auto_show";
  160.                         div_index++;
  161.                     }
  162.                 }
  163.             }
  164.             this.pressKey(event);
  165.             window.onresize = Bind(this, function () { this.init(); });
  166.         }
  167.     }
  168. </script>
  169. <html>
  170.  
  171. <body>
  172.     <div align="center" style="padding-top:50px">
  173.         <input type="text" style="width:300px;height:20px;font-size:14pt;" placeholder="请输入a或b模拟效果" id="o" onkeyup="autoComplete.start(event)">
  174.     </div>
  175.     <div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>
  176.     <script>
  177.         var autoComplete = new AutoComplete('o', 'auto', ['b0', 'b12', 'b22', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8', 'b2', 'abd', 'ab', 'acd', 'accd', 'b1', 'cd', 'ccd', 'cbcv', 'cxf']);
  178.     </script>
  179. </body>
  180. </html>

input模糊搜索功能的更多相关文章

  1. js、jquery实现模糊搜索功能

    模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...

  2. js、jquery实现列表模糊搜索功能

    实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键 ...

  3. 给文本框添加模糊搜索功能（“我记录”MVC框架下实现）

    步骤: 1.在文本框中输入内容时,触发keyup事件: 2.在keyup事件的处理方法中,通过Ajax调用控制器的方法: 3.在控制器方法中,搜索满足条件的数据,这里分页获取数据,且只取第一页的数据, ...

  4. ztree树的模糊搜索功能

    在做机场项目的时候,业务为一个input框,点击的时候出现一个下拉树,这个下拉树是所有的设备,由于设备太多,加上分了区域,为了更好的用户体验,设计一个模糊搜索的功能,方便用户进行选择 具体实现过程如下 ...

  5. 如何取消input记忆功能

    默认情况下,input会有这个记忆功能,如果不想让它记忆,可以在input上加上autocomplete="off"即可.

  6. Python中raw_input() & input() 的功能对比

    raw_input的功能是方便的从控制台读入数据.  input与raw_input都是Python的内建函数,实现与用户的交互,但是功能不同. 一.raw_input 下面介绍让raw_input的 ...

  7. 超好用的input模糊搜索 jq模糊搜索，

    上来先展示效果:默认展示效果: 输入内容: 上代码: css部分: <style type="text/css"> * { padding:; margin:; } h ...

  8. input 滑块功能range javascript方法使用

    <script> var rangelist=document.querySelectorAll('[type="range"]'); for(var i=0; i&l ...

  9. input 模糊搜索

    <html> <head> <title>test</title> <script type="text/javascript" ...

随机推荐

  1. CentOS6无法本地登陆,ssh远程登陆没问题

    CentOS6无法本地登陆,ssh远程登陆没问题---使用CentOS自带的rsyslog分析调试 Apr 21 14:15:27 raccontroller init: tty (/dev/tty1 ...

  2. 网易云课堂_C++程序设计入门(上)_第2单元：丹青画松石– EGE图形库

    第2节:一个简单的EGE程序 #ifndef _GRAPHICS_H_ #define _GRAPHICS_H_ #ifndef __cplusplus #error You must use C++ ...

  3. google 推荐 android 像素统一使用dip，字体统一使用sp

    像素统一使用dip,字体统一使用sp

  4. 前端公共库cdn服务推荐//提高加载速度/节省流量

    前端公共库cdn服务推荐,使用可以提高js库加载速度同时也可以节省自己空间的流量,CDN加速公共库虽好,不过一定要使用靠谱的前端cdn服务提供方. 以下整理出比较靠谱的国内cdn加速服务器.排名不分先 ...

  5. 使用 VB.NET 开发多线程

    摘要:.NET 框架提供了新的类,可以方便地创建多线程应用程序.本文介绍如何使用 Visual Basic® .NET 的多线程编程技术来开发效率更高.响应速度更快的应用程序. 目录 简介 多线程处理 ...

  6. C++ Primer 读书笔记：第10章 关联容器

    第10章 关联容器 引: map set multimap multiset 1.pair类型 pair<string, int> anon anon.first, anon.second ...

  7. Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  8. xml drawable

    1.Shape drawable:改变组件的形状和渐变xml shape标签 corner标签:改变轮廓 gradient:颜色填充的渐变 android:angle  android:angle＝“ ...

  9. 新手必看：如何快速看懂VC++项目

    1.在具备必需的编程基础知识后,试图理解一份完整的代码可以从以下几个方面入手:   1)首先运行以下程序,从外部角度感受一下有哪些功能.  2)了解代码中每个类的功能.看看文档,或者类的注释,那么仅仅 ...

  10. C++实现线程池 .

    C++实现线程池. 欢迎转载,转载请注明原出处:http://blog.csdn.net/ithzhang/article/details/9020283 代码地址:https://github.co ...