搜索框的监听、节流、软键盘搜索、以及在安卓和ios上的区别

模板：

搜索框HTML：
这是基本的input 写法：

  <input id="search" type="text" name="search">

升级写法：
要求在手机端点击input输入框时，软键盘的回车键显示为搜索，点击该键实现搜索功能。

<form class="form" action="javascript:searchIt();" id="form">
	<input id="search" type="search" maxlength="16"/>
</form>

在此要配合css：
    将type=search 时搜索框右侧叉号去掉。

.search  input[type=search]::-webkit-search-cancel-button{
    	-webkit-appearance: none;
}

再配合上function searchIt(){} 函数即可。

节流JS：

<script>
        function queryData(text){
            console.log("搜索：" + text);
        }
        var input = document.getElementById("search");
        input.addEventListener("keyup", function(event){
            throttle(queryData, null, 500, this.value);
            // queryData(this.value);
        });
        
        function throttle(fn,context,delay,text){
            clearTimeout(fn.timeoutId);
            fn.timeoutId = setTimeout(function(){
                fn.call(context,text);
            },delay);
        }
   </script>

监听input的节流实例：

// 监听 input 内容
var keyWord, page=1, isOpen=true;
function listenSearch(page){
    var cpLock = false;
    document.getElementById("search").addEventListener('compositionstart', function () {
        cpLock = true;
    });
    document.getElementById("search").addEventListener('compositionend', function () {
        cpLock = false;
        //这一段 if 中的内容在安卓上可以不写，但在ios上必须要写，否则无相应监听事件触发。
        if (!cpLock) {
            keyWord = e.target.value;
            throttle(queryData, null, 300, keyWord);
        }
    });
    document.getElementById("search").addEventListener('input', function (e) {
        if (!cpLock) {
            keyWord = e.target.value;
            throttle(queryData, null, 300, keyWord);
        }
    });
}
function throttle(fn, context, delay, text) {
    clearTimeout(fn.timeoutId);
    fn.timeoutId = setTimeout(function(){
        fn.call(context, text);
    }, delay);
}
    function queryData(keyWord) {
		if(isOpen){
			api.openFrame({
				name: 'scenicList_frm',
				url: './scenicList_frm.html',
				rect: {
					x: 0,
					y: $api.byId('header').offsetHeight,
					w: 'auto',
					h: api.winHeight - $api.byId('header').offsetHeight
				},
				pageParam: {
					keyWord: keyWord
				}
			});
		}
		isOpen=false;
		api.sendEvent({
			name: 'input',
			extra: {
				keyWord: keyWord
			}
		});
	}

更多详情以及增强版的节流操作见：https://www.cnblogs.com/LuckyWinty/p/5949970.html