视图代码
{{item.userName}}
2018-09-13 基于Vue的搜索栏功能实现（we-ui）
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_吴凡达"
}
]
}