input模糊搜索功能

<!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模糊搜索功能的更多相关文章

js、jquery实现模糊搜索功能
模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...
js、jquery实现列表模糊搜索功能
实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键 ...
给文本框添加模糊搜索功能（“我记录”MVC框架下实现）
步骤: 1.在文本框中输入内容时,触发keyup事件: 2.在keyup事件的处理方法中,通过Ajax调用控制器的方法: 3.在控制器方法中,搜索满足条件的数据,这里分页获取数据,且只取第一页的数据, ...
ztree树的模糊搜索功能
在做机场项目的时候,业务为一个input框,点击的时候出现一个下拉树,这个下拉树是所有的设备,由于设备太多,加上分了区域,为了更好的用户体验,设计一个模糊搜索的功能,方便用户进行选择具体实现过程如下 ...
如何取消input记忆功能
默认情况下,input会有这个记忆功能,如果不想让它记忆,可以在input上加上autocomplete="off"即可.
Python中raw_input() & input() 的功能对比
raw_input的功能是方便的从控制台读入数据. input与raw_input都是Python的内建函数,实现与用户的交互,但是功能不同. 一.raw_input 下面介绍让raw_input的 ...
超好用的input模糊搜索 jq模糊搜索，
上来先展示效果:默认展示效果: 输入内容: 上代码: css部分: <style type="text/css"> * { padding:; margin:; } h ...
input 滑块功能range javascript方法使用
<script> var rangelist=document.querySelectorAll('[type="range"]'); for(var i=0; i&l ...
input 模糊搜索
<html> <head> <title>test</title> <script type="text/javascript" ...

随机推荐

poj 1458 Common Subsequence_最长公共子串
题意:略求最长公共子串 #include<iostream> #include<cstdio> #include<string> using namespace ...
C Statements
1,while((ch = getchar()) != EOF){ putchar(ch);}2,while((ch=getchar()) != EOF){ if(ch < '0' ...
js/jquery中实现图片轮播
一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
Chessboard（规律）&&阿里巴巴和n个大盗(规律)
Chessboard Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
C#获取URL参数值（NameValueCollection）
在写程序的时候,我们经常需要对页面进行传参数,比如page?id=1234,那么在page这个页面中就直接可以使用string id = Request.QueryString["id&qu ...
Linux学习1——首次登录
一.写在前面在本节将介绍首次登录Linux系统(本文中为CentOS)所需要了解的一些基本操作.二.完成目标 1.了解GNOME和KDE窗口管理程序 2.使用在线求助man和info 3.基本命令操 ...
CentOS用gparted实现无损调整磁盘分区大小
作者: sheldon 测试服务器硬盘挂载在/usr下的分区大小只有10G,随着必须软件都安装在这个目录下,这个分区已经满额,给分区扩容刻不容缓,window下有PQ分区工具,Linux下也有gpar ...
字符串聚合技术（String Aggregation Techniques）
from: http://www.oracle-base.com/articles/misc/string-aggregation-techniques.php String Aggregation ...
iOS8毛玻璃效果
UIBlurEffect*blueEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]; UIVisualEffectView* ...
Ajax表单提交及后台处理简单应用
首先先说下表单提交吧,要提交表单那么就得先收集表单数据(至于验证这个我就不说了,要说留下下次吧),有了jquery取个html的值还是简单$("xxid").val()等就完了,但 ...

input模糊搜索功能

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

随机推荐

热门专题