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>

[Anthropic]

Thanks @brianpkelley back from holiday so I'll try to sort it out soon, yes autocomplete was the least finished of all the components, really hacked together for my own project at the time.