完整版文字框即時輸入資料監聽並下拉顯示匹配資料

阿新 • • 發佈：2019-02-10

1.前言
好多小童鞋，對以jq為主的前端並不是特別熟悉，但並不代表你是菜鳥，說不定你是其他方面的資深老司機，好吧，我才是菜鳥，今天主要寫一個完整的demo來看看怎樣文字框+下拉框即時匹配資料。
2.詳情
還是那句話，不說太多廢話，直接程式碼來。如果你是新手，可以直接copy成.html格式的檔案，本地預覽看到效果，如果看不到效果，那說明什麼呢？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content 
="text/html; charset=utf-8" />
    <title></title>
    <style>
        *{margin:0; padding:0;}
        .sxs{ position:relative; width:300px; margin:20px auto; }
        .sxs_in{width:295px; height:32px; padding-left:5px;border:1px solid #666;outline:none;}
        .sxs ul{position:absolute 
;left:0px; top:32px; width:100%; border:1px solid #666;  background-color:#fff; display:none; }        
        ul li{list-style:none; border-bottom:1px dashed #666; height:32px; line-height:32px; padding-left:5px; font-size:12px; cursor:pointer;}
        ul li:last-child{border-bottom:none;}
        ul 
 li:hover{color:#4985d7; border-bottom-color:#4985d7;}
    </style>
</head>
<body>
    <div class="sxs">
        <input type="text" class="sxs_in" placeholder=" 輸入 1 或 蘇 試試" />
        <ul>
            <li>測試</li>
            <li>測試</li>
        </ul>
    </div>
    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function () {
            $(".sxs").hover(function () {
                $("ul").css("display", "block");
            },function(){
                $("ul").css("display", "none");
            })
        })
        var li_array = ["1", "123", "12345","54321", "蘇", "小蘇","蘇小蘇", "蘇小蘇的部落格", "部落格1", "馬雲", "馬化騰"];
        $('.sxs_in').on('input propertychange', function () {
            var sxs_in = $.trim($(".sxs_in").val());
            if (sxs_in) {
                //此處一般是調介面將符合的資料填充到li中去
                //這裡就用本地資料
                $("ul li").remove();
                for (j in li_array) {
                    if (li_array[j].indexOf(sxs_in) >= 0) {
                        $("ul").append("<li>" + li_array[j] + "</li>");
                    }
                }
                if ($("ul li").length == 0) {
                    $("ul").append("<li>沒有符合的資料</li>");
                }
            }
        })
    </script>
</body>
</html>

3.效果圖
文字框監聽
4.總結
感覺我寫的demo都是比較low的demo。好吧，我也想成為大神！加油！努力！呵呵。。。。。

完整版文字框即時輸入資料監聽並下拉顯示匹配資料

1.前言好多小童鞋，對以jq為主的前端並不是特別熟悉，但並不代表你是菜鳥，說不定你是其他方面的資深老司機，好吧，我才是菜鳥，今天主要寫一個完整的demo來看看怎樣文字框+下拉框即時匹配資料。 2.

完整版文本框即時輸入數據監聽並下拉顯示匹配數據

utl 監聽 title 本地 pre utf splay chang ace 1.前言好多小童鞋，對以jq為主的前端並不是特別熟悉，但並不代表你是菜鳥，說不定你是其他方面的資深老司機，好吧，我才是菜鳥，今天主要寫一個完整的demo來看看怎樣文本框+下拉框即時匹配數據。

淺析VUE雙向繫結原理，實現資料監聽並通知訂閱者

淺析VUE雙向繫結原理，實現屬性變化的監聽本文引用了“鄧木琴居然被盜用了”的文章內容，博文地址: https://segmentfault.com/a/1190000006599500一、VUE雙向繫結原理簡單介紹 Vue的雙向繫結是通過資料劫持結合釋出-訂閱者模式實

1、Jquery form表單ajax提交 2、jquery.filter校驗多個相同型別的文字框是否輸入資料有重複

JSP引用該JS <script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script> 表單儲存按鈕 onclick=save(); func

input輸入框內容變化實時監聽

lur 螞蟻 onchange copy word arch 知識 -- 並且 js實現的文本框內容發生改變立馬觸發事件簡單介紹:本章節介紹一下如何在文本框的內容發生變化的時候，立馬觸發一個事件執行響應的操作，而不是像是keydown或者keyup事件一樣，只能夠檢測通過鍵

replace限制文字框只能輸入數字，數字和字母等的正則表示式

1.文字框只能輸入數字程式碼(小數點也不能輸入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">&

JS 控制文字框禁止輸入例子

JS 控制不能輸入特殊字元　　 <input type="text"class="domain"onkeyup="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')"； this.value=this.value.replace(/[^u

丘成桐：數理與人文(官方完整版PDF下載)(公號回覆“丘成桐數學”下載PDF典型資料，歡迎轉發、讚賞支援科普)

丘成桐：數理與人文(官方完整版PDF下載)(公號回覆“丘成桐數學”下載PDF典型資料，歡迎轉發、讚賞支援科普) 丘成桐科學Sciences 今天科學Sciences導讀：本文選自《數學的藝術》首篇《數理與人文》(丘成桐)。鑑於網上流傳的各種根據現場演講整理的文字多有疏漏，高等教育出版

遮蔽文字框非法輸入

遮蔽文字框非法輸入 protected override void OnTextChanged(TextChangedEventArgs e)

VUE 回車換行提交表單跑馬燈效果只允許文字框中輸入0-9數字

匯入vue.js <script src="vue-2.5.17.js"></script> 1.回車換行提交表單 <div id="app"> <input type="text" v-model=

EXT文字框TextField輸入長度和內容控制

1.限制輸入長度Ext.form.TextField 的 maxLength/size 處理的並不是很好，設定了maxLength後還是可以任意輸入，國外extjs論壇看到有人的帖子，通過prototype重定義這兩個屬性，試了一下，很有效Java程式碼 Ext.form.Te

JS學習筆記 - 自定義右鍵選單、文字框只能輸入數字

select、radio選中某一項後,自動彈出一個相應文字框供輸入

1、select，彈出相應文字框說明：當select選中值改為else，其值為“-1”時，顯示一個自定義的輸入框，若要將自定義的項加入到select的資料項中，需在後臺將自定義項存入對應的資料表中，這樣，在重新整理後，下一次訪問這個select時，該自定義項就會出出現在se

Axure之解決文字框無法輸入

在MacOs + Axure 8.0 開發中，在電腦鍵盤輸入數字“1”時，文字框內容無法顯示；快速輸入“123”，文字框顯示“23”，這時候再輸入“4”，又可以正常輸入並顯示了，真的十分奇怪！引起原因：Axure對中文輸入法支援不好。解決方法：把中文輸入法關閉，切換為英文鍵

keyup() 方法及文字框只輸入數字

keyup()，keydown方法一、定義和用法：完整key press過程分為兩個部分，按鍵被按下，然後按鍵被鬆開並復位； 1、當按鍵按下（

解決文字框中輸入字元限制---精確控制中文佔兩個位元組，英文佔一個位元組~

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script

C#/.NET 類與文字框繫結（值變化時自動變），資料繫結Binding

我個人使用的基本是這個過載， propertyName：繫結控制元件的某個屬性（加個雙引號變成字串型別） dataSource：指的是某個類 dataMember：代表類的某個具體屬性相關型別轉化也在下面， public void SetPar

JavaScript 限制文字框不可輸入英文單雙引號

<input id="workname" style="width: 200px" name="workname" value="" type="text" onkeyup="javascript:replaceLikeVal(this)" /> 正則實現re

input框限制只能輸入正整數，邏輯與和或運算有時需要限制文字框輸入內容的型別，本節分享下正則表示式限制文字框只能輸入數字、小數點、英文字母、漢字等程式碼。例如，輸入大於0的正整數程式碼

有時需要限制文字框輸入內容的型別，本節分享下正則表示式限制文字框只能輸入數字、小數點、英文字母、漢字等程式碼。例如，輸入大於0的正整數程式碼如下: <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^

微信小程式文字框限制輸入字數

效果圖 wxml程式碼 <view style="border: 1px solid #FFA6A6; border-radius: 10px;"> <textarea p

完整版文字框即時輸入資料監聽並下拉顯示匹配資料

相關推薦