Impossible de cliquer sur l'icône de recherche ionique pour effectuer une recherche

Question

J'ai ce code:

<ion-content padding="true" class="has-header"> 
    <form id="search-form2" class="list"> 
     <label class="item item-input" id="search-search2"> 
     <i class="icon ion-search placeholder-icon"></i> 
     <input type="search" placeholder="{{staticLabels.whatToSearch}}" ng-model="vModel.searchText"> 
     </label> 
    </form> 
    </ion-content> 

barre de recherche ne fonctionne que si quelqu'un appuyez sur Entrée après avoir tapé des mots-clés, mais je veux utilisateur de cliquer aussi pour rechercher l'icône pour effectuer la chercher.

J'ai essayé:

<i class="icon ion-search placeholder-icon" ng-click="vModel.somefxn()"></i> 

mais il ne fonctionne pas .. toutes les idées?

Answer 1

Bien que la directive ion-searchbar soit utilisée pour la liste de recherche, votre version avec l'icône & champ de recherche devrait fonctionner correctement. ng-click fonctionnera très bien si vous ajoutez la propriété cursor: pointer css à i tag. Vous vous demandez peut-être juste pour montrer l'icône de la main pour les ordinateurs de bureau sur le vol stationnaire, mais, il permet de déclencher l'événement tactile sur les mobiles, onglets, même si vous utilisez un événement de clic classique. Donc suit devrait fonctionner correctement:

<i class="icon ion-search placeholder-icon search" ng-click="vModel.somefxn()"></i> 

Où classe de recherche peut être:

.search { 
    cursor: pointer; 
    padding: 3px; 
} 

Rembourrage va juste aider à augmenter la surface cliquable pour l'icône de recherche.

Exemple: https://codepen.io/anon/pen/Ogewrv