Yveah Yveah - 28 days ago 5
AngularJS Question

How can I have a link at the end of an angular material autocomplete?

I am trying to have a link at the end of an angular material autocomplete. I need the link to always be visible. I found a workaround by creating a directive that kind of hijack the "md-not-found" element and always shows it. Here is an example of what it looks like :

https://plnkr.co/edit/5tfjYfrT59xx47k3Idke?p=preview

On first focus, it looks exactly like what I'm trying to achieve. The link "Create User" appears after all the results. Then after a search, let's say "a", the autocomplete results box shrink down to 1 element and never get back to full height.

How can I fix this behaviour ? Or is there another way to do what I am trying to do ?

Please keep in mind that this is just an example, I am not really trying to create users on the fly like that.

Thank you very much.

Here is the directive:

(function () {
'use strict';

angular.module('app').directive('notFoundAlwaysVisible', notFoundAlwaysVisible)

notFoundAlwaysVisible.$inject = ['$rootScope'];

function notFoundAlwaysVisible($rootScope) {
return {
restrict: 'A',
require: '^mdAutocomplete',
replace: true,
template: '',
link: function (scope, element, attrs, parentCtrl) {
parentCtrl.notFoundVisible = function () { return true; }
return '';
}
}
}
})();


Here is my autocomplete element with the new directive on it :

<md-autocomplete md-no-cache="true"
not-found-always-visible
md-selected-item="ctrl.item"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-search-text="ctrl.searchText"
md-item-text="item.Name"
md-min-length="0"
md-floating-label="Username"
md-select-on-match="true"
md-match-case-insensitive="true">
<md-item-template>
<div>
<span md-highlight-text="ctrl.searchText">{{ item.Name }}</span>
</div>
</md-item-template>
<md-not-found>
<a href="#">Create User {{ ctrl.searchText }}</a>
</md-not-found>
</md-autocomplete>

Answer

See if this helps . You can add your link at the end of the results and have its own stylesheet for that link.

<md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in (ctrl.querySearch(ctrl.searchText).concat(ctrl.footerOption))" 
       md-item-text="item.display" md-min-length="0" placeholder="What is your favorite US state?"  md-menu-class="autocomplete-custom-template">
        <md-item-template>
         <div ng-class="{fixed:item.isFooter}">
           <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
          </div>
        </md-item-template>
        <md-not-found>
          No states matching "{{ctrl.searchText}}" were found.
          <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
        </md-not-found>
      </md-autocomplete>

You can track the footer like this,

function selectedItemChange(item) {
      if (item) {
        if (item.isFooter)
           $log.info('footer selected, creating a new'  + JSON.stringify(item));           
        else           
          $log.info('Item changed to ' + JSON.stringify(item));           
      }
    }
Comments