如何根据选择另一个下拉选项来聚焦搜索文本框 - vuejs

Posted 2023-02-22

【中文标题】如何根据选择另一个下拉选项来聚焦搜索文本框 - vuejs

【英文标题】：how to focus search textbox based on selection of another dropdown option - vuejs

【发布时间】：2020-12-31 09:07:21

【问题描述】：

在我的应用程序中，我必须根据名称和类别名称过滤产品。有一个搜索文本框和一个下拉选择框。在下拉选择框中，有两个选项 1。按名称搜索产品 2. 按类别名称搜索产品。根据选择的选项，搜索文本框将启用并聚焦。

模板代码

<el-form>
      <el-row :gutter="15"
              type="flex"
              class="search__product">
        <el-col class="filter_option">
            <app-select name="ProductFilter"
                        :options="filterOptions"
                        :selected="selectedSearchOption"
                        @onChange="onSearchOptionChange" />
        </el-col><el-col class="search_input">
            <el-input placeholder="Search product"
                      aria-label="Search product"
                      @keyup.enter.native="searchProduct"
                      v-model="filterText">
            </el-input>
        </el-col>
      </el-row>
    </el-form>

显示下拉值的方法

    get filterOptions(): OptionTypes[] 
    return [
       label: 'Search by Product Name', value: 'Product' ,
       label: 'Search by Category Name', value: 'Category' 
    ]
  

产品的搜索输入

searchProduct() 
    if (this.filterText !== '') 
      this.$store.dispatch('fetchProductsBySearchName', this.filterText)
    
  

下拉菜单的选项更改事件

    onSearchOptionChange(value) 
    this.selectedSearchOption = value
  

这对于按名称搜索产品效果很好。现在，我想根据下拉选择来实现它，以启用搜索文本框并聚焦它。

【参考方案1】：

注意答案有点特定于库 Element-ui 的 el-input：

您的选择将保持不变：

<app-select name="ProductFilter"
            :options="filterOptions"
            :selected="selectedSearchOption"
            @onChange="onSearchOptionChange" />

el 输入的用户参考：

<el-input ref="myInput"
          placeholder="Search product"
          @keyup.enter.native="searchProduct"
          v-model="filterText">

在你的方法中：

onSearchOptionChange(value) 
  this.selectedSearchOption = value

  // In multiple ways you can get this done (selecting `input` element)
  // use any one line mentioned below ;)
  this.$refs.myInput.$el.firstElementChild.focus();
  this.$refs.myInput.$el.lastElementChild.focus();
  this.$refs.myInput.$el.children[0].focus();

  this.$refs.myInput.$el.querySelector('input').focus(); // my favourite, future proof 

更新

正如@charlie 所说，您可能需要将代码移至this.$nextTick：

onSearchOptionChange(value) 
  this.selectedSearchOption = value

  this.$nextTick(() =>  
    // In multiple ways you can get this done (selecting `input` element)
    // use any one line mentioned below ;)
    this.$refs.myInput.$el.firstElementChild.focus();
    this.$refs.myInput.$el.lastElementChild.focus();
    this.$refs.myInput.$el.children[0].focus();

    this.$refs.myInput.$el.querySelector('input').focus(); // my favourite, future proof 
  )

【讨论】：

值得一提的是，这可能不起作用，因为您需要听到nextTick。类似this.$nextTick(() => /** focus input here */ )