类似于通讯录的搜索功能

最新推荐文章于 2021-05-26 11:09:42 发布

原创最新推荐文章于 2021-05-26 11:09:42 发布 · 993 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#本地页面搜索功能

js 专栏收录该内容

17 篇文章

订阅专栏

html部分：

<div class="weui_search_bar" id="search_bar">
            <form class="weui_search_outer" onsubmit="return false;">
                <div class="weui_search_inner">
                    <i class="weui_icon_search"></i>
                    <input type="search" class="weui_search_input" id="search_input" placeholder="输入姓名搜索" onchange="searchTitle(this);"required="">
                    <a href="javascript:" class="weui_icon_clear" id="search_clear"></a>
                </div>
                <label for="search_input" class="weui_search_text" id="search_text" style="display: none;">
                    <i class="weui_icon_search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="weui_search_cancel" id="search_cancel">取消</a>
        </div>

js代码部分

function searchTitle(obj){
	var search_text = $("#search_input").val();
	var visitFormList = $("#client_list p");
	if(search_text != ""){
		for(var i=0;i<visitFormList.length;i++){
			$(visitFormList[i]).parent().parent().hide();
			if (visitFormList[i].innerHTML.indexOf(search_text)>=0) {
				$(visitFormList[i]).parent().parent().show();
			}
		}
	}
}