Question

我有这段代码：

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

搜索栏仅在有人输入关键字后按Enter键时才有效，但我希望用户也点击搜索图标以执行搜索。

我试过了：

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

但它不起作用..任何想法？

Answer 1

虽然ion-searchbar指令用于搜索列表，但您的版本带有图标＆amp;搜索输入字段应该正常工作。如果将cursor：pointer css属性添加到i标记，则ng-click将正常工作。您可能想知道它只是用于在悬停时显示桌面的手形图标，但是，即使您使用传统的点击事件，它也有助于在手机，标签上触发触摸事件。所以下面应该可以正常工作：

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

搜索类可以是：

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

填充只会有助于增加搜索图标的可点击区域。

示例：https://codepen.io/anon/pen/Ogewrv

无法单击离子搜索图标以执行搜索

1 个答案: