Encountered a problem recently and discovered there is an ongoing feature request addressing it. I've shared my solution in the response below.
Encountered a problem recently and discovered there is an ongoing feature request addressing it. I've shared my solution in the response below.
For those seeking alternatives, consider adding a placeholder value to the Autocomplete using emojis as 'icons'
<AutoComplete
class="inputSearch"
id="artist"
v-model="selectedArtist"
:suggestions="filteredArtists"
@complete="searchArtist($event)"
placeholder="🔍 Search Artist"
>
</AutoComplete>
Alternatively, follow this approach where icons are used as background images and text is indented accordingly. You can disengage the focus from the example if you prefer keeping the icon.
If primeicons are imported, specify the path to your preferred icon in the URL section of background-image. Additionally, include
background-size: 0.8em;
background-position: left;
within the input's CSS with your desired sizing and positioning for the icon.
In my case, the final CSS resembles the following:
.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;
}
When inspecting the Autocomplete feature in a browser, an input wrapped in a span is visible, explaining why this method functions as intended. I may consider moving these icons to my public folder in the future. While not ideal, it serves as a temporary workaround.
I've developed a new solution that leverages PrimeVue's built-in CSS class to include an icon in a regular InputText field.
<span class="p-input-icon-right">
<AutoComplete placeholder="Search here..." loadingIcon=null></AutoComplete>
<i class="pi pi-search" />
</span>
To avoid icon overlap, I've set the loadingIcon as null for this workaround.
Below is the result with my custom style attributes applied:
Unfortunately, my reputation is not high enough to upvote or comment on the previous answer. However, it did inspire me to make some adjustments in order to incorporate an icon into PrimeVue's Autocomplete feature.
Here is the result: View Image of Autocomplete with Icon
In my changes, I specifically adjusted the background-position to a more precise location and targeted the p-autocomplete-input class for customization.
.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'"
/>This solution worked perfectly for me.
#css
.p-input-icon-left .p-autocomplete-input {
padding-left: 2.5rem
}
<span className="p-input-icon-left">
<AutoComplete />
<i className="pi pi-search" />
</span>
I'm looking to create a scrollable div similar to the one shown on the page linked below for a large secondary navbar. This navbar will expand to the bottom of the page after the title and primary navbar. So when I scroll down the page, the title and ...
I am facing an issue with my data object containing an array of data that I have mapped inside a table. The problem arises when I try to retrieve the id value of any item in the table's rows using console.log(). It always returns the id of the last it ...
For this particular query, I believe that my config.js, model.js, and server.js files are crucial. I am puzzled as to why Postman is returning an empty array with a 200 status code. It's worth noting that in my mongo shell, I am able to access and vie ...
Being a newcomer to Express, I found myself pondering the most efficient method for installing it with a generator and incorporating Socket.io. While many tutorials demonstrate how to install Socket.io in a manually set up Express project, I'm curiou ...
Is there a unique user-agent string specifically for Safari on IOS that identifies it as being in "Home screen" or "app mode"? I've observed a bug on IOS8 where the browser window appears incorrectly, with the time and battery information overlapping ...
It seems that the behavior of margins collapsing between block elements inside and outside a BFC is not as straightforward as expected. For instance, when a button element's display property is set to inline-block, it forms a BFC, which should prevent ...
In my server system, I have an nginx and a nodejs server set up. Depending on the subdomain, requests are forwarded to the appropriate NodeJS app using proxy_pass. However, I am facing an issue when trying to use Socket.io from a different origin. The joi ...
It appears that the default color for SpriteMaterial is 0xFFFFFF, which indicates no color. However, if I change the color property of the material to say 0xFF0000, the sprite will display a red tint. If I desire a white tint instead, how can this be achi ...
Greetings! Welcome to my website I'm in the process of modifying the hover color for the top menu, and I've managed to change it successfully. However, I would like the hover effect to cover the entire height of the menu, as right now it's ...
After fetching some external data to populate buttons, I wanted to create a function that would automatically scroll to a specific section when a button is clicked. Here's how I attempted it: const Target = (e) => document.querySelector(&q ...
I need to access properties like getBoundingClientRect() and scrollTop from the <div> and <span> components in the ChildComponent, but I want to do it in the Parent component. Here's how I attempted it: class Parent extends Component { ...
I need to determine the count of list items in an unordered list within dir-pagination-controls. How can I achieve this using JavaScript? <dir-pagination-controls min-size="1" direction-links="true" boundary-links="true" class="pull-right ng-isolate- ...
When I use this code snippet: function item(name, number){ this.name = name; this.number = number; } var item1 = new item('a',1); var item2 = new item('b',2); var box1 = [item1,item2]; console.log(box1); var box2 = JSON.strin ...
I am facing an issue with accessing an API route to a FOSRESTBundle Controller from my JS. Even though I am using the FOSJSRoutingBundle, the route is not visible, and I keep getting the 'the route xxx does not exist' error. The following is an ...
As a newcomer to threejs, I have just begun learning and developing with this technology. I am aware that certain features may be different on mobile browsers compared to desktop ones due to limitations. However, I have encountered an issue that I cannot s ...
I have a new challenge to integrate an existing AngularJS web app into another web app built with KnockoutJS and JQuery. The main app is created using pure KnockoutJS templates technique. After some research, I discovered that using iFrames could be a pote ...
I implemented a loader on my webpage that animates for 3 seconds before a function kicks in to modify the styles and make it invisible. I am looking to add a fadeout effect when the 'waa' style is applied to the 'load' div. setTimeou ...
Within my typescript project, I am utilizing the following enum type: export enum ModelAttributeTypes { binary = 'binary', binarySet = 'binarySet', bool = 'bool', list = 'list', map = 'map', num ...
Hey there, I could really use some help with my CSS layout, I'm pretty new to CSS and Flexbox and I'm trying to create a simple layout. The issue I'm running into is how to stop long content inside a pre tag from pushing other divs. Here& ...
I need assistance with exporting Excel Charts from NVd3 using Angularjs. Here is the code I have been trying: (jsfiddle) <button id="myButtonControlID">Export Table data into Excel</button> <div id="divTableDataHolder"> <table> ...