离子V1中如何使用searchBar

时间:2018-07-19 22:29:54

标签: javascript html css angularjs ionic-framework

我正在创建一个建筑测量应用程序,并且使用离子V1离子搜索时遇到了困难。

有人对离子1做过类​​似的事情吗?我接受任何帮助。

这是我的代码

<ion-content padding="true" class="has-header">
<form id="prDios-form2" class="list">
    <label class="item item-input" id="prDios-search2">
      <i class="icon ion-search placeholder-icon"></i>
      <input type="search" placeholder="Localizar">
    </label>
  </form>
<div class="spacer" style="width: 300px; height: 0px;"></div>
<ion-list id="prDios-list2">
  <ion-item class="item-thumbnail-left item-icon-right royal" id="prDios-list-item7" ui-sref="tabsController.abaete()">
    <img src="img/ZrWSoK1zRIi2V8WMALas_Abaete.JPG">
    <h2royal>Abaeté
      <p>Rua Andira</p>
      <i class="icon ion-map"></i>
    </h2royal>
  </ion-item>
</ion-list>

enter image description here

1 个答案:

答案 0 :(得分:0)

据我所知。离子v1没有<ion-search>指令。 Ionic没有提供。

对于搜索,您可以制作自定义搜索表单并类似于<ion-search>来实现它。

您将需要。带有文本输入的表单(您的prDios-form2将具有输入。添加ng-model和ng-change作为输入),<ion-list>带有ng-repeat,<ion-infinite-scroll>可在以下情况下添加更多结果滚动到底部。

您可以使用输入的ng-change属性查找更改,并使用文本字段的ng-model值调用api。

这是可能的,因为我已经实现了。附上我创建的自定义离子搜索的图片。

enter image description here

希望我能有所帮助。干杯!!!