Невозможно щелкнуть значок ионного поиска, чтобы выполнить поиск

У меня есть этот код:

<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>

Панель поиска работает только в том случае, если кто-то нажимает ввод после ввода ключевых слов, но я хочу, чтобы пользователь также щелкнул значок поиска, чтобы выполнить поиск.

Я попытался :

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

но это не работает .. есть идеи?


ionic-framework javascript angularjs searchbar
person Sanjay Singh    schedule 19.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Хотя директива ion-searchbar используется для списка поиска, ваша версия со значком и полем ввода поиска должна работать нормально. ng-click будет работать нормально, если вы добавите свойство css cursor: pointer в тег i. Вам может быть интересно, что это просто для отображения значка руки для настольных компьютеров при наведении, но это помогает запускать событие касания на мобильных устройствах, вкладках, даже если вы используете обычное событие щелчка. Итак, следующее должно работать нормально:

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

Где класс поиска может быть:

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

Заполнение просто поможет увеличить интерактивную область для значка поиска.

Пример: https://codepen.io/anon/pen/Ogewrv

person Shantanu    schedule 19.07.2017
comment
Спасибо, сэр .. Я пробовал то же самое, курсор работает, создавая значок поиска как объект щелчка, но все же щелчок не запускает функцию, такую ​​​​как codepen. Я пробовал. Это работает, только если я каким-то образом удалю метку. Блоки меток запускают функцию, но без метки у меня нет области поиска для ввода ключевых слов. Поэтому я заменил метку тегами div, и она начала работать :) - person Sanjay Singh; 21.07.2017