标签：逻辑 展示 建议 keywords 搜索 组件 input

搜索逻辑的判断展示思路

* 1. 如果 keywords 是空，就显示搜索历史    * 2. 如果 input 聚焦，并且搜索关键词 keywords 不为空，就显示搜索建议    * 3. 点击搜索按钮或者在input框聚焦状态下按下 enter 触发 input 的时候展示搜索结果

  <form action="/">
      <van-search
        class="searchBox"
        v-model="keywords"
        show-action
        background="#4694fa"
        placeholder="请输入搜索关键词"
        @search="onSearch(keywords)"
        @cancel="$router.go(-1)"
        @focus="suggestShow = true"
      />
      <!-- 搜素历史 关键词为空 -->
      <searchHistory
        @search="onSearch"
        :search-histories="searchHistories"
        v-if="keywords === ''"
      ></searchHistory>
      <!-- lishi -->
      <!-- 搜素建议 关键词不为空而且触发了聚焦事件显示建议组件 -->
      <searchSuggest
        v-else-if="suggestShow"
        :keywords="keywords"
        @search="onSearch"
      ></searchSuggest>
      <!-- 搜索结果 -->
      <searchResult v-else :keywords="keywords"></searchResult>
    </form>

ps：action 不为零为了ios的手机端输入的时候显示搜索按钮 ；

关系：

 

 搜索框 index.vue 和 搜索建议的关系 ；

in

 

 

 

 

  <form action="/">       <van-search         class="searchBox"         v-model="keywords"         show-action         background="#4694fa"         placeholder="请输入搜索关键词"         @search="onSearch(keywords)"         @cancel="$router.go(-1)"         @focus="suggestShow = true"       />       <!-- 搜素历史 关键词为空 -->       <searchHistory         @search="onSearch"         :search-histories="searchHistories"         v-if="keywords === ''"       ></searchHistory>       <!-- lishi -->       <!-- 搜素建议 关键词不为空而且触发了聚焦事件显示建议组件 -->       <searchSuggest         v-else-if="suggestShow"         :keywords="keywords"         @search="onSearch"       ></searchSuggest>       <!-- 搜索结果 -->       <searchResult v-else :keywords="keywords"></searchResult>     </form>

标签：逻辑,展示,建议,keywords,搜索,组件,input
From： https://www.cnblogs.com/zhulongxu/p/16811115.html