I want to open a dialogue when i press on the search input field

Question

The problem that I am facing is that as soon as I press the search input field (Device ID) the dialogue opens with a searching icon.

What I am trying to do is When I click the search input field it should not open at that time as soon as i start typing it should show me the results. A table within the dialogue box with columns. User Name, Phone Number and email. Like it should search within the table.

<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>

This is my existing template code.

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";
  });
},

This are my functions..

Answer 1

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

change '@input="startSearch"' to '@change="startSearch"'