JS編寫input搜尋框，類似下拉搜尋框

阿新 • • 發佈：2019-01-20

因為工作需求，要在一個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++;
                	    }
                	  };
                	}

JS編寫input搜尋框，類似下拉搜尋框

因為工作需求，要在一個OA系統嵌入頁面，查詢相關OA系統的jquery版本，是1.4.4，版本過低，沒辦法引用現有的優秀的下拉搜尋框的框架，導致需要自己寫一個簡易的下拉搜尋框。程式碼如下，親測，有效： <!DOCTYPE html> <html lang

div展示聯動，js二級聯動城市選擇，非下拉框

// 省份城市的聯動 var oC=document.getElementsByClassName('oc'); var oCity=document.getElementById('oCity'); var city = [];//申明　　//定義二級資料 city[0] = ['

Struts2中的ognl標籤介紹（property標籤、iterator標籤、if/elseif/else標籤、url標籤、url標籤、radio單選框、select下拉選擇框）

Struts2中的ognl標籤介紹（property標籤、iterator標籤、if/elseif/else標籤、url標籤、url標籤、radio單選框、select下拉選擇框） property標籤用於輸出指定值： <s:set name="name" value="'kk'" /> &l

Html頁面中select下拉列表框別樣用法，一個方法一勞永逸。

select 異步加載很多時候，我們寫from表單面，給select標簽賦值，都采用這種方式：1.MVC中設創建公共的分部視圖；2.直接在前臺面中，插入片段後臺代碼；今天我利用HTML5中的自定義屬性，結合JQ擴展方法，寫一個通用的JS方法，JS代碼如下： $.fn.SetSelect = funct

小程序選擇地區，省市區下拉框

六盤水泉州 ive 石家莊市玉溪廣州 ali XML 安徽省下拉的地址選擇： wxml： <view style=‘height:84rpx;background:#fff;border-bottom:1rpx solid #dfdbdc;line-heig

jqgrid 表格中篩選條件的多選下拉，樹形下拉 ;文本框清除插件;高級查詢多條件動態篩選插件

this break eset real 分割線 EDA color ctx 篩選條件 /** * @@desc 文本框清除按鈕,如果isAutoWrap為false當前文本框父級必須是relative定位，boostrap參考input-group

微信小程序的按下擡起事件，下拉選擇框的事件及點擊確定的方法函數，獲取時間的方法，省市區的方法。

bin img util req fun data hang UNC 日期擡起按下的事件：擡起事件： bind:touchstart="nanOne" 把這條屬性放到標簽裏就可以了在JS中 nanOne: function () { 　　　　this.setDa

白鷺引擎製作滾動框，類似div的oveflow

白鷺引擎版本：5.2.8 描述：白鷺引擎製作滾動框，類似div的overflow 程式碼片段 var content:egret.TextField = new egret.TextField; content.text = "今天天氣很好，可

【Html】Clipboard.js 實現點選複製，剪下板操作

可以使用cdn 或者直接下載設定好引用路徑(百度雲下載) <script type="text/javascript" src="./dist/clipboard.min.js"></script> html <input type

input + div 下拉選擇框

前臺html頁面 <html> <head> <meta name="viewport" content="width=device-width" /> <title>showOptions</title> &l

input-palceholder的預設字型顏色及，select下拉去掉三角按鈕置換元素有哪些？

1.select去掉三角按鈕 /* 去掉select右邊的三角形 */ -webkit-appearance: none; 2改變預設字型顏色 :-moz-placeholder { color: #a9a9a9; } &nb

jqGrid----下拉列表框下拉聯動，dataEvents回撥函式。

1.給單元格添onchange事件例項： $('#gridYosan').setColProp('yosanka', {editoptions: { dataEvents:[{ type: 'change', fn: fun

Vue-multiselect 外掛使用--搜尋及單選下拉框

參考官網：https://vue-multiselect.js.org/#sub-select-with-search 1.通過npm安裝vue-multiselect npm install vue-multiselect 2.引用 template中：注意這裡的track-by

初始化表單（保留搜尋提交之後下拉選框預設值的方法）

做的專案某頁面需要有一個搜尋，希望在我選擇下拉選框的某個值提交，返回結果之後，之前提交的值預設selected。 html程式碼如下： <form class="well form-inline margin-top-20" id="form" meth

關於layui 兩層彈框，關閉一個後，重新整理上一個彈框的某個下拉框問題

(我使用的layui版本為2.4.3) 最近因為專案需要，需要實現一層彈框(下面稱之為A彈框)後，點選按鈕跳出二層彈框(下面稱中國之為B彈框)，可以實現新增新的下拉框值，然後再關閉B彈框是，可以實現區域性重新整理A彈框中的部分塊，使得剛新增的值顯示，但是不能是整

js解決下拉列表框互斥選項的問題

png hand 問題列表框下拉 inf 判斷要去發生如圖不區分選項與其他選項是互斥的關系，當選擇了不區分時，其他選項就要去除，當有其他選項存在時，就不能有不區分解決辦法：定義change事件，若列表發生改變，首先判斷點擊的是否是不區分，若是，則將其他選項剪切

freemaker中下拉框（動態下拉框和靜態下拉框）的塞值，回顯

靜態下拉，靜態的情況下把所有靜態的可能都列出來，判斷返回的值是否等於option中的值，如果相等就顯示那行,??是判斷不為空： <label class="control-label">所在端：</label>

類似ios select下拉選擇框的實現

select下拉選擇標籤在移動端是很常用的，但是不同的瀏覽器展示的效果都不一樣，其中iOS中的效果還是令人比較滿意的，所以產品設計往往給出這樣的一種設計。。百度中這種外掛也比較多，比較複雜，最近整理了一下。實現效果：原理： 1。定義每行的高度是40

解決：JS向後臺傳參，IE下中文未編碼問題

1.問題描述專案中用jQuery向後臺URL傳參獲取資料時，google瀏覽器正常執行，但IE沒有資料返回。js程式碼如下： jsonurl = urlPreffix +"getInfoByCity.do?city="+$j("#city").val(); $j.

表單測試-單選按鈕、複選框、下拉列表框、搜尋框填充域驗證點

1.單選按鈕測試常見驗證點單選按鈕常在註冊新使用者選擇性別處用到，單選按鈕測試常見驗證點如下： 1.一組單選按鈕不能同時選中，只能選中一個 2.逐一執行每個單選按鈕的功能。分別選擇“男”、“女”後，儲存到資料庫的資料應該分別為“男”、“女”。 3.一組執行同一個功能

JS編寫input搜尋框，類似下拉搜尋框

相關推薦