how angular ui typeahead trigger when focus

Viewed 12013

I'm using angular-ui typeahead. How can I trigger the popup items when focus on the input box, not after typing.

4 Answers

Use typeahead-min-length="0" if supported by your angular-ui version. Otherwise this will help you out:

directive('typeaheadOpenOnFocus', function ($timeout) {
       return {
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {
            element.bind('click', function () {
                var vv = ctrl.$viewValue;
                ctrl.$setViewValue(vv ? vv+' ': ' ' );
                $timeout(function(){ctrl.$setViewValue(vv ? vv : '');},10)
            });
        }
    };
})

and add typeahead-open-on-focus as attribute to your input element.

This will open the typeahead onfocus if it already has a value too. And it automatically reverts the viewvalue.

Inspired by the answer of Boem

You can try this for avoiding the issue of view rendering

app.directive('typeahead', function () {
return {
    restrict: "A",
    require: 'ngModel',
    link: function (scope, element, attr, ctrl) {
        element.bind('click', function () {                
            ctrl.$setViewValue('');
            ctrl.$render();
        });
    }
};});
Related