微信小程序中怎么实现一个搜索框组件

今天就跟大家聊聊有关微信小程序中怎么实现一个搜索框组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

10余年的山西网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整山西建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“山西网站设计”,“山西网站推广”以来，每个客户项目都认真落实执行。

search.wxml

  
    

    
    
    
  
  取消


  
    
    历史搜索
  
  
    
      
    
  
  
    
    热门搜索
  
  
    
      
    
  


  
    
  

search.wxss

.header{
  position: fixed;
  top:0;
  left: 0;
  z-index: 300;
  height:100rpx;
  display: flex;
  padding-left:20rpx;
  padding-right:20rpx;
  align-items: center;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
  flex-direction: row;
  background: #fff;
}
.search{
  width:530rpx;
  height:70rpx;
  background: rgb(245, 245, 245);
  border-radius:30rpx;
  padding-left: 20rpx;
  display: flex;
  align-items: center;
}
.search input{
  flex:1;
  margin-left: 20rpx;
}
.cancel{
  height:70rpx;
  border-radius: 30rpx;
  line-height: 70rpx;
  border-color: #888;
}
.container{
  margin-top: 100rpx;
  padding: 20rpx;
}
.title{
  display: flex;
  height:90rpx;
  align-items: center;
}
.line{
  height:40rpx;
  width:10rpx;
  background: #333;
}
.result{
  margin-top: 100rpx;
  padding-left:90rpx;
  padding-right:90rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
v-book{
  margin-bottom: 60rpx;
}

search.js

// components/search/search.js
import { Keyword } from "../../models/keyword";
import { BookModel } from "../../models/book";
const keyword = new Keyword();
const bookModel = new BookModel();
Component({
 /**
  * 组件的属性列表
  */
 properties: {

 },

 /**
  * 组件的初始数据
  */
 data: {
  words: [],
  hots: [],
  books:[],
  isSearch:false,
  //给输入的默认值
  value:""
 },

 /**
  * 组件的方法列表
  */
 methods: {
  onConfirm(event) {
   let value = event.detail.value;
   // 只有在服务器上能搜索到的关键字才添加到缓存中
   bookModel.getBookSearch(0, value).then(res => {
    if (res.total) {
     keyword.addHistory(value);
     let words = keyword.getHistory();
     this.setData({
      words,
      books:res.books,
      isSearch:true
     })
    }// console.log(res);
   })
  },
   onToggle() {
   this.setData({
    value: "",
    isSearch:false
   })
  },
  onCancel() {
   this.setData({
    isSearch: false
   })
  }
 },
 attached() {
  // keyword.getHistory();
  this.setData({
   words: keyword.getHistory()
  })
  keyword.getHotData().then(res => {
   // console.log(res.hot);
   this.setData({
    hots: res.hot
   })
  })
 }
})

models/keyword

import {HTTP} from "../utils/http-p";
class Keyword extends HTTP{
  getHistory(){
    const words = wx.getStorageSync('q')
    if(words){
      return words
    }else{
      return [];
    }
  }
  addHistory(value){
    var words = this.getHistory();
    const has = words.includes(value);
    if(value && !has){
      if(words.length>4){
        words.pop()
      }
      words.unshift(value);
      wx.setStorageSync('q', words)
    }
  }
  getHotData(){
    return this.request({
      url:`/book/hot_keyword`
    })
  }
  getKeyword(start,value){
    return this.request({
      url:`/book/search`,
      data:{
        start,
        q:value
      }
    })
  }
}
export {Keyword}

models/book

import {HTTP} from "../utils/http-p";
class BookModel extends HTTP{
  getHotBook(){
    return this.request({
      url:"/book/hot_list"
    })
  }
  getBookDateil(id){
    return this.request({
      url:`/book/${id}/detail`
    })
  }
  getBookComment(id){
    return this.request({
      url:`/book/${id}/short_comment`
    })
  }
  getBookLike(id){
    return this.request({
      url:`/book/${id}/favor`
    })
  }
  // 新增短评
  addNewComment(id,content){
    return this.request({
      url:`/book/add/short_comment`,
      method:"POST",
      data:{
        book_id:id,
        content
      }
    })
  }
  // 获取搜索结果
  getBookSearch(start,value){
    return this.request({
      url:`/book/search`,
      data:{
        start,
        q:value
      }
    })
  }
}
export {BookModel};

看完上述内容，你们对微信小程序中怎么实现一个搜索框组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。