视图代码
<div class="new">
<div class="page__bd">
<div class="weui-search-bar" id="searchBar">
<form class="weui-search-bar__form">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="weui-cells searchbar-result" id="searchResult" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1); display: none;">
<div class="weui-cells weui-cells_checkbox">
<label class="weui-cell weui-check__label" v-bind:spell="item.userName" v-for='(item,index) in userList'>
<div class="weui-cell__hd">
<input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>{{item.userName}}</p>
</div>
</label>
</div>
</div>
</div>
</div>
Script代码
mounted() {
this.$ajax({
method: "get",
url: "../static/json/user1.json" //<---本地地址
})
.then(response => {
let _data1 = response.data;
if (response.data !== undefined) {
this.userList = _data1.userList;
}
})
.catch(function(err) {
console.log(err);
});
//搜索框
$(function() {
var $searchBar = $("#searchBar"),
$searchResult = $("#searchResult"),
$searchText = $("#searchText"),
$searchInput = $("#searchInput"),
$searchClear = $("#searchClear"),
$searchCancel = $("#searchCancel");
function hideSearchResult() {
$searchResult.hide();
$searchInput.val("");
}
function cancelSearch() {
hideSearchResult();
$searchBar.removeClass("weui-search-bar_focusing");
$searchText.show();
}
function searchName() {
var searchUserName = $("#searchInput").val();
if (searchUserName == "") {
$("#searchResult").show();
$(".weui-check__label").show();
} else {
$(".weui-check__label").each(function() {
//给选定标签增加属性作为标识
var spell = $(this).attr("spell");
console.log(spell);
if (spell.indexOf(searchUserName) != -1) {
$("#searchResult").show();
$(this).show();
} else {
$(this).hide();
}
});
}
}
$("#searchInput").bind("input propertychange", function() {
searchName();
});
$searchText.on("click", function() {
$searchBar.addClass("weui-search-bar_focusing");
$searchInput.focus();
});
$searchClear.on("click", function() {
hideSearchResult();
$searchInput.focus();
});
$searchCancel.on("click", function() {
cancelSearch();
$searchInput.blur();
});
});
}
json数据
{
"title": "用户",
"userList": [
{
"userName": "zhang_xiaozhe_张小喆"
},
{
"userName": "zhang_yanwen_章言文"
},
{
"userName": "zhang_xiaoxiao_章小小"
},
{
"userName": "shi_yanyan_史妍妍"
},
{
"userName": "wu_fanda_吴凡达"
}
]
}
