how to trigger ng-enter directive after selecting value from jquery autocomplete with the updated value?

487 Views Asked by At

I have input field containing ng-model="searchJob" and i am using auto-complete plugin. I have a directive named ng-enter with it also. But when i select value from the enter keystroke, it triggers the directive, and i dont get the updated value from the field. I expect a solution.

<input ng-model="searchJob" type="text" id="suggest" class="form-control search-input" placeholder="Search your desired job" ng-enter="search(searchJob)" autofocus/>

My directive code :

jobApp.directive('ngEnter', function () {
return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event, ui) {
        if(event.which === 13) {
            scope.$apply(function (){
                scope.$eval(attrs.ngEnter, {'event': event});
            });

            event.preventDefault();
        }
    });
}});

jquery autocomplete code

$(document).ready(function(){

     $("input").autocomplete({
        delay: 100,
        minLength: 2,

        source: function (request, response) {

            var suggestURL = "someUrl"+$('input').val();
            $.ajax({
                method: 'GET',
                dataType: 'json',
                url: suggestURL
            })
            .success(function(data){
                response(data);
            });
        },
        select: function (event, ui) {
            event.preventDefault();
            console.log(ui.item.value);

            angular.element($('#suggest').val(ui.item.value)).triggerHandler('input');

            return false;
        }
    });

});

0

There are 0 best solutions below