类似于通讯录的搜索功能

最新推荐文章于 2024-03-28 22:33:58 发布

宁波数联软件有限公司

最新推荐文章于 2024-03-28 22:33:58 发布

阅读量943

点赞数

分类专栏： js 文章标签：本地页面搜索功能

本文链接：https://blog.csdn.net/kai_wei/article/details/51382201

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

html部分：

<div class="weui_search_bar" id="search_bar">
            <form class="weui_search_outer" οnsubmit="return false;">
                <div class="weui_search_inner">
                    <i class="weui_icon_search"></i>
                    <input type="search" class="weui_search_input" id="search_input" placeholder="输入姓名搜索" οnchange="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();
			}
		}
	}
}