Ionic3 UI组件之autocomplete详解


Posted in Javascript onJune 08, 2017

无论是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,

代码如下:

Ionic3 UI组件之autocomplete详解

别忘了在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看看效果吧。

Ionic3 UI组件之autocomplete详解

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

Javascript 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
jQuery+ajax实现局部刷新的两种方法
Jun 08 #jQuery
gulp解决跨域的配置文件问题
Jun 08 #Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 #Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 #jQuery
Ionic项目中Native Camera的使用方法
Jun 07 #Javascript
详解angular ui-grid之过滤器设置
Jun 07 #Javascript
微信小程序 地图map实例详解
Jun 07 #Javascript
You might like
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
Session的工作方式
2006/10/09 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php取得字符串首字母的方法
2015/03/25 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
Python高效编程技巧
2013/01/07 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
Python实现学校管理系统
2018/01/11 Python
python实现自动发送邮件
2018/06/20 Python
selenium自动化测试入门实战
2020/12/21 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
文明城市标语
2014/06/16 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
python中 Flask Web 表单的使用方法
2022/05/20 Python