当点击查询之后，显示查询后的数据，同时清空输入框中的文字

Question

当点击查询之后，显示查询后的数据，同时清空输入框中的文字，求指教，如图：

代码：

<form bindsubmit="formSubmit">
  <view class="search-input-group">
    <view class="input-group">
      <input class="search-input" placeholder="出发地" value="{{startPoint}}" bindinput="onStartPointEvent" />
      <image class="thumbnail" src="../../images/return.png" />
      <input class="search-input" placeholder="终点" value="{{goal}}" bindinput="onGoalEvent"  />
    </view>
    <button class="search-button" size="mini" formType="submit">查询</button>
  </view>
</form>

js代码

page
/**
   * 页面的初始数据
   */
  data: {
    hasmore: true,
    nomore: false,
    wehicles: [],
    startPoint: [],
    goal: [],
    isQuerying: false,
  },
 /**
   * 获取起点输入信息
   */
  onStartPointEvent(event) {
    const that = this;
    const startPoint = event.detail.value
    console.log('起点', startPoint);
    that.setData({
      startPoint: startPoint
    })
  },
  /**
   * 获取终点输入信息
   */
  onGoalEvent(event) {
    const that = this;
    const goal = event.detail.value
    console.log('终点', goal);
    that.setData({
      goal: goal
    })
  },

/**
   * 按条件查询数据
   */
  formSubmit(event) {
    console.log(event);
    const that = this;
    that.setData({
      isQuerying: true
    })
    let list = db.collection("wehicle").where({
      startPoint: that.data.startPoint,
      goal: that.data.goal,
    });
    if (event > 0) {
      list = list.skip(event);
    }
    list.limit(5).orderBy("create_time", "desc").get().then(res => {
      console.log(res);
      const wehicles = res.data;
      let nomore = true;
      let hasmore = true
      if (wehicles.length == 0) {
        hasmore = false
      } else {
        nomore = false
      }
      let newWehicles = [];
      if (event > 0) {
        newWehicles = that.data.wehicles.concat(wehicles);
      } else {
        newWehicles = wehicles;
      }
      newWehicles.forEach((wehicle, index) => {
        wehicle.create_time = wehicle.create_time.toString();
      })
      that.setData({
        wehicles: newWehicles,
        hasmore: hasmore,
        nomore: nomore,
      })
    });
}

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

根据您提供的代码和需求，您希望在微信小程序中实现点击查询按钮后清空输入框并显示查询结果的功能。以下是您需要在formSubmit方法中添加的代码段，以实现这一功能：

formSubmit(event) {
  // ... 省略其他代码 ...

  // 执行查询操作
  let list = db.collection("wehicle").where({
    startPoint: this.data.startPoint,
    goal: this.data.goal,
  });
  // ... 省略其他代码 ...

  // 查询操作完成后，更新数据，包括清空输入框和显示查询结果
  list.get().then(res => {
    // ... 省略其他代码 ...

    // 清空输入框并更新查询结果
    this.setData({
      isQuerying: false, // 停止查询状态
      startPoint: '',    // 清空起点输入框
      goal: '',         // 清空终点输入框
      wehicles: newWehicles, // 假设 newWehicles 是查询结果数组
      hasmore: hasmore, // 根据查询结果更新 hasmore 状态
      nomore: nomore,    // 根据查询结果更新 nomore 状态
    });

    // 以下是查询结果的处理，例如更新车辆列表等
    // ...
  }).catch(err => {
    console.error('查询失败', err);
    // 可以在这里处理查询失败的情况，例如显示错误信息
  });
}

请注意以下几点：

• setData方法用于更新页面的数据绑定，当数据更新后，页面会自动重新渲染以反映新的数据状态。
• 清空输入框是通过设置startPoint和goal为''（空字符串）来实现的。
• 查询操作是异步的，因此需要在get().then()的回调函数中更新数据。
• 如果查询失败，可以在catch块中处理错误，例如给用户显示一个错误信息。

确保您的代码中已经包含了处理查询结果的逻辑，并且在setData调用之后，页面会自动更新以显示查询结果和清空输入框。