前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空 搜索历史存储记录清除，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13343

效果图如下:

cc-hisSearchBar

使用方法

 // 不同的业务功能历史记录设置不同存储key  const kStorageKey = "storageKey"  // 执行搜索事件  doSearch() {  if (this.keyword == '') {  uni.showToast({  title: '请输入要搜索的内容',  icon: 'none'  });  return;  }  //  if (this.keyword && this.keyword !== '') {  this.saveKeyword(this.keyword); //保存为历史  }  uni.showLoading({  title: '搜索中...'  });  this.setData({  keywordList: []  });  uni.hideLoading()  uni.showModal({  title: "温馨提示",  content: '搜索的内容 = ' + this.keyword  })  },  //点击历史记录搜索  doHisSearch(item) {  console.log(item)  uni.showModal({  title: '点击的历史搜索条目',  content: '点击的历史搜索条目 = ' + item  })  },  

HTML代码实现部分

 <template>  <view class="content">  <view class="search-box">  <view class="input-box">  <input type="text" adjust-position="true" v-model="keyword" :placeholder="defaultKeyword"  placeholder-class="search_text" @confirm="doSearch" data-key="false" confirm-type="search"  @input="onclear"></input>  <image src="/static/close.png" alt="前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空 搜索历史存储记录清除" @tap="clears" v-if="shows == true"></image>  </view>  <view class="search-btn" @tap="doSearch" data-key="false" :style="'background:' + colors">搜索</view>  </view>  <view class="search-keyword">  <scroll-view class="keyword-box" scroll-y>  <view class="keyword-block" v-if="oldKeywordList.length>0">  <view class="keyword-list-header">  <view>历史搜索</view>  <view>  <image @tap="oldDelete" src="/static/delete.png" alt="前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空 搜索历史存储记录清除"></image>  </view>  </view>  <view class="keyword">  <view v-for="(item, index) in oldKeywordList" :key="index" @tap="doHisSearch(item)">{{item}}  </view>  </view>  </view>  </scroll-view>  </view>  </view>  </template>  <script>  // 不同的业务功能历史记录设置不同存储key  const kStorageKey = "storageKey"  import Vue from 'vue'  Vue.mixin({  methods: {  setData: function(obj, callback) {  let that = this;  const handleData = (tepData, tepKey, afterKey) => {  tepKey = tepKey.split('.');  tepKey.forEach(item => {  if (tepData[item] === null || tepData[item] === undefined) {  let reg = /^[0-9]+$/;  tepData[item] = reg.test(afterKey) ? [] : {};  tepData = tepData[item];  } else {  tepData = tepData[item];  }  });  return tepData;  };  const isFn = function(value) {  return typeof value == 'function' || false;  };  Object.keys(obj).forEach(function(key) {  let val = obj[key];  key = key.replace(/]/g, '').replace(/[/g, '.');  let front, after;  let index_after = key.lastIndexOf('.');  if (index_after != -1) {  after = key.slice(index_after + 1);  front = handleData(that, key.slice(0, index_after), after);  } else {  after = key;  front = that;  }  if (front.$data && front.$data[after] === undefined) {  Object.defineProperty(front, after, {  get() {  return front.$data[after];  },  set(newValue) {  front.$data[after] = newValue;  that.$forceUpdate();  },  enumerable: true,  configurable: true  });  front[after] = val;  } else {  that.$set(front, after, val);  }  });  isFn(callback) && this.$nextTick(callback);  }  }  });  var app = getApp();  export default {  data() {  return {  defaultKeyword: "",  keyword: "",  oldKeywordList: [],  hotKeywordList: [],  keywordList: [],  forbid: '',  shows: false,  colors: ''  };  },  components: {},  props: {},  /**  * 生命周期函数--监听页面加载  */  onLoad: function(options) {  this.setData({  colors: app.globalData.newColor  });  this.init();  },  methods: {  init() {  this.loadDefaultKeyword();  this.loadOldKeyword();  },  loadDefaultKeyword() {  //定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字  this.setData({  defaultKeyword: "请输入搜索的内容"  });  },  //加载历史搜索,自动读取本地Storage  loadOldKeyword() {  uni.getStorage({  key: kStorageKey,  success: res => {  var OldKeys = JSON.parse(res.data);  this.setData({  oldKeywordList: OldKeys  });  }  });  },  // 执行搜索事件  doSearch() {  if (this.keyword == '') {  uni.showToast({  title: '请输入要搜索的内容',  icon: 'none'  });  return;  }  //  if (this.keyword && this.keyword !== '') {  this.saveKeyword(this.keyword); //保存为历史  }  uni.showLoading({  title: '搜索中...'  });  this.setData({  keywordList: []  });  uni.hideLoading()  uni.showModal({  title: "温馨提示",  content: '搜索的内容 = ' + this.keyword  })  // uni.showToast({  // title: '暂无结果',  // icon: 'none'  // })  },  onclear(e) {  this.setData({  keyword: e.detail.value,  shows: e.detail.value !== '' ? true : false  });  },  //保存关键字到历史记录  saveKeyword(keyword) {  uni.getStorage({  key: kStorageKey,  success: res => {  var OldKeys = JSON.parse(res.data);  var findIndex = OldKeys.indexOf(keyword);  if (findIndex == -1) {  OldKeys.unshift(keyword);  } else {  OldKeys.splice(findIndex, 1);  OldKeys.unshift(keyword);  } //最多10个纪录  OldKeys.length > 10 && OldKeys.pop();  uni.setStorage({  key: kStorageKey,  data: JSON.stringify(OldKeys)  });  this.setData({  oldKeywordList: OldKeys //更新历史搜索  });  },  fail: e => {  var OldKeys = [keyword];  uni.setStorage({  key: kStorageKey,  data: JSON.stringify(OldKeys)  });  this.setData({  oldKeywordList: OldKeys //更新历史搜索  });  }  });  },  oldDelete() {  uni.showModal({  content: '确定清除历史搜索记录？',  success: res => {  if (res.confirm) {  console.log('用户点击确定');  this.setData({  oldKeywordList: []  });  uni.removeStorage({  key: kStorageKey  });  } else if (res.cancel) {  console.log('用户点击取消');  }  }  });  },  clears() {  this.setData({  keyword: '',  keywordList: [],  });  },  //点击历史记录搜索  doHisSearch(item) {  console.log(item)  uni.showModal({  title: '点击的历史搜索条目',  content: '点击的历史搜索条目 = ' + item  })  },  }  };  </script>  <style scoped lang="scss">  view {  display: block;  }  .search-box {  background-color: rgb(242, 242, 242);  padding: 15upx 2.5%;  display: flex;  justify-content: space-between;  position: sticky;  top: 0;  }  .search-box .mSearch-input-box {  width: 100%;  }  .search-box .input-box {  width: 85%;  flex-shrink: 1;  display: flex;  justify-content: center;  align-items: center;  }  .search-box .search-btn {  width: 15%;  margin: 0 0 0 2%;  display: flex;  justify-content: center;  align-items: center;  flex-shrink: 0;  font-size: 24upx;  color: #fff;  background: linear-gradient(to right, #4492EB, #3F92EE);  border-radius: 60upx;  }  .search-box .input-box>input {  width: 95%;  height: 60upx;  font-size: 24upx;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  margin: 0;  background-color: #ffffff;  }  .placeholder-class {  color: #9e9e9e;  }  .search-keyword {  width: 100%;  background-color: rgb(242, 242, 242);  }  .keyword-list-box {  height: calc(100vh - 110upx);  padding-top: 10upx;  border-radius: 20upx 20upx 0 0;  background-color: #fff;  }  .keyword-entry-tap {  background-color: #eee;  }  .keyword-entry {  width: 94%;  height: 80upx;  margin: 0 3%;  font-size: 30upx;  color: #333;  display: flex;  justify-content: space-between;  align-items: center;  border-bottom: solid 1upx #e7e7e7;  }  .keyword-entry image {  width: 60upx;  height: 60upx;  }  .keyword-entry .keyword-text,  .keyword-entry .keyword-img {  height: 80upx;  display: flex;  align-items: center;  }  .keyword-entry .keyword-text {  width: 90%;  }  .keyword-entry .keyword-img {  width: 10%;  justify-content: center;  }  .keyword-box {  height: calc(100vh - 110upx);  border-radius: 20upx 20upx 0 0;  background-color: #fff;  }  .keyword-box .keyword-block {  padding: 10upx 0;  }  .keyword-box .keyword-block .keyword-list-header {  width: 94%;  padding: 10upx 3%;  font-size: 27upx;  color: #333;  display: flex;  justify-content: space-between;  }  .keyword-box .keyword-block .keyword-list-header image {  width: 40upx;  height: 40upx;  }  .keyword-box .keyword-block .keyword {  width: 94%;  padding: 3px 3%;  display: flex;  flex-flow: wrap;  justify-content: flex-start;  }  .keyword-box .keyword-block .hide-hot-tis {  display: flex;  justify-content: center;  font-size: 28upx;  color: #6b6b6b;  }  .keyword-box .keyword-block .keyword>view {  display: flex;  justify-content: center;  align-items: center;  border-radius: 38upx;  padding: 0 20upx;  margin: 10upx 20upx 10upx 0;  height: 60upx;  font-size: 24upx;  background-color: rgb(242, 242, 242);  color: #6b6b6b;  line-height: 60upx;  }  .search_text {  font-size: 24upx;  color: #B6B6C6;  }  .input-box {  position: relative;  height: 60upx;  font-size: 24upx;  border: 0;  border-radius: 60upx;  -webkit-appearance: none;  appearance: none;  padding: 0 3%;  margin: 0;  background-color: #ffffff;  }  .input-box image {  height: 40upx;  width: 40upx;  float: right;  position: absolute;  right: 2%;  top: 50%;  transform: translateY(-50%);  z-index: 100;  }  </style>