I have an existing Angular 1 application, and am looking to upgrade the typeahead directive I'm using.
The directive I'm looking for is similar to the angular-bootstrap one at [url removed, login to view], but with some differences:
- It should behave as a select instead of a text input, taking an `options` array which maps to labels and ids, and only accepting values within that list. The current value should be stored in ng-model.
- ng-model should only be set to an id when an option's full label is typed in, when a key is pressed, or when an option is clicked. Until then, the highlighted id should be stored separately to the `ng-model`
- `ng-model` should be set to null after typing something which does not exactly correspond with a label in `options` - I will use the `required` attribute to handle validation.
- It needs to be possible to pass in a new `options` array at any time. When this happens, the highlighted id should not change - even when other options are added/removed.
- It should have an `on-input` attribute which accepts a callback function - and when the user changes the current input string, this function should be called with the new value
- The directive should accept an `is-loading` attribute, which when `true` will add a `typeahead-loading` class to the root element.
- It should handle appropriate key events, including up/down arrow keys, spacebar for select, tabbing in/out with appropriate focus, escape key for closing dropdown, etc.
- The popup should be displayed as soon as the input element receives focus (the linked directive will only display the popup after starting typing)
- The typeahead directive should include the input element itself within its template, as opposed to be attached as to an existing <input>.
There are a number of things which the linked directive does, but this typeahead directive should not do:
- The directive should not handle filtering - this will be handled by the application using the `onInput` and `options` attributes described above.
- The directive should not handle promises passed into `options` - only arrays.
- The directive should not handle `typeahead-on-select($item, $model, $label)`. This can be accomplished through `ng-change` and NgModelController.
- The directive should not implement these attributes from the linked directive: `typeahead-append-to-element-id`, `typeahead-editable`, `typeahead-input-formatter`, `typeahead-min-length`, `typeahead-no-results`, `typeahead-select-on-exact`, `typeahead-wait-ms`, `typeahead-loading`, `typeahead-select-on-blur`
- The directive should also not implement `typeahead-focus-on-select` or `typeahead-focus-first` as attributes, instead always behaving as if they were set to `true`
Notably, the directive *does* need to handle custom templates for the popup and the items themselves, as in the linked typeahead directive. However, given the other differences, I'd recommend starting from scratch instead of basing your code on the linked directive. I've attached an example of how the directive will be used.
- I would appreciate any suggestions to improve the specification
- I'm not opposed to you using an existing open source project to implement this directive, or releasing the result as an open-source project of your own under the MIT license
- I am a programmer myself, but do not have enough time to implement this. I value clean code.
- I need this done ASAP, and am willing to pay a premium for it to happen
- There may be more work in the future if I like your style, especially if you have experience with Rails.
If interested, please reply with at least one sample of a directive you've previously created. Bonus points for cleanliness, similarity to the requirements, and well-maintained open source. Bids without a code sample will be ignored.