ng-generic-autocomplete v1.2.6

Generic Autocomplete Module with ng-bootstrap for Angular

Using

• Import GenericAutocompleteComponent from the ng-generic-autocomplete package into your module
• Add HTML tags <generic-autocomplete itemList="list" propertyName="property" outputProperties="myOutputPropertiesArray" title="title" showTitle="true" helpText="helpText" showHelpText="true" placeholder="placeholder" failedText="failedText" fetchDataText="fetchDataText" (onItemSelect)="itemSelected($event)" (onFetchData)="fetchData()" showItems="true" showTableText="true" tableActive="false" tableText="tableText" pageSize="5" maxSize="5" clearInput="false">

Available properties

• REQUIRED*: itemList: any[] - List of objects to filter
• REQUIRED*: remoteSearch: boolean - Whether to use a remote api for searching or not
• REQUIRED**: remoteConfig: {api: string, endpoint: string} - Base api url and endpoint name. No trailing slashes
• REQUIRED: propertyName: string - Property to filter by
• outputProperties: string[] - List of properties to display output as (default: [])
• outputDelimiter: string - Delimiter to separate display properties with (default: ' ')
• title: string - Title above text input (default: 'Search')
• showTitle: boolean - Boolean to display title over input (default: true)
• helpText: string - Helper text under input (default: 'Begin typing and search suggestions will appear')
• showHelpText: boolean - Boolean to display help text under input (default: true)
• placeholder: string - Placeholder text in input (default: 'Search..')
• failedText: string - Text to display when search failed (default: 'No items matched your search')
• fetchDataText: string - Text to display when data not yet fetched (default: 'Click to fetch data')
• clearInput: boolean - Whether to clear input after item selected or not (default: true)
• showItems: boolean - Whether to show a table containing all items in itemList or not (default: false)
• showTableText: boolean - Display text above item table (default: true)
• tableActive: boolean - Have table expanded by default or not (default: true)
• tableText: string - Text shown over item table (default: 'Or choose from all items..')
• pageSize: number - Number of items to display for each page in table (default: 5)
• maxSize: number - Max number of pages shown in pagination before wrapping (default: 5)

(* One of these are required, and can't be used in conjuction with one another) (** Only required if remoteSearch=true)

Outputs

• onItemSelect: Returns a single item of the type in your itemList array of objects
• onFetchData: Emitted when user clicks the component and data is not yet fetched