<!doctype html>

<meta charset="utf-8">

<style type="text/css">

    body {

        margin-left: 0px;

        margin-top: 0px;

        margin-right: 0px;

        margin-bottom: 0px;

    }

    .auto_hidden {

        width: 204px;

        border-top: 1px solid #333;

        border-bottom: 1px solid #333;

        border-left: 1px solid #333;

        border-right: 1px solid #333;

        position: absolute;

        display: none;

    }

    .auto_show {

        width: 204px;

        border-top: 1px solid #333;

        border-bottom: 1px solid #333;

        border-left: 1px solid #333;

        border-right: 1px solid #333;

        position: absolute;

        z-index: 9999; /* 设置对象的层叠顺序 */

        display: block;

    }

    .auto_onmouseover {

        color: #ffffff;

        background-color: highlight;

        width: 100%;

    }

    .auto_onmouseout {

        color: #000000;

        width: 100%;

        background-color: #ffffff;

    }

</style>

<script language="javascript" type="text/javascript">

    var $ = function (id) {

        return "string" == typeof id ? document.getElementById(id) : id;

    }

    var Bind = function (object, fun) {

        return function () {

            return fun.apply(object, arguments);

        }

    }

    function AutoComplete(obj, autoObj, arr) {

        this.obj = $(obj); //输入框

        this.autoObj = $(autoObj);//DIV的根节点

        this.value_arr = arr; //不要包含重复值

        this.index = -1; //当前选中的DIV的索引

        this.search_value = ""; //保存当前搜索的字符

    }

    AutoComplete.prototype = {

        //初始化DIV的位置

        init: function () {

            this.autoObj.style.left = this.obj.offsetLeft + "px";

            this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";

            this.autoObj.style.width = this.obj.offsetWidth - 2 + "px";//减去边框的长度2px

        },

        //删除自动完成需要的所有DIV

        deleteDIV: function () {

            while (this.autoObj.hasChildNodes()) {

                this.autoObj.removeChild(this.autoObj.firstChild);

            }

            this.autoObj.className = "auto_hidden";

        },

        //设置值

        setValue: function (_this) {

            return function () {

                _this.obj.value = this.seq;

                _this.autoObj.className = "auto_hidden";

            }

        },

        //模拟鼠标移动至DIV时，DIV高亮

        autoOnmouseover: function (_this, _div_index) {

            return function () {

                _this.index = _div_index;

                var length = _this.autoObj.children.length;

                for (var j = 0; j < length; j++) {

                    if (j != _this.index) {

                        _this.autoObj.childNodes[j].className = 'auto_onmouseout';

                    } else {

                        _this.autoObj.childNodes[j].className = 'auto_onmouseover';

                    }

                }

            }

        },

        //更改classname

        changeClassname: function (length) {

            for (var i = 0; i < length; i++) {

                if (i != this.index) {

                    this.autoObj.childNodes[i].className = 'auto_onmouseout';

                } else {

                    this.autoObj.childNodes[i].className = 'auto_onmouseover';

                    this.obj.value = this.autoObj.childNodes[i].seq;

                }

            }

        },

        //响应键盘

        pressKey: function (event) {

            var length = this.autoObj.children.length;

            //光标键"↓"

            if (event.keyCode == 40) {

                ++this.index;

                if (this.index > length) {

                    this.index = 0;

                } else if (this.index == length) {

                    this.obj.value = this.search_value;

                }

                this.changeClassname(length);

            }

                //光标键"↑"

            else if (event.keyCode == 38) {

                this.index--;

                if (this.index < -1) {

                    this.index = length - 1;

                } else if (this.index == -1) {

                    this.obj.value = this.search_value;

                }

                this.changeClassname(length);

            }

                //回车键

            else if (event.keyCode == 13) {

                this.autoObj.className = "auto_hidden";

                this.index = -1;

            } else {

                this.index = -1;

            }

        },

        //程序入口

        start: function (event) {

            if (event.keyCode != 13 && event.keyCode != 38 && event.keyCode != 40) {

                this.init();

                this.deleteDIV();

                this.search_value = this.obj.value;

                var valueArr = this.value_arr;

                valueArr.sort();

                if (this.obj.value.replace(/(^\s*)|(\s*$)/g, '') == "") { return; }//值为空，退出

                try { var reg = new RegExp("(" + this.obj.value + ")", "i"); }

                catch (e) { return; }

                var div_index = 0;//记录创建的DIV的索引

                for (var i = 0; i < valueArr.length; i++) {

                    if (reg.test(valueArr[i])) {

                        var div = document.createElement("div");

                        div.className = "auto_onmouseout";

                        div.seq = valueArr[i];

                        div.onclick = this.setValue(this);

                        div.onmouseover = this.autoOnmouseover(this, div_index);

                        div.innerHTML = valueArr[i].replace(reg, "<strong>$1</strong>");//搜索到的字符粗体显示

                        this.autoObj.appendChild(div);

                        this.autoObj.className = "auto_show";

                        div_index++;

                    }

                }

            }

            this.pressKey(event);

            window.onresize = Bind(this, function () { this.init(); });

        }

    }

</script>

<html>

<body>

    <div align="center" style="padding-top:50px">

        <input type="text" style="width:300px;height:20px;font-size:14pt;" placeholder="请输入a或b模拟效果" id="o" onkeyup="autoComplete.start(event)">

    </div>

    <div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>

    <script>

        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']);

    </script>

</body>

</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. alternaiate terms

    操作系统就是能让您的计算机工作 的一系列基本程序和实用工具; 大多数的软件至少都要卖几百块钱,您们怎么愿意白白把它送给别人? 您真正应该问的问题是软件公司怎么可以要您花那么多钱买他们的软件.写软件和制 ...

  2. flex——将Sprite控件添加到FLEX UI中

    在Flex的帮助文档里,有很多例子都是扩展Sprite类的.如果想把这些实例添加到你的s:Application中,如:addChild(DisplayObject ),肯定会出错.错误的大致意思是: ...

  3. poj1966Cable TV Network(无向图最小点割集 ISAP+邻接矩阵)

    题目请戳这里 邻接表的ISAP被卡了一天...TLE....终于被卡了...好忧桑啊啊啊... 题目大意:给一张无向图,求最少去掉几个点使图不连通. 题目分析:求无向图的点连通度,拆点建图跑最大流.具 ...

  4. #include <hash_set>

    哈希查找,不需要排序,适用于精确查找,比二分查找更快 #define _SILENCE_STDEXT_HASH_DEPRECATION_WARNINGS #include <iostream&g ...

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

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

  6. Asp.net异步IHttpAsyncHandler示例

    /// <summary> /// 异步IHttpHandler,实现了一个简单的统计流量的功能, /// 由于是示例代码,所以没有判断IP或者MAC /// </summary&g ...

  7. Android学习Tabhost、gallery、listview、imageswitcher

    Tabhost控件又称分页控件,在很多的开发语言中都存在.它可以拥有多个标签页,每个标签页可以拥有不同的内容.android中,一个标签页可以放 一个view或者一个activity.TabHost是 ...

  8. android开发Tost工具类管理(一)

    Tost工具类管理: package com.gzcivil.utils; import android.content.Context; import android.widget.Toast; / ...

  9. iOS开发那些事儿（四）the dark arts of the Objective-C runtime

    一."Black Magic":Method Swizzling 利用 Runtime 特性把一个方法的实现与另一个方法的实现进行替换,也可以用runtime的四维理解——修改Di ...

  10. js 完美兼容浏览器的复制功能

    1,js结合swf的复制功能,完美兼容火狐,谷歌,360,ie8,使用示例:(ps:引入copy.swf比较重要,文件传送门 解压密码:http://www.bieanju.com/,为了防止360删 ...