CODEWITHSUNDEEP
angularjsng-tags-input
emiguevara
emiguevara

Reputation: 1369

ngTagsInput autocomplete show suggestions on click

I would like to customize the style and behaviour of autocomplete to resemble a button. The main issue is that autocomplete currently can show suggestions on-down-arrow, on-focus and on-empty.

Any pointers to implement this? Any alternative modules that can do this?

Upvotes: 0

Views: 1333

Answers (2)

emiguevara
emiguevara

Reputation: 1369

Based on the answer by Rebornix, I ended up forking and modifying the autocomplete directive with a new loadOnClick parameter that will call suggestionList.load().

Some more fine-tuning might be needed, but it works as expected. The changes are committed as follows: event handler - template and implementation.

Upvotes: 0

Rebornix
Rebornix

Reputation: 5270

directive tagsInput is defined as 

tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig) {
...
 return {
    restrict: 'E',
    require: 'ngModel',
    scope: {
        tags: '=ngModel',
        onTagAdded: '&',
        onInvalidTag: '&',
        onTagRemoved: '&'
    },
    replace: false,
    transclude: true,
    templateUrl: 'ngTagsInput/tags-input.html',

It will load ngTagsInput/tags-input.html as its template. Then let's take a look at this file

<input class="input"
       ng-model="newTag.text"
       ng-change="eventHandlers.input.change(newTag.text)"
       ng-keydown="eventHandlers.input.keydown($event)"
       ng-focus="eventHandlers.input.focus($event)"
       ng-blur="eventHandlers.input.blur($event)"
       ng-paste="eventHandlers.input.paste($event)"
       ng-trim="false"
       ng-class="{'invalid-tag': newTag.invalid}"
       ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}"
       ti-autosize>

So you can add your customized action ng-click="eventHandlers.input.click($event)" here and implement the click function in directive.

Customizing styles should be similar.

Upvotes: 1

Related Questions