我想在按下搜索输入字段时打开一个对话框

Question

我面临的问题是，一旦我按下搜索输入字段（设备 ID），就会打开带有搜索图标的对话框。

我想做的是，当我单击搜索输入字段时，它不应该在我开始输入时立即打开，它应该显示结果。对话框内带有列的表格。用户名、电话号码和电子邮件。就像它应该在表中搜索一样。

<el-autocomplete
  v-model="listQuery.searchMacTextValue"
  placeholder="Device ID"
  style="width: 200px"
  class="filter-item"
  @input="startSearch"
>
  <el-dropdown
    v-model="dropdownVisible"
    trigger="manual"
    :visible="searching"
  >
    <el-button slot="reference">
      <i class="el-icon-search"></i> Search
    </el-button>
    <el-dropdown-menu>
      <el-table :data="searchResults" style="width: 400px">
        <el-table-column label="User Name" prop="userName"></el-table-column>
        <el-table-column
          label="Phone Number"
          prop="phoneNumber"
        ></el-table-column>
        <el-table-column label="Email" prop="email"></el-table-column>
      </el-table>
    </el-dropdown-menu>
  </el-dropdown>
</el-autocomplete>

<el-dialog
  v-model:visible="dialogVisible"
  title="Search Results"
  width="80%"
  @close="resetSearch"
>
</el-dialog>

这是我现有的模板代码。

startSearch() {
  this.searching = true; // Start searching, open the dropdown
  // Implement your API call and populate searchResults here
  this.searchResults = [
    {
      userName: "John Doe",
      phoneNumber: "123-456-7890",
      email: "[email protected]",
    },
    {
      userName: "Jane Smith",
      phoneNumber: "987-654-3210",
      email: "[email protected]",
    },
    // Add more results as needed
  ];

  // Increase the dialog size when searching
  this.$nextTick(() => {
    this.$refs.dropdownMenu.style.minHeight = "200px";
  });
},

这是我的功能..

Answer 1

<el-autocomplete
  v-model="listQuery.searchMacTextValue"
  placeholder="Device ID"
  style="width: 200px"
  class="filter-item"
  @change="startSearch"
> 

将“@input =“startSearch””更改为“@change =“startSearch””