uni-app 输入框带搜索功能，若未搜索则直接取输入的值

在 uni-app 中实现一个带有搜索功能的输入框，并在未执行搜索操作时直接获取用户输入的值，可以通过结合输入框事件和搜索按钮点击事件来实现。以下是一个简单的代码示例，展示了如何实现这一功能。

首先，在页面的 .vue 文件中，我们可以定义一个输入框和一个搜索按钮，同时设置一个数据属性来存储用户的输入值和搜索结果。

<template>
  <view class="container">
    <input
      type="text"
      v-model="inputValue"
      placeholder="请输入搜索内容"
      @input="handleInput"
      @confirm="handleSearch"
    />
    <button @click="handleSearch">搜索</button>
    <view v-if="searchResults.length">
      <text>搜索结果:</text>
      <view v-for="(result, index) in searchResults" :key="index">
        {{ result }}
      </view>
    </view>
    <view v-else-if="inputValue && !searchResults.length">
      <text>未执行搜索，输入值为: {{ inputValue }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      searchResults: []
    };
  },
  methods: {
    handleInput(event) {
      this.inputValue = event.detail.value;
      // 清空搜索结果，防止干扰
      this.searchResults = [];
    },
    handleSearch() {
      if (this.inputValue.trim() === '') {
        this.$toast('请输入搜索内容');
        return;
      }
      // 模拟搜索操作，这里可以根据实际情况调用API
      this.searchResults = this.mockSearch(this.inputValue);
    },
    mockSearch(query) {
      // 模拟搜索结果，这里返回的是一些示例数据
      return [`结果1: ${query}`, `结果2: ${query}`, `结果3: ${query}`];
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
input {
  width: 80%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>

在这个示例中，inputValue 用于存储用户输入的值，searchResults 用于存储搜索结果。handleInput 方法在用户输入时触发，用于更新 inputValue。handleSearch 方法在点击搜索按钮时触发，用于执行模拟的搜索操作并更新 searchResults。如果 searchResults 为空且 inputValue 不为空，则显示用户输入的值。

这个示例提供了一个基础框架，你可以根据实际需求调整搜索逻辑和样式。