Custom Angular Directive - Typeahead w/ search history

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.

Other information:

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

Habilidades: Angular.js, Javascript

Ver más: ui specification, text string search, specification of requirements template, some search string, search text string, search string in array, requirements specification templates, premium javascript, premium bootstrap templates, ms project it templates, bootstrap templates user, bootstrap templates premium, array template, application specification template, angular 1, form search history, search history messaging, search history script, search history javascript, javascript search history, php ajax search box supporting arrow keys, javascript clear search history, search history, mosets tree search custom field, google custom search template

Información del empleador:
( 1 comentario ) Nagoya, Japan

Nº del proyecto: #9213068

13 freelancers están ofertando el promedio de $951 para este trabajo


Let's discuss more about project to finalize the proper scope with estimated cost and time so ping me over the freelancer chat. I am myself developer so you will directly work with me. No mediators. No managers. No Más

$1030 AUD en 25 días
(21 comentarios)

Hi, I have read your post and understood your requirement. I have great experience working on /AngularJS/node.js/Bootstrap/PHP/MySQL/HTML5/jQuery/Wordpress/Magento/Joomla/Drupal/CSS3/Java/Python/Django/Javascript Más

$1030 AUD en 10 días
(22 comentarios)

We are very interested in this project. We have great experience in Angular.js. I have read your above description and i think its well within our range to execute this is in a good time frame so would you be kind enou Más

$1000 AUD en 5 días
(13 comentarios)

Hello, Sir. Nice to meet you and How are you? I have read your job description extremely carefully and I have been applied for your job with my skill and relevant experiences. You can find compatibility Más

$789 AUD en 3 días
(2 comentarios)

A proposal has not yet been provided

$600 AUD en 5 días
(15 comentarios)

Dear Hiring Manager, Greetings from TOP recommended freelancer by freelancer.com !! I hope your day is going well and all is good with you. We would like to discuss the project in details before confirming the bid, Más

$1000 AUD en 20 días
(12 comentarios)

Hi there , I am a software engineer with a 5 years of professional experience building web applications for the smallest of small startups, to some of the web's largest sites. I would be glad to take up your idea Más

$947 AUD en 3 días
(20 comentarios)

Dear Sir, This is Sikander. I have read you job specification and came across your requirements about this project. I have 14+ years of experience in software development and I am ready to start this job. Please dis Más

$1000 AUD en 12 días
(4 comentarios)

Hi, I am interested. thanks Narendra ///////////////////////////////////////////////////////////////////////////////////////////////

$833 AUD en 10 días
(1 comentario)

Hi, I have 7+ years of experience in ASP.Net/C#/VB.Net technology development. I strongly believe in deliver work on time with quality. I am ready for further discussion. Looking for long term business relations. Más

$1052 AUD en 25 días
(2 comentarios)

Hello, Here are some reference websites. [login to view URL] (ONLINE CLINIC PORTAL) [login to view URL] (PUBLICATION) [login to view URL] (VIDEO SHARING_WEBSITE) [login to view URL] (Do Más

$1030 AUD en 30 días
(0 comentarios)

Hey, we have done these 2 in Angular. Angular Js and Angular Js 2 Beta Cricket [login to view URL] Rugby http://sf-rbu-en-scoreboard.sportsflash.com.a Más

$833 AUD en 30 días
(0 comentarios)

A proposal has not yet been provided

$944 AUD en 10 días
(0 comentarios)

Hi there, I have reviewed your requirements and I can do this job easily. I am interested in discussing this further with you. I am having more than 6 years of hands-on experience with PHP, MySQL, WordPress, Bootstr Más

$631 AUD en 12 días
(0 comentarios)

Hi there, I'm AngularJS expert. I will help you in completing AngularJS application. I am a developer with more than 8 years of experience with solid technical skills. Here are our featured projects: htt Más

$1400 AUD en 30 días
(0 comentarios)

Have experience with angular directives

$500 AUD en 15 días
(0 comentarios)