Trigger typeahead manually? Is that possible?

[artworkad]

In my app the user may send a request for his position. When the position information is retrieved the data is populated to an input field which has the typeahead directive

document.getElementById('city').value = input;

But I want the typeahead to start and to search if the city is available in the typeahead resource. Is this possible?

[pkozlowski-opensource]

Nope, there is no such functionality as part of the typeahead directive. But what you could do is to write a very simple directive that would listen to model changes and call modelCtrl.$setViewValue() - this would open typeahead's suggestions.

Going to close this one for now as I don't think it is generic enough to be built in inside the typeahead's directive and - at the same time - it is very easy to achieve in a custom directive.

[artworkad]

@pkozlowski-opensource can you provide sample code? What is modelCtrl?

[hallister]

he's talking about a directive that requires ngModel:

.directive(...)
    return {
        ...
        require: 'ngModel',
        ...

That would inject ngModel into the directive function as the 4th argument.

[cindoum]

I have a similar issue. I try to open the suggestions on input focus.

myapp.directive('typeaheadOpenOnFocus', function () {
    return {
        require: ['ngModel'],
        link: function (scope, element, attr, ctrls) {
            element.bind('focus', function () {     
                ctrls[0].$setViewValue();
                //ctrls[0].$render();
            });
        }
    };
})

It is just not working at all. I tried giving a string into $setViewValue parameter but nothing happened either...

[braco]

@cindoum,

module.directive("typeaheadWatchChanges", function() {
  return {
    require: ["ngModel"],
    link: function(scope, element, attr, ctrls) {
      scope.$watch('thing', function(value) {
        ctrls[0].$setViewValue(value);
      });
    }
  };
});

[cindoum]

Hi

Thanks for the directive.

2013/10/14 braco notifications@github.com

@cindoum https://github.com/cindoum,

module.directive("typeaheadWatchChanges", function() {
return {
require: ["ngModel"],
link: function(scope, element, attr, ctrls) {
scope.$watch('thing', function(value) {
ctrls[0].$setViewValue(value);
});
}
};
});

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/759#issuecomment-26286040
.

[sonicparke]

Would this work on a button click also? I got it to work on a 2nd input to trigger typeahead on the first input. But what I really need is for it to be triggered from the buttons.
http://plnkr.co/edit/sZ2y2paigGMxdDDqSLje?p=preview

[zgmnkv]

I ran into this issue too. It will be very helpful if a typeahead directive will expose some public api to the scope with open/close methods, and we need and ability to disable automatic typeahead kick-in in this case.

[andreflourenco]

I've copied the typeahead directive code into a new directive called my-typeahead and included the following code in the end of the directive:

var openClickHandler = function (evt) {
    if (scope.matches.length < 1) {
        evt.stopPropagation();
    }
    modelCtrl.$setViewValue(' ');
    scope.$digest();
};

$(element).parent().find('.typeaheadTrigger').bind('click', openClickHandler);

That way, your typeahead element may be enclosed by a parent element and a trigger to the typeahead can be added anywhere within that parent element. Example:

<div class="input-group">
    <input ng-model="model" type="text" class="form-control" 
        my-typeahead="product.name for product in products" typeahead-min-length="0" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default typeaheadTrigger">
            &nbsp;<span class="caret"></span>&nbsp;
        </button>
    </span>
</div>

Not really sure if this is a good solution though...

[ali4ever4]

Hi i was struggeling all last week to get this thing working for me
none actually worked until i found this plunker
http://plnkr.co/edit/pFsPx0lTM7OZVwF97m1l?p=preview

it is using typeahead-input-formatter as suggested by one of the main contributers of angular typeahead ( i guess) here #981

reposting it here cause maybe in future someone like may self will be comming back for few days to this page looking and analyzing comments and suggestions to find a solution

[randywallace]

@sonicparke @artworkad I've tracked down precisely what is causing this. As such, this works:

http://plnkr.co/edit/F7tqNehQNXPkUjJEw0XC?p=preview

The dismissClickHandler is basically wiping out any matches caused by clicking a button, because the logic says 'if there is a click that is not within the typeahead input, clear out the matches'. All I did (on line 3236 of typeahead.js) was comment out the bind to click, and it works, at least. It acts wonky b/c you have to click it a couple times to get it to dismiss.

As such, the way in which the click event is handled (let me preface this with this: I am not good at javascript) should be refactored to handle only calling dismissClickHandler when a click occurs in the popup (an entry is selected) which would result in the intended outcome (removing the popup). I suppose, though, that lots of edge cases would push one to say that, for example, the popup should also be dismissed when someone clicks away from the popup (for example, in a blank area). Perhaps, then, there is a way to say that 'if a element has a ng-click directive, don't dismiss it' but that feels wrong.

@pkozlowski-opensource, considering that the dismissClickHandler is causing this behavior (what @sonicparke is talking about) for any elements that exercise a click event (and correctly update the $setViewValue() thru a custom directive), should this case be reopened?

[kennethlynne]

FYI: You can trigger the opening of suggestions from anywhere like this (preferably in a related directive)

var ngModelCtrl = $element.find('input').controller('ngModel');
        ngModelCtrl.$setViewValue(' ');

[kazeno]

Hi, I've just wasted a couple of hours of my life trying to make the above suggestions work, without any luck. However, I did come up with a simple, though very inelegant, hack, and I'm posting it in case someone else finds it useful. Find the original definition of dismissClickHandler (line 3715 of the version I'm using, ui-bootstrap-tpls-0.11.0.js), and change it from this:

var dismissClickHandler = function (evt) {
       if (element[0] !== evt.target) {
            resetMatches();
            scope.$digest();
        } 
};

to this:

var dismissClickHandler = function (evt) {
    if (element[0] !== evt.target) {
        resetMatches();
        scope.$digest();
    } else if (element.val().length) {
        element.focus();
        hasFocus = true;
        getMatchesAsync(element.val());
    }
};

[mbyrne00]

I wanted to get the typeahead to trigger manually only on a button press by hiding the field with the typeahead behind another text field. No guarantees for how many browsers it works in, but tested in Chrome, FF, IE10 - I only need to support Chrome for my use ;-). Hope it helps the next person out: http://plnkr.co/edit/UYjz6F5ydkMQznkZAlfx?p=preview