微信小程序搜索框功能实现

微信小程序作为一种轻量级的应用程序，越来越受到开发者的关注和喜爱。

其中搜索框功能作为常用的组件之一，在小程序中也有着广泛的应用。本文将从以下几个方面对微信小程序搜索框功能实现进行详细的阐述。

一、搜索框组件的引入

在微信小程序中，可以通过在WXML文件中引入小程序提供的组件input来实现搜索框的功能。

其中，placeholder可设置输入框的提示文字；bindinput事件在 input 输入时触发，bindconfirm事件在点击完成按钮时触发；bindtap则在按钮点击时触发，用于进行搜索操作。

二、获取输入内容并进行搜索

搜索框组件的引入即可实现用户在输入框内输入内容的操作，但是如何获取输入的内容，以及如何将输入的内容应用到搜索操作中呢？

我们可以通过在JS文件中定义onInput、onConfirm、onSearch等事件来实现，示例如下：


Page({
  data: {
    inputValue: ''
  },
  onInput: function(event) {
    console.log(event.detail.value)
    this.setData({
      inputValue: event.detail.value
    })
  },
  onConfirm: function(event) {
    console.log(event.detail.value)
    this.setData({
      inputValue: event.detail.value
    })
  },
  onSearch: function(event) {
    console.log(this.data.inputValue)
    //进行搜索操作
  }
})

onInput和onConfirm事件都会在用户在输入框内进行输入时触发，它们所传递的参数中包含了用户输入的内容。可以通过setData()函数将获取到的输入值存储到页面数据中。而onSearch事件则在点击搜索按钮时触发，在函数内部便可进行搜索操作。

三、组件样式的定制

微信小程序提供了组件样式的定义方法，可以方便的实现对搜索框样式的调整。

通过设置搜索框组件的父节点view的class来实现对组件整体样式的定义。在input标签的样式中可以设置输入框的宽度、高度，以及内外边距等。在button标签的样式中则可以设置按钮的宽度、高度，颜色等。

四、关键字检索结果的展示

搜索框完成了用户输入、搜索操作和样式定制的功能，但是搜索结果该如何呈现，怎样才能达到更好的用户体验呢？

我们可以使用list组件来实现搜索结果的展示，代码如下：



  
    
      {{item.title}}
      {{item.abstract}}

在JS文件中，需要定义searchResults数组存储搜索结果，并在执行搜索操作后更新该数组的内容。


Page({
  data: {
    inputValue: '',
    searchResults: []
  },
  onSearch: function(event) {
    console.log(this.data.inputValue)
    //进行搜索操作
    //将搜索结果存储在searchResults中
    this.setData({
      searchResults: results
    })
  }
})

在list组件中，使用wx:for遍历searchResults数组，并使用block标签包含，其中wx:key必须要设置为数组中每个元素的唯一标识，使用item表示每个结果。

通过设置class为title和abstract来定义搜索结果的标题和简介等信息的样式。

五、自动完成提示的实现

为了更好的用户体验，我们可以实现实时搜索关键字并展示搜索提示，用户可以直接选择搜索提示中的关键字。

在WXML文件中添加提示框picker-view组件：



  
    
      {{item}}

在JS文件中，则需要定义suggestion数组存储提示内容，showPicker表示是否展示提示框，selected表示当前选中的提示关键字。


Page({
  data: {
    inputValue: '',
    searchResults: [],
    suggestion: [],
    showPicker: false,
    selected: 0
  },
  onInput: function(event) {
    console.log(event.detail.value)
    this.setData({
      inputValue: event.detail.value
    })
    //进行关键字检索，获取提示内容存储在suggestion中
    this.setData({
      suggestion: suggestion,
      showPicker: true
    })
  },
  onPickerChange: function(event) {
    console.log(event.detail.value)
    this.setData({
      selected: event.detail.value[0]
    })
    //将选中的提示关键字更新到输入框
    const selectedKeyword = this.data.suggestion[event.detail.value[0]]
    this.setData({
      inputValue: selectedKeyword
    })
  }
})

在输入框输入内容的时候触发onInput事件，查询关键字并更新提示内容，设置showPicker为true，展示提示框；在选择提示关键字的时候触发onPickerChange事件，根据选中位置更新selected的值，将选中关键字填充到输入框中。

通过以上步骤实现了微信小程序搜索框的输入、搜索、样式定制、关键字检索和自动完成提示等功能。