Ionic3 UI组件之autocomplete详解

 更新时间:2017年06月08日 08:39:10   作者:tomKart   我要评论

这篇文章主要为大家详细介绍了Ionic3 UI组件之autocomplete的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

无论是web开发还是app开发,autocomplete是常用组件之一。

可惜截止到目前,ionic官方并未提供此组件。

ionic2-autocomplete是GitHub上的开源的Ionic2组件,本文将讲解如何在自己的项目中使用它。

组件地址https://github.com/kadoshms/ionic2-autocomplete

1)npm install ionic2-auto-complete --save

2)打开app.module.ts,添加:import { AutoCompleteModule } from 'ionic2-auto-complete';

并且在imports数组里面增加AutoCompleteModule

3)打开app.scss,添加:@import "../../node_modules/ionic2-auto-complete/auto-complete";

4)直接找你的page中使用组件:<ion-auto-complete></ion-auto-complete>

5)给autocomplete添加dataProvider:写一个service来从后台获取数据,ionic g provider autocomplete-service,

代码如下:

别忘了在app.module.ts中增加:

import{AutocompleteServiceProvider}from'../providers/autocomplete-service/autocomplete-service';

并且在providers数组中增加AutocompleteServiceProvider。

7)在你使用autocomplete组件的page ts文件中,增加:

import{AutocompleteServiceProvider}from'../../providers/autocomplete-service/autocomplete-service';constructor构造函数中增加:publicautocompleteSer:AutocompleteServiceProvider

8)在刚刚使用ion-auto-complete的地方修改为:<ion-auto-complete[dataProvider]="autocompleteSer"></ion-auto-complete>9)

ionic serve看看效果吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Javascript 匿名函数及其代码模式原理

    Javascript 匿名函数及其代码模式原理

    很多同学知道怎么用这种匿名函数,却或许并不明白为什么这样写就能够调用匿名函数。也许知道后面的圆括号是执行前面的函数,而并不清楚前面的圆括号具有何种含义!本文将带你了解匿名函数的代码模式原理。
    2010-03-03
  • ASP中进行HTML数据及JS数据编码函数

    ASP中进行HTML数据及JS数据编码函数

    在有些时候我们无法控制乱码的出现, 比如发送邮件的时候有些邮件显示乱码, 比如Ajax返回数据总是乱码. 怎么办?
    2009-11-11
  • 基于Bootstrap+jQuery.validate实现表单验证

    基于Bootstrap+jQuery.validate实现表单验证

    这篇文章主要为大家详细介绍了基于Bootstrap+jQuery.validate实现表单验证,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JavaScript动态修改网页元素内容的方法

    JavaScript动态修改网页元素内容的方法

    这篇文章主要介绍了JavaScript动态修改网页元素内容的方法,实例分析了javascript操作html元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JavaScript判断微信浏览器实例代码

    JavaScript判断微信浏览器实例代码

    本文给大家介绍如何判断用户是否是用微信浏览器的实例代码,根据关键字 MicroMessenger 来判断是否是微信内置的浏览器,感兴趣的朋友可以参考下实现代码
    2016-06-06
  • JavaScript满天星导航栏实现方法

    JavaScript满天星导航栏实现方法

    本篇文章给大家分享了JavaScript满天星导航栏实现方法,以前也介绍过很多关于特效导航的制作方法,对此有兴趣的朋友参考学习下。
    2018-03-03
  • javascript实现去除HTML标签的方法

    javascript实现去除HTML标签的方法

    这篇文章主要介绍了javascript实现去除HTML标签的方法,涉及javascript正则替换相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • javascript 打印页面代码

    javascript 打印页面代码

    不用window.print实现的打印效果代码。
    2009-03-03
  • Javascript函数式编程语言

    Javascript函数式编程语言

    JavaScript 是近年来非常受瞩目的一门编程语言,它既支持面向对象编程,也支持函数式编程。本文专门介绍JavaScript函数式编程的特性。
    2015-10-10
  • 如何通过javascript操作web控件的自定义属性

    如何通过javascript操作web控件的自定义属性

    这篇文章主要是对如何通过javascript操作web控件的自定义属性进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所 帮助
    2013-11-11

最新评论