搜索中心 (一) -基础布局-search搜索框组件-自定义按钮 & 历史记录与联想搜索切换-v-if-v-else_viceen的博客

搜索中心-基础布局-search搜索框组件-自定义按钮 & 历史记录与联想搜索切换-v-if-v-else

search搜索框组件-自定义按钮： https://youzan.github.io/vant/#/zh-CN/search#zi-ding-yi-an-niu
src/views/search/index.vue
<van-search v-model.trim="q" placeholder="请输入搜索关键词" shape="round" @search="onSearch"/>
q 搜索关键字
onSearch 搜索函数（虚拟键盘 enter 触发） 
历史记录： 
    <div class="history-box">
      <div class="head">
        <span>历史记录</span>
        <van-icon name="delete"></van-icon>
      </div>
      <van-cell-group>
        <van-cell>
          <a class="word_btn">电脑</a>
          <van-icon class="close_btn" slot="right-icon" name="cross"/>
        </van-cell>
      </van-cell-group>
    </div>
.history-box {
  padding: 0 20px;
  .head{
    line-height: 36px;
    color: #999;
    .van-icon{
      font-size: 16px;
      float: right;
      margin-top: 10px;;
  .van-cell{
    padding: 10px 0;
  .word_btn{
    color:#3296fa;
  .close_btn{
    margin-top:5px;
    color: #999;
联想搜索： 
	<van-cell-group class="suggest-box">
      <van-cell icon="search"><p><span>j</span>ava</p></van-cell>
    </van-cell-group>
.suggest-box{
  /deep/ .van-cell{
    padding: 10px 20px;
    color: #999;
      span{
        color: red;
历史记录与联想搜索切换 
	<van-cell-group class="suggest-box" v-if="q">
      <van-cell icon="search"><span>j</span>ava</van-cell>
    </van-cell-group>
    <div class="history-box" v-else>
      <div class="head">
        <span>历史记录</span>
        <van-icon name="delete"></van-icon>
      </div>
      <van-cell-group>
        <van-cell>
          <a class="word_btn">电脑</a>
          <van-icon class="close_btn" slot="right-icon" name="cross"/>
        </van-cell>
      </van-cell-group>
    </div>
                                    在ios中input输入内容后搜索，html提供type=search的模式，但是软键盘弹起后，键盘上没有“搜索”，必须在input外层加上form，必须有action&lt;form action=""&gt;&lt;input type="search" placeholder="" placeholder="请输入搜索" /&gt;&lt;/form&gt;...
                                    input[type=search]简介html5对表单元素做了一些增强，其中对input元素，我们可以指定更多的属性来控制它，如required，autofocus，maxlength等，具体有做了哪些增强，可以阅读官方文档，也可以参照MDN。我们现在要讲的是input[type=search]这个表单元素，不是讲他如何增强，而是主要讲如何更加方便的改变它默认的样式。input[type=sear
                                    关于若依框架搜索按钮$.table.search()的使用
1、搜索按钮页面第一个form中input标签，会依据name属性同名获得参数，不需要单独获取。
<form id="role-form">
					<div class="select-list">
					<input  type="hidden" name="deptId" id="deptId" th:value="${deptId}"/>
					<input type="hidden" n
android:icon="@mipmap/actionbar_search_icon"
android:actionViewClass="android.support.v7.widget.SearchView"
android:title=
<form action="/">
  <van-search  v-model="value" show-action placeholder="请输入搜索关键词"
    @search="onSearch" @cancel="onCancel" />
</form>
<!-- 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮 --&gt
                                    根据需求可以知道具体流程了，进入搜索 => 输入关键字=>产生搜索记录=>记录一次词条搜索记录（热搜榜）=>展示搜索结果（渲染接口数据）。在前端工作中，一般对于展示数据量比较多的页面来说，都是需要一个搜索功能来给予用户更优质的体验；这次展示的例子来源于我的工作中的摘录。看到需求的时候就需要有清晰的思路去编写代码，不然写出来的就是乱糟糟的东西，还需要不断的修改，养成先思考再编写的习惯，不要一股脑对着键盘一顿输出。最重要的js核心代码，重要的是理解方法逻辑，理解了就可以举一反三了。