Question

我正在学习AngularJS，现在我正在尝试使用$http.get

自动完成功能

我在{strong> sebmade

撰写的JSFiddle上找到了一个很好的例子

这个例子正是我想要的。但是，由于某些原因，它根本不适用于我，我不知道缺少什么？

以下是我从示例中获取的代码：

<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css"></script>
   </head>
<body>

<div ng-app="MyApp">
   <div ng-controller="DefaultCtrl">
       <input auto-complete ui-items="names" ng-model="selected">
       selected = {{selected}}
   </div>
</div>

<script src = "https://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<script>
    function DefaultCtrl($scope) {
        $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
    }

    angular.module('MyApp', []).directive('autoComplete', function($timeout) {
        return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
        };
    });
</script>
</body>
</html>

当我在Google Chrome上打开控制台视图时，我发现我有以下几个错误：

Refused to execute script from 'http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css' because its MIME type ('text/css') is not executable, and strict MIME type checking is enabled.


TypeError: iElement.autocomplete is not a function
at file:///C:/Users/AhmedA/Desktop/11111.html:22:14
at nodeLinkFn (https://code.angularjs.org/1.0.0/angular-1.0.0.js:4222:13)
at compositeLinkFn (https://code.angularjs.org/1.0.0/angular-1.0.0.js:3837:14)
at nodeLinkFn (https://code.angularjs.org/1.0.0/angular-1.0.0.js:4216:24)
at compositeLinkFn (https://code.angularjs.org/1.0.0/angular-1.0.0.js:3837:14)
at compositeLinkFn (https://code.angularjs.org/1.0.0/angular-1.0.0.js:3840:12)
at https://code.angularjs.org/1.0.0/angular-1.0.0.js:3749:30
at https://code.angularjs.org/1.0.0/angular-1.0.0.js:932:25
at Object.$eval (https://code.angularjs.org/1.0.0/angular-1.0.0.js:7769:28)
at Object.$apply (https://code.angularjs.org/1.0.0/angular-1.0.0.js:7849:23) <input auto-complete="" ui-items="names" ng-model="selected" class="ng-pristine ng-valid">

Answer 1

2件事：css需要在链接标记中，而你没有加载jQuery或jQuery UI

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">

将其放在Angular脚本标记上方：

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

Answer 2

您还可以使用angucomplete-alt在angularJs

中自动填写

步骤

包含脚本标记
在模块中注入依赖

演示：

<html>

<head>
    <title>Angular JS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
    </script>
	<script src="https://cdn.jsdelivr.net/angucomplete-alt/3.0.0/angucomplete-alt.min.js">
    </script>
	
    <script>
    var myApp = angular.module("myApp", ['angucomplete-alt']);

    myApp.controller("firstCtrl", function($scope) {
         $scope.names = [{"name":"john"},
		 {"name":"bill"},
		 {"name": "charlie"},
		 {"name": "robert"},
		 {"name": "alban"},
		 {"name": "oscar"},
		 {"name": "marie"},
		 {"name": "celine"},
		 {"name": "brad"},
		 {"name": "drew"},
		 {"name":"rebecca"},
		 {"name":"michel"},
		 {"name": "francis"},
		 {"name": "jean"}
		 ];
    });
    </script>
</head>

<body>
    <div ng-app="myApp">
        <div ng-controller="firstCtrl">
            <div angucomplete-alt id="ex1"
  placeholder="Search countries"
  maxlength="50"
  pause="100"
  selected-object="selectedCountry"
  local-data="names"
  search-fields="name"
  title-field="name"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight"></div>
        </div>
    </div>
</body>

</html>

角度自动完成不会与我合作

2 个答案: