Basic support for mdAutocomplete

I have added a working example, but it still needs options and filters
to be added.

Author: Anthropic

examples/data/autocomplete.json

@@ -1,67 +1,38 @@
 {
   "schema": {
     "type": "object",
-    "title": "Comment",
-    "required": ["comments"],
+    "title": "Arnold Schwarzenegger",
     "properties": {
-      "comments": {
-        "type": "array",
-        "maxItems": 2,
-        "items": {
-          "type": "object",
-          "properties": {
-            "name":  {
-              "title": "Name",
-              "type": "string"
-            },
-            "email":  {
-              "title": "Email",
-              "type": "string",
-              "pattern": "^\\S+@\\S+$",
-              "description": "Email will be used for evil."
-            },
-            "spam": {
-              "title": "Spam",
-              "type": "boolean",
-              "default": true
-            },
-            "comment": {
-              "title": "Comment",
-              "type": "string",
-              "maxLength": 20,
-              "validationMessage": "Don't be greedy!"
-            }
-          },
-          "required": ["name","comment"]
-        }
+      "first": {
+        "title": "What is your favourite Schwarzenegger movie?",
+        "type": "string"
+      },
+      "second": {
+        "title": "What is your favourite Schwarzenegger movie?",
+        "type": "string"
       }
     }
   },
   "form": [
+    {
+      "key": "first",
+      "type": "autocomplete",
+      "optionFilter": "querySearch"
+    },
     {
       "type": "help",
-      "helpvalue": "<h4>Array Example</h4><p>Try adding a couple of forms, reorder by drag'n'drop.</p>"
+      "helpvalue": "I only need at least 1 character"
     },
     {
-      "key": "comments",
-  	  "add": "New",
-  	  "style": {
-  		"add": "btn-success"
-	  },
-      "items": [
-        "comments[].name",
-        "comments[].email",
-        {
-          "key": "comments[].spam",
-          "type": "checkbox",
-          "title": "Yes I want spam.",
-          "condition": "model.comments[arrayIndex].email"
-        },
-        {
-          "key": "comments[].comment",
-          "type": "textarea"
-        }
-      ]
+      "title": "What is your second favourite Schwarzenegger movie?",
+      "key": "second",
+      "type": "autocomplete",
+      "optionFilter": "querySearch",
+      "minLength": 4
+    },
+    {
+      "type": "help",
+      "helpvalue": "I need at least 4 characters"
     },
     {
       "type": "submit",

examples/material-example.html

@@ -168,15 +168,11 @@ <h2>Material Design</h2>
     <div layout="column" flex="45">
       <h3>The Generated Form</h3>
 
-      <form name="ngform"  sf-model="modelData" sf-form="form" sf-schema="schema" ng-submit="submitForm(ngform,modelData)"></form>
-<!--
       <form name="ngform"
             sf-model="modelData"
             sf-form="form"
             sf-schema="schema"
-            ng-submit="submitForm(ngform,modelData)">
-      </form>
--->
+            ng-submit="submitForm(ngform,modelData)"></form>
 
       <div ng-show="ngform.$valid"><em>Form is valid</em></div>
       <div ng-show="ngform.$invalid"><em>Form is not valid</em></div>
@@ -245,10 +241,6 @@ <h3>Schema</h3>
 <script type="text/javascript" src="../bower_components/angular-ui-ace/ui-ace.js"></script>
 <script type="text/javascript" src="../bower_components/objectpath/lib/ObjectPath.js"></script>
 <!--
-<script type="text/javascript" src="../bower_components/pickadate/lib/picker.js"></script>
-<script type="text/javascript" src="../bower_components/pickadate/lib/picker.date.js"></script>
-<script type="text/javascript" src="../bower_components/pickadate/lib/translations/nl_NL.js"></script>
-
 <script type="text/javascript" src="../bower_components/spectrum/spectrum.js"></script>
 <script type="text/javascript" src="../bower_components/spectrum/i18n/jquery.spectrum-sv.js"></script>
 <script type="text/javascript" src="../bower_components/angular-spectrum-colorpicker/dist/angular-spectrum-colorpicker.min.js"></script>
@@ -284,10 +276,10 @@ <h3>Schema</h3>
 });
 
 
-app.controller('TestCtrl', function($scope, $http, $location) {
+app.controller('TestCtrl', function($scope, $http, $location, $timeout, $q) {
 
   $scope.tests = [
-    /*{ name: "Autocomplete", data: 'data/autocomplete.json' },*/
+    { name: "Autocomplete", data: 'data/autocomplete.json' },
     { name: "Simple", data: 'data/simple.json' },
     { name: "Basic JSON Schema Type", data: 'data/types.json' },
     { name: "TitleMap Examples", data: 'data/titlemaps.json' },
@@ -300,6 +292,106 @@ <h3>Schema</h3>
     { name: "Hack: Conditional required", data: 'data/conditional-required.json' },
   ];
 
+  /////////////////////////////////////////////////////////////////////////
+  //// Autocomplete code //////////////////////////////////////////////////
+  $scope.arnieFlix = loadFlix();
+  $scope.searchText    = null;
+  $scope.simulateQuery = false;
+  $scope.querySearch   = querySearch;
+  $scope.info = function (t) {
+    console.info(t);
+  };
+  /**
+   * Search for arnieFlix... use $timeout to simulate
+   * remote dataservice call.
+   */
+  function querySearch (query) {
+    var results = query ? $scope.arnieFlix.filter( createFilterFor(query) ) : $scope.arnieFlix,
+        deferred;
+    if ($scope.simulateQuery) {
+      deferred = $q.defer();
+      $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
+      return deferred.promise;
+    } else {
+      return results;
+    }
+  };
+
+  /**
+   * Create filter function for a query string
+   */
+  function createFilterFor(query) {
+    var lowercaseQuery = angular.lowercase(query);
+    return function filterFn(item) {
+      return (item.value.indexOf(lowercaseQuery) === 0);
+    };
+  };
+
+  function loadFlix() {
+    var films = [
+      { "year": undefined, "title": "The Legend of Conan" },
+      { "year": undefined, "title": "Triplets" },
+      { "year": 2015, "title": "Terminator Genisys" },
+      { "year": 2015, "title": "Maggie" },
+      { "year": 2014, "title": "The Expendables 3" },
+      { "year": 2014, "title": "Sabotage" },
+      { "year": 2013, "title": "Escape Plan" },
+      { "year": 2013, "title": "The Last Stand" },
+      { "year": 2012, "title": "The Expendables 2" },
+      { "year": 2010, "title": "The Expendables" },
+      { "year": 2005, "title": "The Kid & I" },
+      { "year": 2004, "title": "Around the World in 80 Days" },
+      { "year": 2003, "title": "Welcome to the Jungle" },
+      { "year": 2003, "title": "Terminator 3: Rise of the Machines" },
+      { "year": 2002, "title": "Collateral Damage" },
+      { "year": 2000, "title": "The 6th Day" },
+      { "year": 1999, "title": "End of Days" },
+      { "year": 1997, "title": "Batman & Robin" },
+      { "year": 1996, "title": "Jingle All the Way" },
+      { "year": 1996, "title": "Eraser" },
+      { "year": 1994, "title": "Junior" },
+      { "year": 1994, "title": "True Lies" },
+      { "year": 1993, "title": "Last Action Hero" },
+      { "year": 1993, "title": "Dave" },
+      { "year": 1991, "title": "Terminator 2: Judgment Day" },
+      { "year": 1990, "title": "Kindergarten Cop" },
+      { "year": 1990, "title": "Total Recall" },
+      { "year": 1988, "title": "Twins" },
+      { "year": 1988, "title": "Red Heat" },
+      { "year": 1987, "title": "The Running Man" },
+      { "year": 1987, "title": "Predator" },
+      { "year": 1986, "title": "Raw Deal" },
+      { "year": 1985, "title": "Commando" },
+      { "year": 1985, "title": "Red Sonja" },
+      { "year": 1984, "title": "The Terminator" },
+      { "year": 1984, "title": "Conan the Destroyer" },
+      { "year": 1982, "title": "Conan the Barbarian" },
+      { "year": 1980, "title": "The Jayne Mansfield Story" },
+      { "year": 1979, "title": "Scavenger Hunt" },
+      { "year": 1979, "title": "The Villain" },
+      { "year": 1976, "title": "Stay Hungry" },
+      { "year": 1974, "title": "Happy Anniversary and Goodbye" },
+      { "year": 1973, "title": "The Long Goodbye" },
+      { "year": 1969, "title": "Hercules in New York" },
+      { "year": 1969, "title": "Hercules" }
+    ];
+    return films.map( function (film) {
+      film.name = film.title;
+      film.value = film.title.toLowerCase();
+      return film;
+    });
+  };
+
+  // $scope.autocompleteTmpl = `
+  //   <span class="item-year">
+  //     <span> {{item.year}} </span>
+  //   </span>
+  //   <span class="item-title">
+  //     <strong>{{item.title}}</strong>
+  //   </span>`;
+  //// Autocomplete code end //////////////////////////////////////////////
+  /////////////////////////////////////////////////////////////////////////
+
   $scope.navbarMode = 'default';
   //$scope.hasFlash = swfobject.hasFlashPlayerVersion('9');