搜索历史和搜索建议、搜索结果的逻辑展示组件

搜索逻辑的判断展示思路

* 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>