Ionic3 UI組件之a(chǎn)utocomplete詳解
無論是web開發(fā)還是app開發(fā)，autocomplete是常用組件之一。
可惜截止到目前，ionic官方并未提供此組件。
ionic2-autocomplete是GitHub上的開源的Ionic2組件，本文將講解如何在自己的項(xiàng)目中使用它。
組件地址：https://github.com/kadoshms/ionic2-autocomplete
1）npm install ionic2-auto-complete --save
2）打開app.module.ts，添加：import { AutoCompleteModule } from 'ionic2-auto-complete';
并且在imports數(shù)組里面增加AutoCompleteModule
3）打開app.scss，添加：@import "../../node_modules/ionic2-auto-complete/auto-complete";
4）直接找你的page中使用組件：<ion-auto-complete></ion-auto-complete>
5）給autocomplete添加dataProvider：寫一個service來從后臺獲取數(shù)據(jù)，ionic g provider autocomplete-service，
代碼如下：
別忘了在app.module.ts中增加：
import{AutocompleteServiceProvider}from'../providers/autocomplete-service/autocomplete-service';
并且在providers數(shù)組中增加AutocompleteServiceProvider。
7）在你使用autocomplete組件的page ts文件中，增加：
import{AutocompleteServiceProvider}from'../../providers/autocomplete-service/autocomplete-service';constructor構(gòu)造函數(shù)中增加：publicautocompleteSer:AutocompleteServiceProvider
8）在剛剛使用ion-auto-complete的地方修改為：<ion-auto-complete[dataProvider]="autocompleteSer"></ion-auto-complete>9）
ionic serve看看效果吧。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript 使用正則test( )第一次是 true,第二次是false
這篇文章主要介紹了使用正則test( )第一次是 true,第二次是false的相關(guān)資料,需要的朋友可以參考下2017-02-02
Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動態(tài)驗(yàn)證功能
這篇文章主要介紹了Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動態(tài)驗(yàn)證功能,需要的朋友可以參考下2017-05-05
KnockoutJS 3.X API 第四章之表單textInput、hasFocus、checked綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單textInput、hasFocus、checked綁定的相關(guān)資料,需要的朋友可以參考下2016-10-10
js觸發(fā)asp.net的Button的Onclick事件應(yīng)用
由于asp.net采用的是事件驅(qū)動模式，所以默認(rèn)用戶按回車并沒有觸發(fā)按鈕的onclick事件。用戶按回車也不是沒有提交表單，通過httpwath可以看到，實(shí)際上頁面表單是提交到了form下的action頁面，只不過沒有觸發(fā)onclick事件而已,感興趣的朋友可以了解下，或許對你有所幫助2013-02-02
微信小程序?qū)崿F(xiàn)2048小游戲的詳細(xì)過程
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)2048小游戲的相關(guān)資料,文中將實(shí)現(xiàn)的代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-09-09
mpvue微信小程序的接口請求fly全局?jǐn)r截代碼實(shí)例
這篇文章主要介紹了mpvue微信小程序的接口請求fly全局?jǐn)r截代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
在本篇文章中我們給大家分享了幾種使用JavaScript數(shù)組容易出錯的例子，需要的朋友們可以參考下。2018-09-09
JS循環(huán)發(fā)送請求時控制請求并發(fā)數(shù)實(shí)例
這篇文章主要介紹了JS循環(huán)發(fā)送請求時控制請求并發(fā)數(shù)實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
這篇文章主要介紹了js判斷字符長度及中英文數(shù)字等,需要的朋友可以參考下2014-03-03
JS循環(huán)遍歷ul中l(wèi)i的點(diǎn)擊事件給選中l(wèi)i添加css樣式(示例代碼)
對于一個ul中固定的li個數(shù)，當(dāng)點(diǎn)擊其中一個li時，改變選中l(wèi)i的顏色；同時改變對應(yīng)的另一個ul中l(wèi)i的顏色，怎么實(shí)現(xiàn)這個功能呢，下面小編給大家?guī)砹薺s循環(huán)遍歷ul中l(wèi)i的點(diǎn)擊事件，給給選中l(wèi)i添加css樣式，感興趣的朋友一起看看吧2023-07-07