I’ve added a ‘clear search’ icon button to my search input, but I cannot make it respond to clicks or taps.
Here’s a screenshot of my search box:
Here’s the code for my search input row.
<div class="list list-search">
<div class="item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="text" autocorrect="off" ng-model="saleFilters.searchKeyword" placeholder="Keyword">
<i ng-show="saleFilters.searchKeyword" ng-click="cancelKeywordSearch()" class="clear-search icon ion-ios7-close"></i>
</label>
<button ng-click="performKeywordSearch()" class="button button-small">
Search
</button>
</div>
I am using Ionic 1.0.0-beta4. I’ve tried it in Chrome 34 and in an iPhone app and on both platforms I cannot get the clear ‘search icon’ to react to clicks.
Does anyone else have the same issue? Should I be doing something differently?
Take a look at the collection repeat demo.
Notice how the input doesn’t have a label wrapped around it? Thats why your button isn’t working
1 Like
Does your ng-click events works well? If yes just remove the ng-show directive from you code and on the function cancelKeywordSearch() simply set your search key as empty “saleFilters.searchKeyword=’’”. Hope this will help you.
turian
May 30, 2014, 10:03pm
4
I have a similar issue, and I was able to resolve it by removing the label.
I don’t understand why the Ionic docs for forms contain the label. That really tripped me up.
4 Likes
did you find the solution to this problem?
1 Like
did
August 5, 2014, 12:02pm
6
have the same problem with clear button inside “label” tag
see: Howto add delete icon to search input field?
Thing to remember about how ionic deals with setting focus to inputs:
We use labels to to watch for any tap events, then check to see if that label has an input inside of it. If so, set focus to the input.
To use a button along the input, swap the label to a span or div
, your ng-clicks will work fine after that.
10 Likes
did
August 6, 2014, 7:05am
8
thanks @mhartington that solved the issue
petko
February 9, 2015, 4:20am
9
thanks for pointing that out. i spent some time on this. finally works when i removed the label! thanks!
bbakke
April 15, 2015, 8:52pm
10
Here is another way to do this. You can set the on-touch event for the button. Then you can call a function to clear it out. This allows you to wrap the items in a label without using the ng-click event.
http://ionicframework.com/docs/api/directive/onTouch/
4 Likes
removing the label worked for me
leob
October 5, 2015, 5:41pm
12
I did it like this:
<div class="item item-input search-input">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon field-icon"></i>
<input
type="search"
style="width: 100%"
placeholder="Type words to search"
ng-change="vm.searchWords()"
ng-model="vm.data.search"
ng-model-options="{updateOn:'default blur',debounce:{default:500,blur:0}}"
reset-field>
<!--
Clear button, see: https://github.com/driftyco/ionic/issues/405#issuecomment-43958749
NOTE: I had to use "on-tap" below, becaus ng-click did not work!
-->
<a ng-if="vm.data.search.length"
on-tap="vm.clearSearch()"
class="input-button button button-icon ion-android-close">
</a>
</label>
</div>
with the CSS style “search-input” defined as:
.search-input {
padding-top: 8px;
padding-bottom: 8px;
padding-right: 10px;
}
hdflj
November 16, 2015, 3:50pm
13
this definitely should be documented in the inset inputs part !!
just change the label to span works!!
2 Likes
Ran across this same issue today. Replacing the label tag with a div did the trick
Just in case someone else has same issue, I resolved my case by changing ng-click to on-tap.