HTML即時搜索（防老年癡呆）

維護一個APP項目時，本來是個下拉選擇的input，因爲選擇項太多了，要求方便使用，我就做了個及時搜索，blur失焦時做了驗證處理。

HTML:

<div class="mui-col-sm-6 mui-col-xs-6 mui-row">
    <div class="mui-col-sm-4 mui-col-xs-4 ab-c">發貨倉庫:</div>
        <div class="mui-col-sm-8 mui-col-xs-8 plf">
            <div class="mui-row">
                <div class="mui-col Warehouse">
                    <input type="text" id="storeListInput" name="Warehouse" placeholder="請輸入倉庫名稱" value="" >
                    <input type="hidden" id="dpmck" name="dpmck"  placeholder="請輸入倉庫名稱" value="">
                    <img src="../../img/del.svg" alt="" id="closeText" class="closeText" οnclick="closeText()" style="position: absolute;top: 8px;right: 15px">
                </div>
             </div>
             <div id="ck" class="masks">
             <div class="mui-scroll-wrapper">
             <div class="mui-scroll">
                 <ul class="mui-table-view" id="storehouseList">
                     <li class="mui-table-view-cell ab-c" data-index="{{stordocname}}" data-dpmck="{{dpmck}}">
                        {{stordocname}}
                     </li>
                 </ul>
             </div>
          </div>
       </div>
    </div>
 </div>

JS:

        //清除倉庫搜索框
        $('#closeText').click(function() {
            $('#storeListInput').val('');
        });
        
        //focus獲取鼠標焦點時
        $("#storeListInput").focus(function () {
            document.getElementById('ck').style.display = 'block';
        });
        //focus失去鼠標焦點時
        $("#storeListInput").blur(function(){
            document.getElementById('ck').style.display = 'none';
            var searchval = $.trim($("#storeListInput").val());
            var notEqual=true;
                if(searchval != ''){
                    $("#ck li").each(function(){
                        var str=$.trim($(this).text());      //字符串的值記得要去掉空格
                        if(str!=searchval){
                            notEqual=false;
                        }else{
                            notEqual=true;
                            return false;
                        }
                    });
                    if(notEqual==false){
                        $('#storeListInput').val('');
                        alert("請正確選擇發貨倉庫："+searchval+"不合法！");
                    }
                }
        });
        //發貨倉庫即時搜索
        $('.Warehouse').bind('input propertychange', function() {selectmember();});
        function selectmember(){
            document.getElementById('ck').style.display = 'block';
            searchval = $.trim($("#storeListInput").val());
                if(searchval != ''){
                    $("#ck li").each(function(){
                         var str=$(this).text();
                        if(str.indexOf(searchval)>0){    //顯示span框的值，用的字符串的包含
                            $(this).show();
                        }else{
                            $(this).hide();
                        }
                    });
                }
        }

       //點擊獲取值
        mui('#ck').on('tap', 'li', function() {
            // 獲取onclick
            var selectVal = $(this).attr('data-index');
            //mui給html賦值
            var selectID = document.querySelector("#storeListInput");
            selectID.value = selectVal;
            $("#dpmck").val($(this).attr("data-dpmck"));
            document.getElementById('ck').style.display = 'none';
        });

知識點一：

JS字符串包含：

方法一: indexOf()

var str = "book";
str.indexOf("ok") != -1
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。如果要檢索的字符串值沒有出現，則該方法返回 -1。

方法二: search()

var str = "book";
str.search("ok") != -1
search() 方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。如果沒有找到任何匹配的子串，則返回 -1。

方法三:match()

var str = "book";
var reg = RegExp(/ok/);
console.log(reg.match(str)); // true
match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。

方法四:test()

var str = "book";
var reg = RegExp(/ok/);
console.log(reg.test(str)); // true
test() 方法用於檢索字符串中指定的值。返回 true 或 false。

方法五:exec()

var str = "book";
var reg = RegExp(/ok/);
console.log(reg.exec(str)); // true
exec() 方法用於檢索字符串中的正則表達式的匹配。返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值爲 null。

知識點二：

JS字符串去空格：

1. replace正則匹配方法

去除字符串內所有的空格：str = str.replace(/\s*/g,"");

　　去除字符串內兩頭的空格：str = str.replace(/^\s*|\s*$/g,"");

　　去除字符串內左側的空格：str = str.replace(/^\s*/,"");

　　去除字符串內右側的空格：str = str.replace(/(\s*$)/g,"");

2. str.trim()方法

trim()方法是用來刪除字符串兩端的空白字符並返回,只能去除兩邊的空格：var str_1 = str.trim();

單獨去除左側空格則使用 str.trimLeft(); //var str_1 = str.trimLeft();

　　單獨去除右側空格則使用 str.trimRight();//var str_1 = str.trimRight();

3. JQ方法：$.trim(str)方法

　　$.trim() 函數用於去除字符串兩端的空白字符：var str_1 = $.trim(str);