JS编写input搜索框，类似下拉搜索框

来源：互联网发布：ubuntu显示桌面图标编辑：程序博客网时间：2024/06/01 09:28

因为工作需求，要在一个OA系统嵌入页面，查询相关OA系统的jquery版本，是1.4.4，版本过低，没办法引用现有的优秀的下拉搜索框的框架，导致需要自己写一个简易的下拉搜索框。代码如下，亲测，有效：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        ul#drop {            list-style: none;            margin: 0;            padding: 0;        }        ul#drop li {                        margin: 0;            padding: 10px;        }        ul#drop li:hover {            background-color: darkgrey;width:200px;        }        p#selectedId {            display: inline-block;        }    </style>    <script>        // 临时数据        var data1 = ["1d412155279b4c0b90571991f8e37cde", "17173(17173)"];        var data2 = ["f02d045ed089432cb9bc84c89780416a", "AXIS(系统研发)"];        var data = [data1, data2];        // 页面加载完成        window.onload = function (evg) {            // 获取div            var search = document.getElementById("search");            // 获取输入框元素            var searchText = document.getElementById("searchText");            // 获取显示id的p元素            var selectedId = document.getElementById("selectedId");            // 添加获取焦点事件            searchText.onfocus = function () {                var drop = document.getElementById("drop");                if (!drop) {                    // 初始下拉列表                    var originalUl = document.createElement("ul");                    originalUl.id = "drop";                    data.forEach(function (element) {                        // 创建li                        var li = document.createElement("li");                        li.innerHTML = element[1];                        li.title = element[0];                        // 添加点击事件                        li.onclick = function () {                            searchText.value = this.innerHTML;                            searchText.name = this.title;//                            alert(this.title);                            selectedId.innerHTML = "id: " + searchText.name;                            // 搜索                        };                        originalUl.appendChild(li);                    });                    search.appendChild(originalUl);                }            };            // 添加键盘事件            searchText.onkeyup = function () {                // 先删除                var drop = document.getElementById("drop");                search.removeChild(drop);                // 创建ul                var ul = document.createElement("ul");                ul.id = "drop";                // 添加ul                search.appendChild(ul);                // 遍历数组匹配数据                data.forEach(function (element) {                    if (element[1].search(searchText.value) != -1) {                        // 创建li                        var li = document.createElement("li");                        li.innerHTML = element[1];                        li.title = element[0];                        // 添加点击事件                        li.onclick = function () {                            searchText.value = this.innerHTML;                            // 搜索                            searchText.name = this.title;                            alert(this.title);                            selectedId.innerHTML = "id: " + searchText.name;                        };                        ul.appendChild(li);                    }                });            };            if (search.addEventListener) {                search.addEventListener("click", function (evg) {                    evg.stopPropagation();                })            } else if (search.attachEvent) {                search.attachEvent("click", function (evg) {                    evg.cancelBubble = true;                })            }                        // 添加文档点击事件            document.onclick = function () {                var drop = document.getElementById("drop");                search.removeChild(drop);            };        };    </script></head><body><div id="search">    <form action="">        <input type="text" id="searchText">        <input type="submit" id="searchButton" value="搜索">        <p id="selectedId"></p>    </form></div></body></html>

补充：

在IE浏览器下，不支持forearch语句，可以自己改成for.同时我找了一段代码，解决了IE不支持forearch语句，估计是重写了forearch。我们可以在使用forearch之前加上如下代码：

if ( !Array.prototype.forEach ) {                  Array.prototype.forEach = function forEach( callback, thisArg ) {                    var T, k;                    if ( this == null ) {                      throw new TypeError( "this is null or not defined" );                    }                    var O = Object(this);                    var len = O.length >>> 0;                     if ( typeof callback !== "function" ) {                      throw new TypeError( callback + " is not a function" );                    }                    if ( arguments.length > 1 ) {                      T = thisArg;                    }                    k = 0;                    while( k < len ) {                      var kValue;                      if ( k in O ) {                        kValue = O[ k ];                        callback.call( T, kValue, k, O );                      }                      k++;                    }                  };                }

0 0