如何在 PrimeVue 中为自动完成添加图标答案

【问题标题】：How to add icon to autocomplete in PrimeVue如何在 PrimeVue 中为自动完成添加图标
【发布时间】：2022-02-23 03:52:48
【问题描述】：

我遇到了这个问题。目前有一个feature request。我在下面的答案中提供了我的解决方法。

【问题讨论】：

标签： javascript css vue.js primevue

【解决方案1】：

任何寻找替代品的人都可以将占位符值添加到自动完成功能中，并将表情符号作为“图标”

选项 1

<AutoComplete
  class="inputSearch"
  id="artist"
  v-model="selectedArtist"
  :suggestions="filteredArtists"
  @complete="searchArtist($event)"
  placeholder="? Search Artist"
>
</AutoComplete>

选项 2（更好）

或使用this method 将图标添加为背景图像并将文本缩进远离它。如果要保留图标，可以从示例中移除焦点。

如果您导入了素数图标，您可以将所需图标的路径放在背景图像的 url 部分。此外，您可以添加

background-size: 0.8em;
background-position: left;

在 CSS 中的输入下，使用您想要的值来定位和调整图标的大小。

在我的例子中，最终的 CSS 如下所示：

.inputSearch input {
  background-image: url("../../node_modules/primeicons/raw-svg/search.svg");
  background-size: 0.8em;
  background-position: left;
  background-repeat: no-repeat;
  text-indent: 20px;
}

如果您在浏览器中检查自动完成功能，您会看到一个包含在 span 中的输入。这就是为什么这有效。稍后我可能会将这些图标复制到我的公共文件夹中。不理想，但目前是一种解决方法。

【讨论】：

【解决方案2】：

我没有足够的声誉来支持/评论上述答案 - 它启发了我进行一些调整，以便在 PrimeVue 的自动完成功能中添加一个图标

结果：Image of Autocomplete with icon

我将background-position 更改为位于更具体的位置。我还针对p-autocomplete-input 类。

.p-autocomplete-input {
  background-image: url("../../node_modules/primeicons/raw-svg/search.svg");
  background-size: 1.5em;
  background-position: left 10px top 17px;
  background-repeat: no-repeat;
  text-indent: 30px;
  padding: 20px;
  width: 350px;
}

    <AutoComplete
      type="text"
      v-model="searchQuery"
      @input="search"
      placeholder="Search for an Address"
      :scrollHeight="'300'"
    />

【讨论】：