Newfangled Package Modernizer

    ng2-completer-rambase
    TypeScript icon, indicating that this package has built-in type declarations

    9.0.1 • Public • Published

    ng2-completer

    Auto complete component for Angular 2.

    This component is based on angucomplete-alt

    Click for demo or plunk

    Help needed

    I don't use this library much anymore and don't have time to properly maintain it. If you are currently using ng2-completer and interested to maintain it please let me know!

    Installation

    npm install ng2-completer --save

    Usage

    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 { HttpClientModule } from "@angular/common/http";
    import { AppComponent } from './app.component';
    import { Ng2CompleterModule } from "ng2-completer";
    
    
    @NgModule({
      imports: [
          BrowserModule,
          FormsModule,
          HttpClientModule,
          Ng2CompleterModule,
      ],
      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" [datasource]="dataService" [minSearchLength]="0"></ng2-completer>
                <h1>Search captain</h1>
                <ng2-completer [(ngModel)]="captain" [datasource]="captains" [minSearchLength]="0"></ng2-completer>`
    })
    export class MyComponent {
    
      protected searchStr: string;
      protected captain: string;
      protected dataService: CompleterData;
      protected 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' }
      ];
      protected captains = ['James T. Kirk', 'Benjamin Sisko', 'Jean-Luc Picard', 'Spock', 'Jonathan Archer', 'Hikaru Sulu', 'Christopher Pike', 'Rachel Garrett' ];
    
      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.

    System.js configuration

    Add the following to System.js map configuration:

       var map = {
           ...
           'ng2-completer': 'node_modules/ng2-completer/ng2-completer.umd.js'
       }

    API

    ng2-completer component

    Attribute Description Type Required Default
    datasource Autocomplete list data source can be an array of strings or a URL that results in an array of strings or a CompleterData object Array<string>|string|CompleterData Yes
    dataService Deprecated use datasource instead. 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
    autofocus Set input focus when the page loads boolean No false
    clearUnselected Clear the input on blur if not selected. 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
    initialValue Initial value for the component. Value is parsed using: titleField, descriptionField and imageField and used as selected value any No
    inputId id attribute of the input element. string No
    inputName name attribute of the input element. string No
    inputClass class 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
    openOnFocus If true will open the dropdown and perform search when the input gets the focus. boolean No false
    openOnClick If true will open and close the dropdown by click. boolean No false
    selectOnFocus If true will select the input text upon focus. boolean No false
    selectOnClick If true will select the input text by click. boolean No false
    fillHighlighted If true will set the model with the value in the input field when item is highlighted. boolean No true
    pause Number of msec. to wait before searching. number No 250
    placeholder Placeholder text for the search field. string No
    textNoResults Text displayed when the search returned no results. if the string is falsy it won't be displayed string No
    textSearching Text displayed while search is active. if the string is falsy it won't be displayed string No Searching...
    autoHighlight Automatically highlight the best matching search result when the input changes. the "best match" is selected by: exact match, starts with and finally includes boolean No false

    ng2-completer events

    Name Description Type
    selected emitted when an item is selected. (selected: CompleterItem): void
    highlighted emitted when an item is highlighted. (highlighted: CompleterItem): void
    focus emitted when the input gets focus (): void
    blur emitted when the input looses focus (): void
    opened emitted when the dropdown is opened or closed (isOpen: boolean): void
    keyup emitted when the input emits keyup (event: any): void
    keydown emitted when the input emits keydown (event: any): void

    ng2-completer methods

    Method Description Parameters
    open() Open the dropdown
    close() Close the dropdown
    focus() Set the focus to the completer input
    blur() Remove the focus from the completer input
    isOpen() Returns the state of the dropdown

    Local data

    Create local data provider by calling CompleterService.local.

    Parameters

    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

    Attributes

    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.

    Remote data

    Create remote data provider by calling CompleterService.remote.

    Parameters

    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

    Attributes

    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.
    requestOptions RequestOptions (@angular/common/http) HTTP request options that should be sent with the search request.

    CSS classes

    • .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

    Credits

    • This product uses the TMDb API but is not endorsed or certified by TMDb

    Install

    npm i ng2-completer-rambase

    DownloadsWeekly Downloads

    3

    Version

    9.0.1

    License

    MIT

    Unpacked Size

    1.07 MB

    Total Files

    76

    Last publish

    Collaborators

    • dilankamr