Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
ng2-completer
Advanced tools
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 --sav
You should have Http
and forms
provided in your app:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { AppComponent, environment } from './app/';
import {HTTP_PROVIDERS} from '@angular/http';
bootstrap(AppComponent, [
HTTP_PROVIDERS,
disableDeprecatedForms(),
provideForms()
]);
Add ng2-completer to your component and create a data source:
import { Component } from '@angular/core';
import {AutocompCmp, AutocompService, AutocompData, AUTOCOMP_DATA_PROVIDES} from 'ng2-completer';
@Component({
selector: 'my-component',
template: `<h1>Search color</h1>
<ng2-completer [(ngModel)]="searchStr" [dataService]="dataService" [minSearchLength]="0"></ng2-completer>`,
directives: [CompleterCmp],
providers: [AUTOCOMPLET_DATA_PROVIDES, CompleterService]
})
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-autocomp 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 custome source that generates a stream of items.
Attribute | Description | Type | Required | Default |
---|---|---|---|---|
dataService | Autocoplete 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 | 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 ovveride 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 | |
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[] | A JSON array with the data to use. | Yes |
searchFields | string | Comma separated list of fields to search on. Fields may contain dots for nested attributes. | 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. | 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. |
.completer-holder
.completer-input
.completer-dropdown-holder
.completer-dropdown
.completer-searching
.completer-no-results
.completer-row
.completer-row
.completer-image-holder
.completer-image-holder
.completer-image
.completer-image-default
.completer-image-default
.completer-title
.completer-description
.completer-description
.completer-list-item-holder
.completer-list-item
FAQs
angular autocomplete/typeahead component
The npm package ng2-completer receives a total of 18,036 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.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.