function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sharankumar DesaiSharankumar Desai 

How to add serach icon in <ui:inputText>

Hi Folks,

Can anyone share on how to add search icon to an text field in the Lightning Component.

All i am using currentlty is below code. I want to make it as a search box with an icon in it
<ui:inputText value="" updateOn="keyup"/>

Thanks
Sharan Desai
Best Answer chosen by Sharankumar Desai
sfdcMonkey.comsfdcMonkey.com
hi Sharankumar Desai

you can use bootstrape in your component as static resource like that-:  
<ltng:require styles="{! $Resource.Bootstrap337update + '/Bootstrap337update~/bootstrap-3.3.7-dist/css/bootstrap.min.css'}" 
            scripts="{!join(',', 
                     $Resource.jquery224 + '/bootstrapejq/jquery-2.2.4.min.js', 
                     $Resource.Bootstrap337update + '/Bootstrap337update~/bootstrap-3.3.7-dist/js/bootstrap.min.js')
                    }"/>
for download bootstrape go to http://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/

its look like User-added image
  
<form role="form">
           <div class="input-group">
               <span class="input-group-addon">
                 <i class="glyphicon glyphicon-search"></i>
               </span>
               <input type="text" id="ContactsearchBar" class="form-control" value="{! v.ContactsearchKeyWord}" onkeyup="{! c.searchContact}" placeholder="Search Contact" />    
            </div>
</form>

thanks :)
Please mark it as solved if this helps you so that it will make for others as a proper solution