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);

知识点三：

       propertychange 监听事件：

监听input的各种事件改变value值都会触发。