blocks|key|3063190|text|也许你只需要用一种“棱角分明的方式”去做……也就是说，要使用指令来设置DOM元素和执行事件绑定，使用服务来获取数据，并使用控制器来执行业务逻辑...所有这些都利用了Angular依赖注入的好处……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3063191|获取您的自动补全数据的服务...|3063192|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'];
++++++++}
++++}
}]);|code-block|syntax|javascript|3063193|执行设置自动完成插件的工作的指令。|3063194|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
++++++++++++});
++++++++}
++++};
});|3063195|在你的标记中使用它...请注意，ng-+$scope使用您选择的内容在模型上设置值。|3063196|<div+ng-controller="Ctrl1">
++++<input+type="text"+ng-model="foo"+auto-complete/>
++++Foo+=+{{foo}}
</div>|3063197|这只是基础知识，但希望能有所帮助。|3063198|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

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...

A service to get your autocomplete data...

<pre><code>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'];
 }
 }
}]);
</code></pre>

a directive to do the work of setting up the autocomplete plugin.

<pre><code>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
 });
 }
 };
});
</code></pre>

And using it in your markup... notice the ng-model to set a value on the $scope with what you select.

<pre><code>&lt;div ng-controller="Ctrl1"&gt;
 &lt;input type="text" ng-model="foo" auto-complete/&gt;
 Foo = {{foo}}
&lt;/div&gt;
</code></pre>

That's just the basics, but hopefully that helps.

blocks|key|210068|text|我必须做更多的工作才能使用$http服务使其正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|210069|服务：|210070|app.factory("AutoCompleteService",+["$http",+function+($http)+{
++++return+{
++++++++search:+function+(term)+{
++++++++++++return+$http.get("http://YourServiceUrl.com/"+%2B+term).then(function+(response)+{
++++++++++++++++return+response.data;
++++++++++++});
++++++++}
++++};
}]);|code-block|syntax|javascript|210071|指令：|210072|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();
++++++++++++++++}
++++++++++++});
++++++++}
++++};
}]);|210073|html：|210074|<input+ng-model="YourObject"+autocomplete+/>|210075|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

I had to do a bit more work to get this working using an $http service.

The service: 

<pre><code>app.factory("AutoCompleteService", ["$http", function ($http) {
 return {
 search: function (term) {
 return $http.get("http://YourServiceUrl.com/" + term).then(function (response) {
 return response.data;
 });
 }
 };
}]);
</code></pre>

The directive: 

<pre><code>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();
 }
 });
 }
 };
}]);
</code></pre>

The html:

<pre><code>&lt;input ng-model="YourObject" autocomplete /&gt;
</code></pre>

blocks|key|3063210|text|HTML|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3063211|+<input+type="text"+class="form-control+ml-2"+employeesearchautocomplete+ng-model="employeeName"+name="employeeName">|code-block|syntax|javascript|3063212|JS|3063213|+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
++++++++++++++++++++++});


++++++++++++++++}
++++++++++++}
++++++++});|3063214|脚本文件导入顺序|3063215|3063216|All+your+jquery|unordered-list-item|3063217|AngularJs+library|3063218|your+angular+script+for+autocomplete|3063219|3063220|我希望这能对某些人有所帮助。|3063221|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|13|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|15|8|@]|9|@]|A|$]]|$1|Q|3|R|5|P|7|16|8|@]|9|@]|A|$]]|$1|S|3|T|5|P|7|17|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|18|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|19|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|Y|$]]

HTML

<pre><code> &lt;input type="text" class="form-control ml-2" employeesearchautocomplete ng-model="employeeName" name="employeeName"&gt;
</code></pre>

JS

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


 }
 }
 });
</code></pre>

Order of script files import

<ul>
<li>All your jquery</li>
<li>AngularJs library</li>
<li>your angular script for autocomplete</li>
</ul>

I hope this will help someone.

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.

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.

any idea?

jquery script:

<pre><code>$(function () {

 $('#txtProduct').autocomplete({
 source: function (request, response) {

 alert(request.term);

 },
 minLength: 3,
 select: function (event, ui) {

 }
 });

});
</code></pre>

<ul>
<li>interesting note: when i call the script on Chrome inspector the autocomplete starts working!!!</li>
<li>Versions: AngularJS: 1.0.2 - JqueryUI: 1.9.0</li>
</ul>

CONCLUSION:
The autocomplete widget from jQueryUI must be initializes from inside a custom directive of AngularJS as the example:

Markup

<pre><code>&lt;div ng-app="TestApp"&gt;
 &lt;h2&gt;index&lt;/h2&gt;
 &lt;div ng-controller="TestCtrl"&gt;

 &lt;input type="text" auto-complete&gt;ddd&lt;/input&gt;

 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

Angular script

<pre><code>&lt;script type="text/javascript"&gt;

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

 }
 });

&lt;/script&gt;
</code></pre>

Problems with jQuery autocomplete + AngularJS

我在我的页面上使用AjgularJS，并希望添加一个字段来使用jqueryui中的自动完成功能，但自动完成功能不会触发ajax调用。我已经在没有angular (ng-app和ng-controller)的页面上测试了这个脚本，它工作得很好，但是当我把脚本放在一个有angularjs的页面上时，它就停止工作了。有什么想...

问jQuery autocomplete + AngularJS的问题
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery autocomplete + AngularJS的问题EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery autocomplete + AngularJS的问题
EN