ngDatalist

AngularJS directive providing text input with searchable dropdown list.

Live demo

Features

One-file directive, easy to integrate with module bundlers such as webpack, gulp etc.
Searchable dropdown list.
Option to switch on/off 'require' in the forms.
Easy to apply custom styles.

Getting started

Attach directive to your application just after AngularJS framework:

<script src="./angular.min.js"></script>
<script src="./ng-datalist/dist/ng-datalist.js"></script>

Add 'ng-datalist' module to your application dependencies:
```
angular.module('myApp', ['ng-datalist']);
```

Insert directive to the application:

<ng-datalist items=myAwesomeList current=myElement></ng-datalist>

Directive Options

items {Array} (required) - array containing items to be displayed on the list.
current {string} (required) - use to get/set current input value.
req {boolean} (optional) - set to true if input should be required by the form.
styling {boolean} (optional) - set to false to disable default styles.

Styling

Switch styling option to false, so that your new styles will work well:

<ng-datalist items=myItems current=currentItem styling="false"><ng-datalist>

Now you can start to style elements using ng-datalist-container class or accessing directly by directive element class name:

/* Directive container */
.ng-datalist-container {
    border: 1px solid #020D45;
    height: 50px;
    width: 300px;
}

/* Directive input */
.ng-datalist-container input:focus {
    border-color: #13B3AB;
}
/* by direct class */
.ng-datalist-input:focus {
    border-color: #13B3AB;
}

/* Directive list */
.ng-datalist-container ul {
    max-height: 100px;
}
/* by direct class */
.ng-datalist-list {
    max-height: 100px;
}

/* Directive list item */
.ng-datalist-container li {
    color: #020D45;
}
/* by direct class */
.ng-datalist-item {
    color: #020D45;
}

License

The MIT License (MIT)