md-autocomplete clear text entry when item is selected

[kschwidder]

It would be beneficial if the md-autocomplete can be customized to clear the text when an item has been selected. When using the md-autocomplete to search for items and maintaining a list of objects it is cumbersome to always press the clear button.

As a workaround I am accessing the $mdAutocompleteCtrl and triggering the clear() method but this is not a good decision....

[david-gang]

What do you mean by cleared?
Ideally when selecting an item, this item should be selected and the text you specify should appear.
You see it nicely in the demo
https://material.angularjs.org/#/demo/material.components.autocomplete
Please check also if you have set the md-item-text.
If this is not what you want, may you please demonstrate with a plunkr what your intent is?

[mikekr1]

I'm pretty certain @kschwidder is talking about adding an option that allows for the text field to be cleared once a selection is made from the autocomplete dropdown.

This is useful when using the same autocomplete field to make multiple selections.

[kschwidder]

indeed !

[robertmesserle]

@kschwidder Wouldn't this be accomplished by binding something to the searchText and clearing that value on select?

[kschwidder]

It doesn't since after a selection the option is shown with a clearance button. When setting the SearchText the button is still shown. There is currently no way to close the button via an API.
What I am doing so far is this :
$timeout( function() { $scope.$$childHead.$mdAutocompleteCtrl.clear(); },100);

[onyx1337]

Have same issue.

I solve it like that :
in 'md-selected-item-change' , I assign md-search-text to void and 'md-selected-item' to undefined
like this

 $scope.selectedItemChange= function(){
              // some stuff with selectedItem

            // clear input
            $scope.searchText = '';
            $scope.selectedItem= undefined;

        };

 <md-autocomplete
            md-selected-item="selectedItem"
            md-search-text="searchText"
            md-items="item in getMatches(searchText)"
            md-item-text="item.name"
            md-selected-item-change="selectedItemChange()" >

[robertmesserle]

Is this what you are trying to do?

http://codepen.io/robertmesserle/pen/72185ea178757d282e5862fcc22399dd?editors=101

[kschwidder]

yes

[kschwidder]

The difference in my case is that the md-items="item in loadData(md.searchText)" is a $http request.
When I set searchText and selectedItem to null it is showing constantly a loading bar.

[robertmesserle]

Ah, there is already an issue for that: #1798

I'm going to look into a fix for that right now.

[johnSowingo]

http://codepen.io/robertmesserle/pen/72185ea178757d282e5862fcc22399dd?editors=101 is broken

[milad-kh]

do it:
$scope.$$childTail.searchText = '';

[christianpanea]

<md-autocomplete md-selected-item="data.page" md-search-text="data.ac" md-items="item in getFiltered(pages, data.ac)" md-item-text="item.name" md-min-length="0" placeholder="Select a Dashboard"> <span md-highlight-text="data.ac" md-highlight-flags="^ig">{{item.name}}</span> </md-autocomplete> <div class="md-actions" layout="row" layout-align="start center"> <md-button class="md-raised md-primary" ng-click="addReport()" ng-disabled="!data.page">Add Report</md-button> </div>

and my js file for the button here
$scope.addReport = function() { $scope.report.export_items.push({ page: $scope.data.page.id, card: ($scope.data.card || {})._id, export_type: $scope.data.export_type }); $scope.cache[$scope.data.page.id] = $scope.data.page.name; if (($scope.data.card || {})._id) { $scope.cache[$scope.data.card._id] = $scope.data.card.title; } };

Question... how can i make the same button to reset to default the selected option in autocomplete?

[stephengardner]

+1
Wow this needs a fix.

There are thousands of use cases where this is intended.

Ex:
I select a book from the dropdown.
I submit the book.
Success message pops up, thanks for submitting.
Form is cleared.
Continue...

[kikocastro]

+1

This workaround fixed

$scope.selectedOption = undefined;
$scope.searchText = '';
$scope.$$childTail.searchText = '';

but the list with the options keeps opened :(

[enigram]

To clear the text, use the workaround suggested.

However, with default options, the list will remain open since the search field has the focus. To close the list, ensure that the md-min-length is greater than 0. This will require the user to type in something in the box for the list to open.

[dagogo03]

$scope.$$childTail.searchText = '';
$scope.$$childTail.selectedOption = undefined;

This work for me!!! #