jQuery 自动完成 + AngularJS 的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12959516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problems with jQuery autocomplete + AngularJS
提问by Flavio Oliveira
i'm using AjgularJS on my page and want to add a field to use autocomplete from jqueryui and the autocomplete does not fires the ajax call.
我在我的页面上使用 AjgularJS 并想添加一个字段以使用 jqueryui 的自动完成功能，并且自动完成功能不会触发 ajax 调用。
i've tested the script on a page without angular (ng-app and ng-controller) and it works well, but when i put the script on a page with angularjs it stops working.
我已经在没有 angular（ng-app 和 ng-controller）的页面上测试了脚本，它运行良好，但是当我将脚本放在带有 angularjs 的页面上时，它停止工作。
any idea?
任何的想法？
jquery script:
jQuery 脚本：
$(function () {
$('#txtProduct').autocomplete({
source: function (request, response) {
alert(request.term);
},
minLength: 3,
select: function (event, ui) {
}
});
});
- interesting note: when i call the script on Chrome inspector the autocomplete starts working!!!
- Versions: AngularJS: 1.0.2 - JqueryUI: 1.9.0
- 有趣的提示：当我在 Chrome 检查器上调用脚本时，自动完成开始工作！！！
- 版本：AngularJS：1.0.2 - JqueryUI：1.9.0
CONCLUSION:The autocomplete widget from jQueryUI must be initializes from inside a custom directive of AngularJS as the example:
结论：来自 jQueryUI 的自动完成小部件必须从 AngularJS 的自定义指令内部初始化，例如：
Markup
标记
<div ng-app="TestApp">
<h2>index</h2>
<div ng-controller="TestCtrl">
<input type="text" auto-complete>ddd</input>
</div>
</div>
Angular script
角脚本
<script type="text/javascript">
var app = angular.module('TestApp', []);
function TestCtrl($scope) { }
app.directive('autoComplete', function () {
return function postLink(scope, iElement, iAttrs) {
$(function () {
$(iElement).autocomplete({
source: function (req, resp) {
alert(req.term);
}
});
});
}
});
</script>
回答by Ben Lesh
Perhaps you just need to do it in an "angular way"... that is, to use a directive to set up your DOM elements and do event bindings, use a service to get your data, and use a controller to do your business logic... all while leveraging the dependency injection goodness that is Angular...
也许你只需要以“角度方式”来做……也就是说，使用指令来设置你的 DOM 元素并进行事件绑定，使用服务来获取你的数据，并使用控制器来做你的业务逻辑......同时利用Angular的依赖注入优势......
A service to get your autocomplete data...
一种获取自动完成数据的服务...
app.factory('autoCompleteDataService', [function() {
return {
getSource: function() {
//this is where you'd set up your source... could be an external source, I suppose. 'something.php'
return ['apples', 'oranges', 'bananas'];
}
}
}]);
a directive to do the work of setting up the autocomplete plugin.
一个指令来完成设置自动完成插件的工作。
app.directive('autoComplete', function(autoCompleteDataService) {
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
// elem is a jquery lite object if jquery is not present,
// but with jquery and jquery ui, it will be a full jquery object.
elem.autocomplete({
source: autoCompleteDataService.getSource(), //from your service
minLength: 2
});
}
};
});
And using it in your markup... notice the ng-model to set a value on the $scope with what you select.
并在您的标记中使用它...注意 ng-model 使用您选择的内容在 $scope 上设置一个值。
<div ng-controller="Ctrl1">
<input type="text" ng-model="foo" auto-complete/>
Foo = {{foo}}
</div>
That's just the basics, but hopefully that helps.
这只是基础知识，但希望这会有所帮助。
回答by Jason
I had to do a bit more work to get this working using an $http service.
我必须做更多的工作才能使用 $http 服务使其正常工作。
The service:
服务：
app.factory("AutoCompleteService", ["$http", function ($http) {
return {
search: function (term) {
return $http.get("http://YourServiceUrl.com/" + term).then(function (response) {
return response.data;
});
}
};
}]);
The directive:
该指令：
app.directive("autocomplete", ["AutoCompleteService", function (AutoCompleteService) {
return {
restrict: "A",
link: function (scope, elem, attr, ctrl) {
elem.autocomplete({
source: function (searchTerm, response) {
AutoCompleteService.search(searchTerm.term).then(function (autocompleteResults) {
response($.map(autocompleteResults, function (autocompleteResult) {
return {
label: autocompleteResult.YourDisplayProperty,
value: autocompleteResult
}
}))
});
},
minLength: 3,
select: function (event, selectedItem) {
// Do something with the selected item, e.g.
scope.yourObject= selectedItem.item.value;
scope.$apply();
event.preventDefault();
}
});
}
};
}]);
The html:
html：
<input ng-model="YourObject" autocomplete />
回答by SHIVA
HTML
HTML
<input type="text" class="form-control ml-2" employeesearchautocomplete ng-model="employeeName" name="employeeName">
JS
JS
var myApp = angular.module("employeeSearchModule",[]);
myApp.controller("employeeSearchController",function($scope,$http){
$scope.message= "Welcome to angular js..."
});
myApp.directive('employeesearchautocomplete', function() {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ngModelCtrl) {
element.autocomplete({
source : function(request, response) {
$.ajax({
type : "POST",
url : "searchEmployee.html",
data : request,
success : response,
dataType : 'json'
});
},
select : function(event, ui) {
event.preventDefault();
if (ui.item.value == '-1') {
scope.employeeName ='';
scope.$apply();
} else {
scope.employeeName = ui.item.label;
scope.$apply();
}
},
focus : function(event, ui) {
event.preventDefault();
scope.employeeName = ui.item.label;
scope.$apply();
},
change : function(event, ui) {
if (!ui.item) {
scope.employeeName ='';
scope.$apply();
}
}
},{
minLength : 2
});
}
}
});
Order of script files import
脚本文件导入顺序
- All your jquery
- AngularJs library
- your angular script for autocomplete
- 你所有的jQuery
- AngularJs 库
- 用于自动完成的角脚本
I hope this will help someone.
我希望这会帮助某人。
