我面临的问题是，只要我按下搜索输入字段（设备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";
  });
},

型
这是我的职责。