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;
}
});
});