为vue-multiselect搜索输入框添加最大长度限制

你当前使用的vue-multiselect v2.1.6没有原生的max-length属性来限制搜索输入框的字符长度，现有代码中的:max-length="2"不会生效，这里提供两种可行的实现方式：

方法一：自定义搜索框插槽（推荐） #

直接通过组件的search插槽替换默认输入框，添加原生maxlength属性，从根源限制输入长度：

<multiselect
      :id="questionCode"
      ref="multiselect"
      v-click-outside="hide"
      :value="initialValue"
      :question-code="questionCode"
      label="text"
      track-by="answerCode"
      open-direction="bottom"
      :options="choices"
      :searchable="true"
      :loading="isLoading"
      :internal-search="false"
      :clear-on-select="false"
      :close-on-select="true"
      :options-limit="300"
      :limit="3"
      :limit-text="limitText"
      :max-height="600"
      :show-no-results="false"
      :hide-selected="true"
      :disabled="!isEnabled"
      :show-labels="false"
      :class="
        isErrorVisible ? 'question-error--outline' : 'question-regular--outline'
      "
      @search-change="asyncFind"
      @select="$emit('update:initialValue', $event)"
      @open="asyncFind('')"
    >
      <!-- 添加自定义搜索框插槽 -->
      <template slot="search" slot-scope="{ attributes, events }">
        <input
          class="multiselect__input"
          v-bind="attributes"
          v-on="events"
          maxlength="25"
        />
      </template>
</multiselect>

这种方式利用原生input的maxlength属性，用户输入到25字符后无法继续输入，体验更直观，且不需要修改原有异步搜索和新增选项的逻辑。

方法二：在搜索事件中截断关键词 #

如果需要对截断行为做额外处理，可以修改asyncFind方法，先将搜索关键词截断到25字符，再执行后续逻辑：

async asyncFind(searchQuery) {
  // 截断关键词到25个字符
  const trimmedQuery = searchQuery.slice(0, 25);
  
  // 如果原关键词超过25字符，同步更新输入框显示
  if (trimmedQuery !== searchQuery) {
    const searchInput = this.$refs.multiselect.$el.querySelector('.multiselect__input');
    if (searchInput) {
      searchInput.value = trimmedQuery;
    }
  }

  // 原有异步搜索逻辑，使用截断后的关键词
  this.isLoading = true;
  // 替换为你的实际接口请求
  const response = await yourSearchApi(trimmedQuery);
  this.choices = response.data;
  this.isLoading = false;
}

这种方式适合需要在截断时添加额外业务逻辑的场景，但用户仍能输入超过25字符，实际搜索时会自动使用截断后的内容。

内容的提问来源于stack exchange，提问作者Hashan94