There is a <md-select> control in Angular Material library. It only allows to select option from list. But what if I want to allow to user to write own value in this field? So I want editable md-select that allows to choose value from list or to write own value. Is it possible?

There is a <md-select> control in Angular Material library. It only allows to select option from list. But what if I want to allow to user to write own value in this field? So I want editable md-select that allows to choose value from list or to write own value. Is it possible?

• javascript
• angularjs
• angular-material

• not out of the box with that directive, no. – Diego Vieira Commented Apr 6, 2016 at 11:09

2 Answers 2

Use <md-autoplete> instead. See the demo.

Found at https://github./angular/material/issues/7970, so the credits go to icenold

<style>
    .bocontainer{
        width:200px;
        display:inline;
    }
    .boinput {
        position:relative;
        top:-3px;
        left:-2.75em;
    }
    .boinput div._md-text{
        display:none !important;
    }
    .boinput md-select-value:not([disabled]):focus ._md-select-value{
        border-bottom:none;
    }
    .boinput md-select-value{
        min-width: 0.0em;
        border-bottom:none !important;
    }
</style>

<div class="bocontainer">
    <md-input-container>
        <label>bobox1</label>
        <input type="text" ng-model="chosen"/>
    </md-input-container>
    <md-input-container class="boinput">
        <md-select ng-model="chosen" md-container-class="bomenu">
            <md-option ng-value="'item 1'">item 1</md-option>
            <md-option ng-value="'item 2'">item 2</md-option>
            <md-option ng-value="'item 3'">item 3</md-option>
        </md-select>
    </md-input-container>
</div>
<div class="bocontainer">
    <md-input-container>
        <label>bobox2</label>
        <input type="text" ng-model="chosen2" />
    </md-input-container>
    <md-input-container class="boinput">
        <md-select ng-model="chosen2" md-container-class="bomenu">
            <md-option ng-value="'item 1'">item 1</md-option>
            <md-option ng-value="'item 2'">item 2</md-option>
            <md-option ng-value="'item 3'">item 3</md-option>
        </md-select>
    </md-input-container>
</div>