Skip to content

Commit

Permalink
Basic support for mdAutocomplete
Browse files Browse the repository at this point in the history 
I have added a working example, but it still needs options and filters
to be added.
  • Loading branch information
@Anthropic
Anthropic committed Oct 11, 2015
1 parent 182a2ab commit fbf7bfc
Show file tree
Hide file tree
Showing 6 changed files with 262 additions and 151 deletions.
75 changes: 23 additions & 52 deletions examples/data/autocomplete.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
114 changes: 103 additions & 11 deletions examples/material-example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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' },
Expand All @@ -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');

Expand Down
Loading

0 comments on commit fbf7bfc

Please sign in to comment.