仿微信的搜索功能

时间：2019-08-20 10:30:58 阅读：111 评论：0 收藏：0 [点我收藏+]

标签：表单 fas transform 移动 searchbar search opacity ret content

使用weui来开发基于微信公众号，weui地址：https://weui.shanliwawa.top/index.html

input的type设置为search，而且外面要用form表单包围，这样再移动端弹起软键盘的时候，才能显示搜索，不然一般是换行

<form class="weui-search-bar__form" action="javascript:return true;">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input
            class="weui-search-bar__input"
            id="searchInput"
            @focus="focusfns()"
            placeholder="请输入搜索内容"
            type="search"
          />
          <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 id="serach_size">请输入搜索内容</span>
        </label>
</form>

$(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();

$("#searchTemplate").hide();

}

$("form.weui-search-bar__form").submit(function() {

//提交需要做的事情

});

$("#searchInput").bind("input propertychange", function() {

let searchContent = $("#searchInput")

.val()

.trim();

if (searchContent == "") {

$("#searchResult").hide();

$("#searchTemplate").show();

}

});

$searchText.on("click", function() {

$searchBar.addClass("weui-search-bar_focusing");

$searchInput.focus();

});

$searchClear.on("click", function() {

hideSearchResult();

$("#searchTemplate").show();

$searchInput.focus();

});

$searchCancel.on("click", function() {

cancelSearch();

$searchInput.blur();

});

注意：form表单有自动提交功能的，所以设置action：javascript:return true;，虽然语法上不合理，但是没有关系，这个只是控制台报错。

而且之前我使用click绑定事件，然后返回false，例如：

<form class="weui-search-bar__form" @click="onClick()">
...
</form>
function onClick(){
return fasle;
}

但是出现ios弹出软键盘之后，输入文字，不显示搜索字体而且电脑端enter键不会搜索，所以最终采用
action：javascript:return true;解决。

仿微信的搜索功能

标签：表单 fas transform 移动 searchbar search opacity ret content

原文地址：https://www.cnblogs.com/dehuachenyunfei/p/wechat_search.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行