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 相关文章推荐
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
使用jquery如何获取时间
Oct 13 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
jQuery实现计算器功能
Oct 19 jQuery
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
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
js Calender控件使用详解
2015/01/05 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
python如何使用unittest测试接口
2018/04/04 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
航海技术专业毕业生求职信
2014/04/06 职场文书
高中生班主任评语
2014/04/25 职场文书
党员领导干部承诺书
2014/05/28 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
工作证明格式范文
2015/06/15 职场文书
在校学生证明格式
2015/06/24 职场文书
MySQL 如何限制一张表的记录数
2021/09/14 MySQL