select 城市搜索下拉框及关键字查找

快应用-小米厂商下 select 下拉框及关键字搜索。

自定义搜索组件 search-bar

<template>
  <div class="search-city">
    <div class="box">
      <image
        class="search-icon"
        src="../../../assets/images/search.png"
      ></image>
      <input
        id="input"
        style="placeholder-color:{{placeholderColor}}"
        enterkeytype="{{enterkeytype}}"
        type="text"
        value="{{value}}"
        onchange="bindChange"
        onfocus="bindFocus"
        onblur="bindBlur"
        maxlength="{{maxlength}}"
        placeholder="{{placeholder}}"
        disabled="{{disabled}}"
        onenterkeyclick="enterEvent"
        onselectionchange="bindSelectionchange"
      />
      <image
        if="{{clearIcon&&clear}}"
        onclick="bindClear"
        class="close-icon"
        src="../../../assets/images/close.png"
      ></image>
    </div>
  </div>
</template>

<script>
export default {
  data: {
    clearIcon: false,
    value: "",
  },
  props: {
    placeholderColor: {
      type: String,
      default: "rgb(128, 128, 128)"
    },
    placeholder: {
      type: String,
      default: "请输入城市名称"
    },
    maxlength: {
      type: Number
    },
    disabled: {
      type: Boolean,
      default: false
    },
    inputFocus: {
      type: Boolean,
      default: false
    },
    inputValue: {
      type: String,
      default: ""
    },
    clear: {
      type: Boolean,
      default: true
    },
    select: {
      type: Boolean,
      default: false
    },
    enterkeytype: {
      type: String,
      default: "defualt"
    }
  },
  onInit() {
    if (this.inputValue) {
      this.value = this.inputValue;
    }
  },
  onReady() {
    if (this.inputFocus === true && this.disabled === false) {
      this.$element("input").focus({ focus: true });
    }
    if (this.select === true) {
      this.$element("input").select();
    }
  },
  bindFocus(evt) {
    console.log('bindFocus');
    this.$emit("focus", { event: evt });
  },
  bindBlur(evt) { },
  bindClear() {
    this.value = ""
    this.clearIcon = false;
    this.$emit("change", this.value);
    this.$element("input").focus({ focus: false });
  },
  bindChange(evt) {
    this.$emit("change", evt.value);
    this.value = evt.value;
    if (this.value !== "") {
      this.clearIcon = true;
    }
  },
  enterEvent(evt) {
    this.$emit("enterkeyclick", { event: evt });
  },
  bindSelectionchange(evt) {
    this.$emit("selectionchange", { event: evt });
  }
};
</script>

<style lang="less">
.search-city {
  background-color: #ffffff;
  height: 110px;
  width: 100%;
  padding: 16px 20px;
  align-items: center;
  .box {
    background-color: #f4f4f4;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    align-items: center;
    padding: 0 10px;

    .search-icon {
      width: 40px;
      height: 40px;
    }
    .close-icon {
      margin-right: 15px;
      width: 30px;
      height: 30px;
    }
    input {
      flex: 1;
      font-size: 30px;
      margin-left: 10px;
      background-color: #f4f4f4;
      height: 100%;
    }
    .default {
      margin-left: 10px;
      color: #808080;
      text-align: center;
    }
  }
}
</style>

组件引用

<import name="my-search-bar" src="./search-bar/index.ux"></import>

<template>
  <div class="city-page">
    <div class="search-box" style="overflow: visible">
      <stack>
        <div
          class="search-result"
          style="visibility:{{searchText?'visible':'hidden'}}"
        >
          <list class="search-r-l">
            <list-item
              type="city-row"
              class="list-item"
              for="{{searchLikeList}}"
              @click="selectCity($item.areaName)"
            >
              <text>{{ $item.areaName }}</text>
            </list-item>
          </list>
        </div>
        <my-search-bar
          input-value="{{searchText}}"
          @change="inputValueChange"
        ></my-search-bar>
      </stack>
    </div>

    <div class="hot-list">
      <text class="module-title">热门城市</text>
      <div class="city-lists">
        <div
          class="hot-city-item"
          for="{{hotCitys}}"
          @click="selectCity($item)"
        >
          <text
            class="sort-num"
            style="background-color:{{$idx==0?'#F05862':$idx==1||$idx==2?'#F5924F':'#BCBCBC'}}"
          >
            {{ $idx + 1 }}
          </text>
          <text class="city-name">{{ $item }}</text>
        </div>
      </div>
    </div>

    <div class="search-history">
      <div class="s-h-h">
        <text class="module-title">搜索历史</text>
        <text class="history-clear" @click="clearSearchHistory">清空</text>
      </div>
      <div class="history-list">
        <text
          class="history-item"
          for="{{searchHostoryList}}"
          @click="selectCity($item)"
        >
          {{ $item }}
        </text>
      </div>
    </div>
    
  </div>
