模板:
搜索框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