个人中心
gpt4 book ai didi

javascript - TypeError : elem. 自动完成不是一个函数

转载 作者：行者123 更新时间：2023-12-03 03:27:20 24 4
gpt4 key购买 nike

我是 Angular.JS 新手。过去 6 个小时我很挣扎。

我从 HTTP 读取数据并将其作为自动完成状态发送回 View 。以前它是一个选择框。我决定从选择框更改为自动完成。

骗子链接:http://embed.plnkr.co/MbhALuekWNDqnYFyjbOF/

这里要返回两个值。一个是 ID，另一个是描述。因为用户会通过描述进行搜索。但必须返回相应用户选择的 ID。

错误:

angular.min.js:124 TypeError: elem.autocomplete is not a function
at Object.link (main.js:217)
at angular.min.js:17
at wa (angular.min.js:85)
at q (angular.min.js:71)
at f (angular.min.js:62)
at q (angular.min.js:71)
at f (angular.min.js:62)
at f (angular.min.js:62)
at f (angular.min.js:62)
at f (angular.min.js:62) "<input client-complete="" class="form-control ng-pristine ng-untouched ng-valid" ng-model="vm.client.COMPANY_DESC" placeholder="enter name" type="text">"

(function (angular) {
  'use strict';

  var app = angular.module('myApp', [ 'ngAnimate', 'ui.bootstrap', 'ngTable', 'ngResource']);

  app.directive('clientComplete',['$filter',clientCompleteDir]);

  app.controller('AccountMappingCtrl', ['$scope', '$http', 'NgTableParams', AccountMappingcontroller]);

  function AccountMappingcontroller($scope, $http, NgTableParams) {

  //-------------------------------------------------------------------------------------------------
    var vm = this;
    vm.client ={COMPANY_ID:'', COMPANY_DESC:''};
   
      /* $http.get("http://localhost:52087/api/companydetails").then(function(response) {
      var convertToJson = angular.fromJson(response.data);
      $scope.dataSource = convertToJson;
    }); */
    
   $scope.dataSource = [{'COMPANY_ID':'10001','COMPANY_DESC':'THIRDROCK','COMPANY_CURRENCY':'AUS','ACTIVE':true,'IS_HEADOFFICE':true,'ACCOUNTING_SYSTEM_ID':'1'},{'COMPANY_ID':'10002','COMPANY_DESC':'OBN TECH','COMPANY_CURRENCY':'INR','ACTIVE':true,'IS_HEADOFFICE':true,'ACCOUNTING_SYSTEM_ID':'1'}];
  
    $scope.setClientData = function(item){
      if (item){
        vm.client = item;
      }
    }

  } //controller

  //directive
  function clientCompleteDir($filter) {
      return {
          restrict: 'A',
          link: function (scope, elem, attrs) {
              elem.autocomplete({
                  source: function (request, response) {

                      //term has the data typed by the user
                      var params = request.term;

                      //simulates api call with odata $filter
                      var data = scope.dataSource;
                      if (data) {
                          var result = $filter('filter')(data, {COMPANY_DESC:params});
                          angular.forEach(result, function (item) {
                              item['value'] = item['COMPANY_DESC'];
                          });
                      }
                      response(result);

                  },
                  minLength: 1,
                  select: function (event, ui) {
                     //force a digest cycle to update the views
                     scope.$apply(function(){
                      scope.setClientData(ui.item);
                     });
                  },

              });
          }

      };
    }

})(angular);
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Account Mapping Maintenance </title>

  <!-- Bootstrap -->
  <link href="./vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="./vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">

  <!-- Custom Theme Style -->
  <link href="./build/css/custom.min.css" rel="stylesheet">
  <link href="https://unpkg.com/ng-table@4.0.0/bundles/ng-table.css" rel="stylesheet">
  <link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">

</head>

<body class="nav-md" ng-app="myApp" ng-controller="AccountMappingCtrl as vm">

  <input client-complete class="form-control" ng-model="vm.client.COMPANY_DESC" placeholder="enter name" type="text">
  <input client-complete class="form-control" ng-model="vm.client.COMPANY_ID" placeholder="enter name" type="hidden">
  
    <!-- Angular CDN -->
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-cookies.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
    <script src="https://unpkg.com/ng-table@4.0.0/bundles/ng-table.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.js"></script>

    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>

    <!-- jQuery -->
    <script src="./vendors/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="./vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="./vendors/fastclick/lib/fastclick.js"></script>
    <!-- Custom Theme Scripts -->
    <script src="./build/js/custom.min.js"></script>
    <script src="./Controller/main.js"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
</body>

</html>

最佳答案

您需要首先加载 jquery，然后加载 jquery-ui 和 Angular 来消除该错误:

 <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link data-require="jquery-ui@1.11.2" data-semver="1.11.2" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script data-require="jquery-ui@1.11.2" data-semver="1.11.2" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.6.6/angular.js"></script>

这是一个小型工作插件，具有一个用于过滤源数据的输入，希望它能让您更轻松地继续:plunker

(开始输入 THIRDROCK)

关于javascript - TypeError : elem. 自动完成不是一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46261635/

24 4 0
文章推荐： Javascript匿名函数向其添加对象
文章推荐： javascript - 严格使用 php 或 javascript 按第一列 1 对 CSV 文件进行排序
文章推荐： javascript - json 响应 Angular 2 中的错误字符
文章推荐： javascript - 设置cookie跨原点
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com