Currently, I am delving into the world of AngularJS and experimenting with a search box. Within this search box, I want to incorporate three icons: a magnifying glass, a cross, and a spinner. For the first scenario, I envision the magnifying glass appearing when the input box is empty. In the second scenario, I expect the spinner to display once the user has entered some characters into the input box, eventually leading to possible search results. As the search results are processed and presented, I anticipate the cross icon to emerge in the third scenario, allowing users to clear the field and start anew upon clicking.
Below is the progress I have made so far:
<div ng-app="searchDemo" ng-controller="LocationFormCtrl">
<div>
<input type="text" class="clearable magnifying-glass" ng-click="search()"/>
<!--<i class="glyphicon glyphicon-refresh spinning"></i>-->
{{ outputText }}
</div>
Check Out the Fiddle Here - Due to formatting issues, I have provided the remaining details in a separate fiddle.
I have also created a concise "clear field" example accessible through this link.
My main challenge lies in replacing the text representation of icons with actual icons inside the input box while ensuring they function effectively with Angular. Any assistance with this matter would be highly appreciated, as I have spent hours grappling with it and find myself increasingly perplexed. Your guidance is invaluable.
Many thanks, John