weui 搜索框的使用

Posted 2022-01-21 HackShendi

Hello, I’m Shendi

最近需要使用到搜索框，搜索框输入内容后出现提示内容，于是选用了 weui 的搜索框

对于 DOM 的操作，我使用的 vue，没有用到 vue 的也可以自己使用js手动循环生成 DOM

效果

引入库

<!-- weui -->
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.0.1/weui.min.css">
<script type="text/javascript" src="https://res.wx.qq.com/t/wx_fed/cdn_libs/res/weui/1.2.3/weui.min.js"></script>

搜索框

<!-- 其中 v 开头的属性都是 vue 的语法 -->
<div id='search'>
	<div class="weui-search-bar" id="searchBar">
		<form id="searchForm" action='提交的地址' role="combobox" aria-haspopup="true" aria-expanded="false" aria-owns="searchResult" class="weui-search-bar__form">
			<div class="weui-search-bar__box">
				<i class="weui-icon-search"></i>
				<input id="searchInput" name='表单提交的属性名称' type="search" autoComplete="off" aria-controls="searchResult" class="weui-search-bar__input" placeholder="搜索" required/>
				<a href="javascript:" role="button" title="清除" class="weui-icon-clear" id="searchClear"></a>
			</div>
			<label for="searchInput" class="weui-search-bar__label" id="searchText">
				<i class="weui-icon-search"></i>
				<span aria-hidden="true">请输入你想搜索的内容</span>
			</label>
		</form>
		<a href="javascript:" role="button" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
	</div>
	<!-- 搜索的匹配内容列表 -->
	<div role="listbox" class="weui-cells searchbar-result" id="searchResult">
		<!-- 具体内容，没有使用到 vue 的可以通过 dom 循环 appendChild 的方式 -->
		<div v-for='result in searchResult' v-on:click="search(result)" role="option" class="weui-cell weui-cell_active weui-cell_access">
			<div class="weui-cell__bd weui-cell_primary">
				<p> result </p>
			</div>
		</div>
	</div>
</div>

初始化

接下来在 js 中初始化

要先引入库

/********** 搜索框部分 **********/
// 此处是 vue 部分
var search = new Vue(
    el : "#search",
    data : 
        // 搜索框所匹配的结果列表
        searchResult : [],
    ,
    methods: 
        /** 关键词被点击直接搜索 */
        search : function (key) 
            $("#searchInput").val(key);
            $("#searchForm")[0].submit();
        
    
);

// 没有使用到vue的使用这一部分即可
// 初始化 weui 搜索框,只能在vue后执行,否则无效果
weui.searchBar('#searchBar');
$("#searchInput")[0].oninput = function () 
    var key = $("#searchInput").val();
    if (key != "") 
    	// 执行 ajax 获取匹配的数据填充搜索框内容,这里可以自行使用 jquery 的 ajax 等
        sw.$(
            url : "url",
            success : function (data) 
                var result = sw.tojson(data);
                search.searchResult = result;
            
        );
     else 
        search.searchResult = [];
    
;
// 当搜索框有修改时隐藏提示内容
$("#searchInput").change(function ()  setTimeout(function () search.searchResult = [];, 100); );

css 部分,可以自行更改

/** 搜索框样式部分 */
#search 
	margin: 12px 0;
	position: relative;

#searchResult 
	position: absolute;
    z-index: 1;
    width: 100%;

.weui-search-bar
	background-color: #f7f7f9!important;
	border-radius: 22px;

.weui-search-bar__form 
	background-color: #f7f7f9!important;

.weui-search-bar__label 
	background: #f7f7f9!important;

.weui-cells:after, .weui-cells:before 
	content: none!important;

.weui-cell:before 
	left: 12px!important;
	right: 12px!important;