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

Question

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

Answer 1

任何寻找替代方案的人都可以将占位符值添加到带有表情符号的自动完成中，如 'icons'

选项 1

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

选项 2（更好）

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

如果您导入了 primeicons，您可以将所需图标的路径放在 background-image 的 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;
}

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

Answer 2

我没有足够的声誉 upvote/comment 上面的答案 - 它启发我进行一些调整以便将图标添加到 PrimeVue 的自动完成

结果：Image of Autocomplete with icon

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

.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'"
    />

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

How to add icon to autocomplete in PrimeVue

javascript

css

vue.js

primevue

选项 1

选项 2（更好）