視圖代碼
<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() {
? ? ? ? ? ? //給選定標(biāo)簽增加屬性作為標(biāo)識
? ? ? ? ? ? ? ? ? ? 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數(shù)據(jù)
{
? ? "title": "用戶",
? ? "userList": [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? "userName": "zhang_xiaozhe_張小喆"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? "userName": "zhang_yanwen_章言文"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? "userName": "zhang_xiaoxiao_章小小"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? "userName": "shi_yanyan_史妍妍"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? "userName": "wu_fanda_吳凡達(dá)"
? ? ? ? ? ? ? ? }
? ? ]
}
