autocomplete in App Framework using AngularJS

273 views Asked by At

How to implement Auto Complete Text Box in App Framework Using AngularJS, Auto Complete Method gives error undefined

The following code throws an error when using AppFramework:

$scope.complete = function () { 
  console.log($scope.availableTags); 
  $("#tags").autocomplete({ source: $scope.availableTags }); 
};

Error autoComplete method is undefined

1

There are 1 answers

0
AudioBubble On

You can use ng-autocomplete. I have provided a simple example as follows:

<!DOCTYPE html>
<html ng-app="Test">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"href="style.css">

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="script.js"></script>
    <script src="ngAutocomplete.js"></script>
</head>

<body>
<div ng-controller="TestCtrl">

<form id="form" role="form">

    <div class="form-group move-down">
        <label for="Autocomplete">Generic Autocomplete</label>
        <input type="text" id="Autocomplete" class="form-control" ng-autocomplete="result1" details="details1" options="options1"/>
    </div>
</form>
</div>
</body>
</html>

You can also use Angucomplete. Find it here: http://ghiden.github.io/angucomplete-alt/