Input之AutoComplete

--自动完成功能是输入组件,提供实时的建议当打字。

Import

import {AutoCompleteModule} from 'primeng/primeng';

demo code

<h3 class="first">Basic</h3>
<p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="30"
placeholder="Countries" [minLength]="1"></p-autoComplete>
<span style="margin-left:10px">Country: {{country ? country.name||country : 'none'}}</span> <h3>Advanced</h3>
<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
[minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true" (onDropdownClick)="handleDropdownClick($event)">
<ng-template let-brand pTemplate="item">
<div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
<img src="showcase/resources/demo/images/car/{{brand}}.gif" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/>
<div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
</div>
</ng-template>
</p-autoComplete>
<span style="margin-left:50px">Brand: {{brand||'none'}}</span> <h3>Multiple</h3>
<p-autoComplete [(ngModel)]="countries" [suggestions]="filteredCountriesMultiple" (completeMethod)="filterCountryMultiple($event)" styleClass="wid100"
[minLength]="1" placeholder="Countries" field="name" [multiple]="true">
</p-autoComplete>
<ul>
<li *ngFor="let c of countries">{{c.name}}</li>
</ul>

html

export class AutoCompleteDemo {

    country: any;

    countries: any[];

    filteredCountriesSingle: any[];

    filteredCountriesMultiple: any[];

    brands: string[] = ['Audi','BMW','Fiat','Ford','Honda','Jaguar','Mercedes','Renault','Volvo','VW'];

    filteredBrands: any[];

    brand: string;

    constructor(private countryService: CountryService) { }

    filterCountrySingle(event) {
let query = event.query;
this.countryService.getCountries().then(countries => {
this.filteredCountriesSingle = this.filterCountry(query, countries);
});
} filterCountryMultiple(event) {
let query = event.query;
this.countryService.getCountries().then(countries => {
this.filteredCountriesMultiple = this.filterCountry(query, countries);
});
} filterCountry(query, countries: any[]):any[] {
//in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
let filtered : any[] = [];
for(let i = 0; i < countries.length; i++) {
let country = countries[i];
if(country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
return filtered;
} filterBrands(event) {
this.filteredBrands = [];
for(let i = 0; i < this.brands.length; i++) {
let brand = this.brands[i];
if(brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
this.filteredBrands.push(brand);
}
}
} handleDropdownClick() {
this.filteredBrands = []; //mimic remote call
setTimeout(() => {
this.filteredBrands = this.brands;
}, 100)
}
}

ts

@Injectable()
export class CountryService { constructor(private http: Http) {} getCountries() {
return this.http.get('showcase/resources/data/countries.json')
.toPromise()
.then(res => <any[]> res.json().data)
.then(data => { return data; });
}
}

services

参考:

https://www.primefaces.org/primeng/#/autocomplete

PrimeNG之Input(一)的更多相关文章

  1. PrimeNG之Validation

    Validation ----primeng输入组件显示验证错误时自动标记为无效值. demo code export class ValidationDemo implements OnInit { ...

  2. PrimeNG之DataTable

    --数据表显示在表格格式数据. Basic Import import {DataTableModule,SharedModule} from 'primeng/primeng'; source &l ...

  3. PrimeNG之TreeTable

    --treetable用于显示分层数据表格的格式 Import import {TreeTableModule,TreeNode,SharedModule} from 'primeng/primeng ...

  4. angular项目中使用Primeng

    1.第一步把依赖添加到项目中 npm install primeng --save npm install @angular/animations --save npm install font-aw ...

  5. angular cli + primeNG

    目录: 1.安装  angular cli 2.创建项目 3.构建路由 4.新建组件 5.组件之间的通信 6.引入primeNG 7.修改primeNG组件样式 8.问题 -------------- ...

  6. HTML中上传与读取图片或文件(input file)----在路上(25)

    input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...

  7. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

  8. input[tyle="file"]样式修改及上传文件名显示

    默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...

  9. input标签中button在iPhone中圆角的问题

    1.问题 使用H5编写微信页面时,使用<input type="button"/>时,在Android手机中显示正常,但是在iPhone手机中则显示不正常,显示为圆角样 ...

随机推荐

  1. java PDF2JPG

    import org.apache.commons.lang3.StringUtils; import org.apache.pdfbox.pdmodel.PDDocument; import org ...

  2. canvas图片合成中的坑

    需求 要用代码来实现多张外部图片和文字的合并而且要上传到七牛云,再将图片链接通过客户端分享出去.图片背景需要支持用户自定义更换. 实现方案 在一个canvas上多次调用drawImage函数,分别绘制 ...

  3. 第二周 数据分析之展示 Matplotlib库入门

    Matplotlib库介绍:优秀的数据可视化第三方库 使用:Matplotlib库由各种可视化类构成,内部结构复杂,受Matlab启发,matplotlib.pyplot是绘制各类可视化图形的命令子库 ...

  4. MinGW GCC 8.1.0 2018年5月2日 出炉啦

    MSYS_MinGW-w64_GCC_810_x86-x64.7z for x86 x64 59.0 MB发布日期: 2018-05-04 下载地址:https://sourceforge.net/p ...

  5. js实现拖动验证码

    效果图: Index.html <!DOCTYPE html> <html lang="en"> <head> <meta http-eq ...

  6. 27)django-form操作示例(动态Select数据,自定义字段验证,全局验证等)

    1)普通传递select数据 # -*- coding:utf-8 -*- __author__ = 'shisanjun' from django import forms from django. ...

  7. jxl应用事例

    实例中主要目的是解析jxl使用流程以及jxl绘制Excel的写法思路,代码掩去了项目中的真实数据,请根据需求酌情修改,如果有帮助到有需要的人,不胜欢喜. Dao层为查询数据库,返回list数据,此处省 ...

  8. SpringMVC的入门示例

    1.配置流程说明 第一步:导入包 第二步:构建一个请求,编写请求页面 第三步:配置核心控制器 第四步:构建一个业务控制器 第五步:编写Spring配置文件 第六步:编写一个返回页面 2.配置流程--- ...

  9. 动态sql与静态sql的区别

    首先,所谓SQL的动态和静态,是指SQL语句在何时被编译和执行,二者都是用在SQL嵌入式编程中的,这里所说的嵌入式是指将SQL语句嵌入在高级语言中,而不是针对于单片机的那种嵌入式编程. 静态SQL,在 ...

  10. Android 常见问题解决

    1.Android 启动Activity后阻止EditText自动获取焦点 在EditText中添加如下属性即可 <LinearLayout android:focusable="tr ...