![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
ng2-completer
Advanced tools
Changelog
0.3.3
Readme
Auto complete component for Angular 2.
This component is based on angucomplete-alt
Click for the demo
This version is a work in progress
npm install ng2-completer --save
The module you want to use ng2-completer in must import Ng2CompleterModule
and FormsModule
(to use the ngModel
directive on ng2-completer). Ng2CompleterModule
provides the CompleterService
, and declares the ng2-completer
directive.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { AppComponent } from './app.component';
import { Ng2CompleterModule } from "ng2-completer";
@NgModule({
imports: [
BrowserModule,
Ng2CompleterModule,
FormsModule,
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Add ng2-completer to your component and create a data source:
import { Component } from '@angular/core';
import { CompleterService, CompleterData } from 'ng2-completer';
@Component({
selector: 'my-component',
template: `<h1>Search color</h1>
<ng2-completer [(ngModel)]="searchStr" [dataService]="dataService" [minSearchLength]="0"></ng2-completer>`
})
export class MyComponent {
private searchStr: string;
private dataService: CompleterData;
private searchData = [
{ color: 'red', value: '#f00' },
{ color: 'green', value: '#0f0' },
{ color: 'blue', value: '#00f' },
{ color: 'cyan', value: '#0ff' },
{ color: 'magenta', value: '#f0f' },
{ color: 'yellow', value: '#ff0' },
{ color: 'black', value: '#000' }
];
constructor(private completerService: CompleterService) {
this.dataService = completerService.local(this.searchData, 'color', 'color');
}
}
ng2-completer uses rxjs stream as data sources. There are 2 ready made data sources that can be used to fetch local and remote data but it's also possible to provide a custom source that generates a stream of items.
Add the following to System.js
map configuration:
var map = {
...
'ng2-completer': 'node_modules/ng2-completer/ng2-completer.umd.js'
}
Attribute | Description | Type | Required | Default |
---|---|---|---|---|
dataService | Autocomplete list data source. | CompleterData | Yes | |
ngModel | see the angular forms API. | string | Yes | |
autoMatch | Auto select an item if it is the only result and it is an exact match of the search text. | boolean | No | false |
clearSelected | Clear the input when a result is selected. | boolean | No | false |
disableInput | If true disable the input field. | boolean | No | false |
fieldTabindex | Set the tabIndex of the input. | number | No | |
inputName | name attribute of the input element. | string | No | |
matchClass | CSS class to apply for matching part of the title and description. | string | No | |
maxChars | Maximal number of characters that the user can type in the component. | number | No | 524288 |
minSearchLength | Minimal number of characters required for searching. | number | No | 3 |
overrideSuggested | If true will override suggested and set the model with the value in the input field. | boolean | No | false |
pause | Number of msec. to wait before searching. | number | No | 250 |
placeholder | Placeholder text for the search field. | string | No | |
selected | Event handler that is called when an item is selected. | (selected: CompleterItem): void | No | |
highlighted | Event handler that is called when an item is highlited. | (highlighted: CompleterItem): void | No | |
textNoResults | Text displayed when the search returned no results. | string | No | |
textSearching | Text displayed while search is active. | string | No | Searching... |
Create local data provider by calling CompleterService.local
.
Name | Type | Description | Required |
---|---|---|---|
data | any[] | Observable<any[]> | A JSON array with the data to use or an Observable that emits one | Yes |
searchFields | string | Comma separated list of fields to search on. Fields may contain dots for nested attributes; if empty or null all data will be returned. | Yes |
titleField | string | Name of the field to use as title for the list item. | Yes |
Name | Type | Description |
---|---|---|
descriptionField | string | Name of the field to use as description for the list item. |
imageField | string | Name of the field to use as image url for the list item. |
Create remote data provider by calling CompleterService.remote
.
Name | Type | Description | Required |
---|---|---|---|
url | string | Base url for the search | Yes |
searchFields | string | Comma separated list of fields to search on. Fields may contain dots for nested attributes; if empty or null all data will be returned. | Yes |
titleField | string | Name of the field to use as title for the list item. | Yes |
Name | Type | Description |
---|---|---|
descriptionField | string | Name of the field to use as description for the list item. |
imageField | string | Name of the field to use as image url for the list item. |
urlFormater | (term: string) => string | Function that get's the searchterm and returns the search url before each search. |
dataField | string | The field in the response that includes the data. |
headers | Headers (@angular/http) | HTTP request headers that should be sent with the search request. |
.completer-holder
.completer-input
.completer-dropdown-holder
.completer-dropdown
.completer-searching
.completer-no-results
.completer-row
.completer-image-holder
.completer-image
.completer-image-default
.completer-title
.completer-description
.completer-list-item-holder
.completer-list-item
.completer-selected-row
FAQs
angular autocomplete/typeahead component
The npm package ng2-completer receives a total of 14,498 weekly downloads. As such, ng2-completer popularity was classified as popular.
We found that ng2-completer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.