</template>

<script>
import router from '@system.router'
import storage from '@system.storage'
export default {
  private: {
    hotCitys: ["北京", "上海", "广州", "深圳", "杭州", "南京"],
    searchText: "",
    isShowResultPopup: false,
    searchLikeList: [],
    searchHostoryList: [],
  },

  async onInit() {
    this.$watch('searchText', 'searchTextWatch')
    this.searchHostoryList = await $tools.getObjCatchStorage("CITY_HISTORY") || []
  },
  searchTextWatch(newV) {
    console.log(newV, 'newVnewV');
    if (newV) {
      this.isShowResultPopup = true
    }

  },
  async inputValueChange(eve) {
    this.searchText = eve.detail
    // ... 输入框值改变，匹配相应结果资源
  },
  async selectCity(cityName) {
    $utils.setStorage("CURRENT_CITY", cityName)
    this.setSearchHistory(cityName)
    // ... 执行点击城市后的代码逻辑
  },
  // 生成搜索城市的历史记录
  async setSearchHistory(cityName) {
    let historyInfo = await $tools.getObjCatchStorage("CITY_HISTORY")
    if (historyInfo) {
      let i = historyInfo.findIndex(e => e == cityName)
      if (i != -1) {
        let sp = historyInfo.splice(i, 1)
        historyInfo.unshift(sp[0])
      } else {
        historyInfo.unshift(cityName)
      }
    } else {
      historyInfo = [cityName]
    }
    this.searchHostoryList = historyInfo
    $utils.setStorage("CITY_HISTORY", historyInfo)
  },
  // 清空搜索历史记录
  clearSearchHistory() {
    $utils.deleteStorage("CITY_HISTORY")
    this.searchHostoryList = []
  },

}
</script>

<style lang="less">
.city-page {
  width: 750px;
  height: 100%;
  flex-direction: column;
  background-color: #f5f6fa;
}

.search-box {
  height: 110px;
  .search-result {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 110px;
    background-color: #ffffff;
    flex-direction: column;
    flex: 1;
    overflow: visible;
    .search-r-l {
      width: 750px;
      overflow: visible;

      .list-item {
        padding: 0 40px;
        height: 80px;
        border-bottom: 1px solid #e1e1e1;
      }
    }
  }
}

.module-title {
  font-size: 32px;
  font-weight: bold;
  color: #000000;
}
.hot-list {
  background-color: #ffffff;
  padding: 20px 30px;
  flex-direction: column;

  .city-lists {
    margin-top: 20px;
    flex-wrap: wrap;

    .hot-city-item {
      margin-bottom: 20px;
      width: 50%;
      align-items: center;

      .sort-num {
        padding: 8px;
        margin-right: 14px;
        width: 30px;
        height: 30px;
        background-color: #daa520;
        border-radius: 2px;
        color: #ffffff;
        font-size: 26px;
        text-align: center;
      }
      .city-name {
        font-size: 30px;
        color: #000000;
      }
    }
  }
}

.search-history {
  margin-top: 20px;
  padding: 20px 30px;
  background-color: #ffffff;
  flex: 1;
  flex-direction: column;

  .s-h-h {
    justify-content: space-between;
    align-items: center;
    .history-clear {
      font-size: 30px;
      font-weight: 600;
      opacity: 0.8;
    }
  }
  .history-list {
    margin-top: 30px;
    .history-item {
      background-color: #f5f6fa;
      color: #000;
      padding: 10px 20px;
      margin: 0 10px;
      border-radius: 6px;
    }
  }
}

</style>

效果图：