https://github.com/codeep/ngx-livesearch

Advanced autocomplete component for Angular
https://github.com/codeep/ngx-livesearch

angular angular-components autocomplete

Last synced: 6 months ago
JSON representation

Advanced autocomplete component for Angular

• Host: GitHub
• URL: https://github.com/codeep/ngx-livesearch
• Owner: codeep
• License: mit
• Created: 2018-01-05T15:12:35.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-27T12:48:36.000Z (almost 8 years ago)
• Last Synced: 2025-04-22T23:20:39.226Z (9 months ago)
• Topics: angular, angular-components, autocomplete
• Language: TypeScript
• Homepage: https://codeep.github.io/ngx-livesearch
• Size: 454 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# NgxLivesearch

ngxlivesearch is an angular component which allows to prepopulate list of anything based on user's input.

### Demo

![ngx-livesearch-demo](https://user-images.githubusercontent.com/20105433/37862900-18bfcbc0-2f6e-11e8-927d-2ae1a4f55360.gif)

![ngx-livesearch-demo-2](https://user-images.githubusercontent.com/20105433/37862903-26d5df92-2f6e-11e8-8774-0c2d1885d370.gif)

## Data source

Component supports both - remote search url and local data.

## Options

You can use this component to populate data from remote server or local array. 

`searchUrl` - remote url for fetching data, searched text, limit and offset will be sent automatically.

`localSource` - an array of objects which plugin will use for populating data.

```javascript

defaultSearchOptions {

    searchParam: 'name', // key name which will be sent to server or will be used to search in localSource. The default value is `name`.

    

    interval: 400, // request cancel time, used to improve typing experience. 

    

    limit: 10, // maximum rows count that can be loaded at once.

    

    seeAllUrl: null, // url of the `See all` link.

    

    seeAllParams: {}, // params of `See all` url.

    

}

```

```javascript

textOptions {

    seeAll: 'See all',

    

    noResults: 'No results',

    

    placeholder: 'Search'

    

}

```

## Events

`onSelect` - returns selected element.

## Contributions

Contributions are very welcome, please open an issue if you have troubles using component or have ideas on how to improve library.