JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<script src="https://code.angularjs.org/1.0.8/angular.js"></script>
<div ng-app="test">
<div ng-controller="MainCtrl">

    Autcomplete field:
    <input type="text" auto-complete ng-model="view.fld" autocomplete="off" size="28">

    <br>
        
        model: <b>{{view.fld}}</b>
    
</div>
</div>

JavaScript

var opts = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

var app  = angular.module('test', []);
app.directive('autoComplete', function() {
    return {
       
        require: "ngModel",
        link: function(scope, el, attrs, ngModelCtrl) {
            el.autocomplete({
                source: opts,
                select: function(event, ui) {
                    event.preventDefault();
                    el.val(ui.item.label);
                    scope.$apply(function() { 
                        debugger
                        scope.ngModel = el.val();
                        ngModelCtrl.$setViewValue(el.val())  });
                }
            });
        }
    };
});
function MainCtrl($scope) {
    $scope.view = { fld: '' };
}