用原生的javascript实现输入框匹配相关字段的效果

来源：互联网发布：济南黑马网络编辑：程序博客网时间：2024/05/16 08:26

突然我发现我好久没有写博客了，之前一直在忙，除了实习，还要忙毕业设计。然后就过年了。2017，新的一年，我希望我在前端开发的路上能收获更加多东西，最近接触了nodejs的开发，还要项目中的css到sass开发的迁移过程。今天我都不写这些，我今天写一个平时我们很经常接触的东西。不说那么那么多，直接上图…

这里写图片描述

看到图中自动匹配，然后出现的提示字段了吗？你想到用什么方法来实现它？onchange,onkeypress,onkeydown,onkeyup?

onchange 事件: 只在键盘或者鼠标操作改变对象的属性，且要失去焦点才会触发，脚本无法触发
keydown、keypress事件触发在文字还没敲进文本框，这时如果在keydown、keypress事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本.但是无关获取到用鼠标复制进去的文本

由上可以知道上面的事件或多多少的有些不符合我们的要求。下面由就是我们今天的主角出场了。

1.oninput : 只要输入的值变化就会触发该事件，除了用js脚本设置值外。能够实现监听输入框的值变化，无论是键盘输入，还是复制进来，但是IE8（含IE8）以下不支持该事件，别担心…

–兼容性图如下—-
这里写图片描述

2.onpropertychange：IE下的特有事件，和input功能差不多，有一点不样的时，可以通过js脚本触发（ps：没有亲测，我电脑没有IE8）

下面我们来用代码交流：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #search{            width: 50%;            margin: 50px auto;            font-size: 0;        }        #search input[type='text']{            box-sizing: border-box;            width: 80%;            height: 40px;            border: 1px solid #c0c0c0;            outline: none;            font-size: 16px;            padding: 0 15px;        }        #search input[type='submit']{            box-sizing: border-box;            width:15%;            height: 40px;            margin-left:3%;            border: 1px solid #c0c0c0;            background: #fbfdff;            border-radius: 5px;            font-size: 16px;        }        #search_ul{            box-sizing: border-box;            width: 80%;            font-size: 16px;            padding: 0;            margin: 0;            list-style: none;            border-bottom: 1px solid #c0c0c0;            border-left: 1px solid #c0c0c0;            border-right: 1px solid #c0c0c0;        }        #search_ul li{            cursor: pointer;            height: 30px;            line-height: 30px;            padding-left: 15px;        }        #search_ul li:hover{            background: #e5e5e5;        }        #search_ul:empty{            border: none !important;        }    </style></head><body >    <div id="search">        <form action="#">            <input id="search_input" type="text" placeholder="">            <input type="submit" value="搜索">        </form>        <ul id="search_ul"></ul>    </div>    <script>        /**         * Created by yangwenguang on 2017/3/1.         */        var input = document.querySelector("#search_input");        var ul = document.querySelector("#search_ul");        var _tmpArr = ['aaaa', 'bbbb', 'baaa', 'bccc', 'bcds', 'bacds', 'bssssdd'];        //跨浏览器事件函数        function addEvent(element,type,handler){            if(element.addEventListener){                element.addEventListener(type,handler,false);            } else  if(element.attachEvent){                element.attachEvent('on'+type,handler);            } else {                element['on'+type] = handler;            }        }        /*         *  匹配输入，生成匹配字段         **/        function  action(){            ul.innerHTML ='';            var str = input.value;            var _tmpUl = document.createDocumentFragment();            for(var i = 0;i<_tmpArr.length;i++){                if(_tmpArr[i].indexOf(str) != -1 && str!=''){                    var li = document.createElement('li');                    var text = document.createTextNode(_tmpArr[i]);                    li.appendChild(text);                    _tmpUl.appendChild(li);                }            }            ul.appendChild(_tmpUl);        }        /*         * 监听input中value变化         **/        function  init(){            if('oninput' in input){//IE9+                input.addEventListener('input',action,false)            } else {//ie8-                input.attachEvent('onpropertychange',action);            }        }        /*         * 点击字段，设置input的value         **/        addEvent(ul,'click',function(event){            var event = event || window.event;            var target = event.target || event.srcElement;            input.value = target.innerHTML;            ul.innerHTML = '';        });        init();    </script></body></html>

效果图：
这里写图片描述

如过用jquery实现：只需要同时监听input和propertychange事件即可：

$("#search_input").on("input properychange",function(){    //do something})

思路是一样的，我就不再重复实现了。

0 0