自动完成文本框和angularjs [英] autocomplete textbox and angularjs

问题描述

我有一个文本框，我想申请的auocomplete就可以了，我用下面的插件：

autocomp

和工作正常，但只要我有角的js结合起来将停止工作：

我有以下的code：

 函数personController（$范围）{
$ scope.firstName =约翰，
$ scope.lastName =李四，
$ scope.availableTags = []，
$ scope.fullName =功能（）{
   / *返回$ scope.firstName ++ $ scope.lastName; * /
    $ scope.availableTags = [
                          动作，
                          AppleScript的
                          ASP
                          BASIC，
                          C，
                          C ++，
                          Clojure的
                          COBOL
                          ColdFusion的
                          二郎
                          FORTRAN，
                          常规
                          哈斯克尔
                          Java的，
                          JavaScript的
                          Lisp的，
                          Perl的
                          PHP
                          蟒蛇，
                          红宝石，
                          斯卡拉
                          方案
                        ];
    （文档）$ .ajaxComplete（函数（）{
        警报（''）;
        $（＃TXT）。自动完成（{
            来源：$ scope.availableTags，
        }）;    }）;
    //返回$ scope.availableTags;
}
 

}

和jfiddle链接如下：

jfiddle

正如你可以看到utocomplete不无棱角的工作，虽然它运作良好，

谁能帮助

解决方案

 ＆LT; HTML LANG =ENGT＆;  ＆LT; HEAD＆GT;
    ＆LT;间的charset =UTF-8/＆GT;
    ＆LT;标题＆GT; jQuery用户界面自动完成 - 默认功能和LT; /标题＆GT;
    ＆所述;脚本数据需要=angular.js@1.3.9数据semver =1.3.9SRC =的https：//$c$c.angularjs.org/1.3.9/angular.js＆GT ;＆LT; / SCRIPT＆GT;
    ＆LT;链接rel =stylesheet属性HREF =// code.jquery.com / UI / 1.11.2 /主题/平滑度/ jQuery的-ui.css/＆GT;
    ＆LT;脚本的src =// code.jquery.com / jQuery的-1.10.2.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本的src =// code.jquery.com / UI / 1.11.2 / jQuery的-ui.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本＆GT;
  VAR应用= angular.module（'应用'，[]）;
  app.controller（'CTRL'，函数（$范围）{
   $ scope.availableTags = [
      动作，
      AppleScript的
      ASP
      BASIC，
      C，
      C ++，
      Clojure的
      COBOL
      ColdFusion的
      二郎
      FORTRAN，
      常规
      哈斯克尔
      Java的，
      JavaScript的
      Lisp的，
      Perl的
      PHP
      蟒蛇，
      红宝石，
      斯卡拉
      方案
    ];
    $ scope.complete =功能（）{
      的console.log（$ scope.availableTags）;
    $（#tags）.autocomplete（{
      来源：$ scope.availableTags
    }）;
    }
  }）;
  ＆LT; / SCRIPT＆GT;
  ＆LT; /头＆GT;  ＆LT;机身NG-应用=应用程序NG控制器=CTRL＆GT;
    ＆LT; D​​IV CLASS =UI窗口小部件＆GT;
      ＆LT;标签=标签＆gt;标签：LT; /标签＆gt;
      ＆LT;输入ID =标签NG-KEYUP =完成（）/＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; /身体GT;＆LT; / HTML＆GT;
 

Plunker你
<一href=\"http://plnkr.co/edit/5XmPfQ78vRjSrxE0Tt3B?p=$p$pview\">http://plnkr.co/edit/5XmPfQ78vRjSrxE0Tt3B?p=$p$pview
对不起，我不擅长小提琴。

I have a text box and I want to apply the auocomplete on it, I am using the following plugin:

autocomp

and works fine but as soon as I combine it with angular js it stops working:

I have the following code:

function personController($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe",
$scope.availableTags = [],
$scope.fullName = function() {
   /* return $scope.firstName + " " + $scope.lastName;*/
    $scope.availableTags= [
                          "ActionScript",
                          "AppleScript",
                          "Asp",
                          "BASIC",
                          "C",
                          "C++",
                          "Clojure",
                          "COBOL",
                          "ColdFusion",
                          "Erlang",
                          "Fortran",
                          "Groovy",
                          "Haskell",
                          "Java",
                          "JavaScript",
                          "Lisp",
                          "Perl",
                          "PHP",
                          "Python",
                          "Ruby",
                          "Scala",
                          "Scheme"
                        ];
    $(document).ajaxComplete(function(){
        alert('');
        $("#txt").autocomplete({
            source: $scope.availableTags,
        });

    });
    //return $scope.availableTags;
}

}

and jfiddle link is as follow:

jfiddle

As you can see the utocomplete does not work though without angular it works well,

Can anyone help

解决方案

<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Default functionality</title>
    <script data-require="angular.js@1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script>
  var app=angular.module('app',[]);
  app.controller('ctrl',function($scope){
   $scope.availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $scope.complete=function(){
      console.log($scope.availableTags);
    $( "#tags" ).autocomplete({
      source: $scope.availableTags
    });
    } 
  });
  </script>
  </head>

  <body ng-app="app" ng-controller="ctrl">
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags" ng-keyup="complete()"/>
    </div>
  </body>

</html>

Plunker for you http://plnkr.co/edit/5XmPfQ78vRjSrxE0Tt3B?p=preview Sorry I am not good at fiddle.

这篇关于自动完成文本框和angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！