“Style v-autocomplete in vuetify” 可以翻译为 “在Vuetify中样式化v-autocomplete”。

huangapple go评论60阅读模式
英文:

Style v-autocomplete in vuetify

问题

我有一个搜索栏和一个自动完成组件。我想要的是能够样式化自动完成的呈现方式。目前,当我输入字母时,它会显示包含这些字母的每个单词,而我想要的是只显示以我输入的字母开头的单词。
另外,是否有一种方法可以不突出显示这些字母,而是以粗体显示它们?

以下是您的代码:

<template>
  <div class="inspire" style="background-color: red">
    <v-app-bar style="padding: 10px 0px;"
      color="rgba(33,33,33,255)"
      elevation="0"
      height="64px"
    >
      <div style="width: 100%" v-if="$route.name == 'Mapping'">
        <template>
          <v-autocomplete
            v-model="valuesActor"
            :items="actorArray"
            :search-input.sync="searchActor"
            filled
            @blur="toggleSearch"
            background-color="#313131"
            append-icon=""
            color="var(--textLightGrey)"
            :menu-props="{maxWidth: 1600}"
            placeholder="Search for actors"
            active
          >
          </v-autocomplete>
        </template>
      </div>
    </v-app-bar>
  </div>
</template>

希望这些翻译对您有帮助。

英文:

I have a search bar and an autocomplete component. What I'd like is to be able to style the way the autocomplete renders. At the moment, when I type letters, it displays every word that contains those letters and what I'd like is for it to only show the words which begin with the letters I'm typing.
Also, is there a way not to highlight the letters, but to display them in bold ?

“Style v-autocomplete in vuetify” 可以翻译为 “在Vuetify中样式化v-autocomplete”。

Here's what my code looks like

&lt;template&gt;
  &lt;div class=&quot;inspire&quot; style=&quot;background-color:red&quot;&gt;
    &lt;v-app-bar style=&quot;padding: 10px 0px;&quot;
      color=&quot;rgba(33,33,33,255)&quot; 
      elevation=&quot;0&quot; 
      height=&quot;64px&quot;
    &gt; 
      &lt;div style=&quot;width:100%&quot; v-if=&quot;$route.name == &#39;Mapping&#39;&quot;&gt;
        &lt;template&gt;
          &lt;v-autocomplete
            v-model=&quot;valuesActor&quot;
            :items=&quot;actorArray&quot;
            :search-input.sync=&quot;searchActor&quot;
            filled
            @blur=&quot;toggleSearch&quot;
            background-color=&quot;#313131&quot;
            append-icon=&quot;&quot;
            color=&quot;var(--textLightGrey)&quot;
            :menu-props=&quot;{maxWidth: 1600}&quot;
            placeholder=&quot;Search for actors&quot;
            active
          &gt;
          &lt;/v-autocomplete&gt;
        &lt;/template&gt;
      &lt;/div&gt;  
    &lt;/v-app-bar&gt;
  &lt;/div&gt;
&lt;/template&gt;

答案1

得分: 1

  • 加粗匹配的文本

在自动完成组件中添加一个项目插槽,使用方法来渲染项目文本,以您想要的方式。您可以使用正则表达式来获取与查询字符串匹配的项目的部分文本,并用<strong>标签将其包围。

<v-autocomplete>
  <template v-slot:item="data">
    <div v-html="boldHighlight(data.item)"></div>
  </template>
</v-autocomplete>
boldHighlight(text) {
  return text.replace(new RegExp(this.searchActor, 'gi'), match => {
    return '<strong>' + match + '</strong>';
  });
}
  • 仅当字符串开头匹配时过滤

使用自动完成组件的filter属性来创建自定义的过滤函数。该函数将在自动完成列表中的每个项目上运行,并根据给定的查询返回true或false。

<v-autocomplete
  :filter="customFilter"
/>
customFilter(item, queryText) {
  const itemText = item.toLowerCase();
  const searchText = queryText.toLowerCase();

  return itemText.startsWith(searchText);
}
  • 页面加载时聚焦输入框

这是使用标准Vue功能完成的,而不是特定于Vuetify。在元素上添加一个ref,这将为您提供在代码中访问DOM元素的编程方式,然后在组件的mounted hook中调用focus函数。

<v-autocomplete
  ref="auto"
/>
mounted() {
  this.$refs.auto.focus()
}

这里是一个CodePen示例,将所有内容整合在一起。

英文:

Bold the matching text:

add an item slot to the autocomplete that uses a method to render the item text the way you want it. You can use regex to get the partial text of an item that matches the query string and surround it with a &lt;strong&gt; tag.

&lt;v-autocomplete&gt;
 &lt;template v-slot:item=&quot;data&quot;&gt;
    &lt;div v-html=&quot;boldHighlight(data.item)&quot;&gt;&lt;/div&gt;
  &lt;/template&gt;
&lt;/v-autocomplete&gt;
boldHighlight(text) {
  return text.replace(new RegExp(this.searchActor, &#39;gi&#39;), match =&gt; {
    return &#39;&lt;strong&gt;&#39; + match + &#39;&lt;/strong&gt;&#39;;
  });
}

Filter only if start of string is a match

Use the filter prop
with the autocomplete to make your own custom filter function. The function will run for every item in the autocomplete list and should return true or false based on the given query.

&lt;v-autocomplete
  :filter=&quot;customFilter&quot;
/&gt;
customFilter(item, queryText) {
  const itemText = item.toLowerCase();
  const searchText = queryText.toLowerCase();

  return itemText.startsWith(searchText);
}

Focus input on page load

This is done using standard Vue functionality, not specifically Vuetify. Add a ref to the element, which will give you a programmatic way of accessing the DOM element in your code, and then in the mounted hook of your component call the focus function.

&lt;v-autocomplete
  ref=&quot;auto&quot;
/&gt;
mounted() {
  this.$refs.auto.focus()
}

Here's a codepen putting it all together.

huangapple
  • 本文由 发表于 2023年2月23日 20:41:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/75544983.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定