码迷,mamicode.com
首页 > 微信 > 详细

仿微信的搜索功能

时间: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)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!