Geschlossen

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.

Fähigkeiten: Angular.js, Javascript

Mehr darüber 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

Über den Arbeitgeber:
( 1 Bewertung ) Nagoya, Japan

Projekt-ID: #9213068

13 Freelancer bieten im Durchschnitt $951 für diesen Job

meet2amitvw

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 Mehr

$1030 AUD in 25 Tagen
(21 Bewertungen)
7.3
seekdeveloper

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 Mehr

$1030 AUD in 10 Tagen
(22 Bewertungen)
7.1
logicpowered

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 Mehr

$1000 AUD in 5 Tagen
(13 Bewertungen)
6.9
wangrui8080

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 Mehr

$789 AUD in 3 Tagen
(2 Bewertungen)
5.8
arifjaunpur

A proposal has not yet been provided

$600 AUD in 5 Tagen
(15 Bewertungen)
5.5
gkws

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, Mehr

$1000 AUD in 20 Tagen
(12 Bewertungen)
5.3
shashank0202

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 Mehr

$947 AUD in 3 Tagen
(20 Bewertungen)
4.7
sikandermandal

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 Mehr

$1000 AUD in 12 Tagen
(4 Bewertungen)
4.4
narendragautam

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

$833 AUD in 10 Tagen
(1 Bewertung)
3.2
amitorada

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

$1052 AUD in 25 Tagen
(2 Bewertungen)
0.6
phonedroidapps

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 Mehr

$1030 AUD in 30 Tagen
(0 Bewertungen)
0.0
datheist9

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 Mehr

$833 AUD in 30 Tagen
(0 Bewertungen)
0.0
mmanish248

A proposal has not yet been provided

$944 AUD in 10 Tagen
(0 Bewertungen)
0.0
per12

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 Mehr

$631 AUD in 12 Tagen
(0 Bewertungen)
0.0
bestofweb

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 Mehr

$1400 AUD in 30 Tagen
(0 Bewertungen)
0.0
lavanyadanda

Have experience with angular directives

$500 AUD in 15 Tagen
(0 Bewertungen)
0.0