vue实现搜索框记录搜索历史_2018-09-13 基于Vue的搜索栏功能实现（we-ui）

视图代码

搜索

取消

{{item.userName}}

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_吴凡达"

}

]

}