md-autocomplete

[Anthropic]

Add autocomplete and allow for template usage.

Based on: https://material.angularjs.org/HEAD/#/demo/material.components.autocomplete

Needs to allow template via schema form attribute or reference to included template.

[Anthropic]

Added basic functionality in fbf7bfc

[brianpkelley]

Not sure if something changed, but I had to double escape the single quotes in md-items in the autocomplete.html file.

md-items="item in evalExpr('this[\\''+form.optionFilter+'\\'](\\''+searchText+'\\')')"

[Anthropic]

@brianpkelley it may have, which version of MD did you run with?

[brianpkelley]

Angular 1.5.6
Angular Material 1.0.9
Angular Schema Form 0.8.13
Angular Schema Form Material current Develop branch

I also commented on #11 not sure if it notified you.

[brianpkelley]

Disclaimer

Sorry for spamming code everywhere, I'd love to pull down a fresh copy but just don't have the time right now. Rushing to get a project out the door for work, so I'm posting these as notes for anyone with time or for when I get time to issue clean PR's

---

In the same vein as #18, md-autocomplete (and other fields that are of type object) pass null to the validator when empty. I may be wrong, and this is intended behavior, but this should be set to undefined like on empty strings, numbers etc.

    // Object fields (material - autocomplete ) will give a null value when we're looking for an object or undefined
    if (schema.type === 'object' && value === null) {
       value = undefined;
    }

---

I know this is still a work in progress, but I needed to make a few changes to the md-autocopmlete template to work with errors. Because the md-autocomplete directive creates it's own md-input-container sf-messages needs to be moved from the container div to the inner md-autocomplete as well as an option for md-required-match

    if ( args.form.schema.requireMatch ) {
        mdAutocompleteFrag.setAttribute('md-require-match', true);
    }

<div class="form-group {{::form.htmlClass ? form.htmlClass : 'flex-100'}} schema-form-select " sf-layout>
  <md-autocomplete flex
    sf-messages
    ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
    ng-disabled="form.readonly"
    ng-model="$$value$$"
    sf-autocomplete
    sf-field-model="replaceAll"
    sf-changed-auto-complete="form"
    schema-validate="form"
    md-selected-item="$$value$$"
    md-search-text="searchText"
    md-selected-item-change="'todo';"
    md-items="item in evalExpr('this[\\''+form.optionFilter+'\\'](\\''+searchText+'\\')')"
    md-item-text="item.name"
    md-floating-label="{{::form.title}}"
    md-menu-class="autocomplete-custom-template"
    >
    <md-item-template>
      <span md-highlight-text="searchText">{{item.name}}</span>
    </md-item-template>
    <md-not-found>
      No matches found
    </md-not-found>
  </md-autocomplete>
</div>