I'm currently working on adding a persistent link at the end of an Angular Material autocomplete. I want the link to always be visible, even after a search is performed. To achieve this, I came up with a workaround involving a directive that manipulates the "md-not-found" element. Here's a glimpse of what I have implemented:
Initially, everything looks as intended - the "Create User" link appears below the autocomplete results. However, upon performing a search (e.g., typing "a"), the autocomplete results container shrinks to display only one item and fails to return to its original full height.
I'm seeking guidance on how to address this issue. Alternatively, if there's a different approach to achieving the desired outcome, I'd appreciate any suggestions.
Please note that the user creation aspect is purely illustrative in this scenario.
Your assistance is greatly appreciated.
Below is the directive utilized:
(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's my autocomplete element integrated with the new directive:
<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>