Components: [feature]:add search mode to <md-input> tag

[wujun4code]

Code

<md-input mode="search" placeholder="搜索..." [(ngModel)]="searchText"></md-input>

UI

Without focus

With focus

Online Demo

https://material.google.com/search.html?q=input

Thanks.

[fxck]

I don't think that's a part of the spec, you could easily build your own component built on material2 and release it though.

[wujun4code]

@fxck Thanks for comments.
I think this repo can release as the best practice for Material Design built with angular2 , the md-input tag can be extended with more attributes, such as mode,icon.

Maybe you know Ionic2? it provide a search bar named ion-searchbar,the online demo.

so I think this repo can attract more web developers with powerful built-in attributes.

em, maybe there will be another way to implement this feature.

Thanks a lot for your works. This repo help me a lot.

[fxck]

As far as I know, this repo is primarily supposed to be an implementation of the official material spec. As well as a building ground for your own components, thanks to utility modules like Overlay, or Portal and virtual scroll later(and I can see those being moved to their own repo/s in the future). There might be some components that are not in the spec(wysiwyg?), but that's faaaar future.

So what I'm saying is, if you need a relatively simple component that can be put together from existing material2 components, better do it yourself and release it to the community. I'm sure a curated list of high quality non-spec components can be put together later and linked thru this repo.

[jelbourn]

This isn't something we think falls directly into the scope of md-input, which we're trying to keep mostly general. You should be able to implement this on top of md-input using the md-suffix feature.

[wujun4code]

Thanks.

[shlomiassaf]

@wujun4code
Here a simple component to encapsulate some logic around a search:

import { Component, Input, ViewEncapsulation } from '@angular/core';
import { MdInput } from '@angular/material';

@Component({
  selector: 'search-md-input-button',
  host: {
    '[class.search-md-input-button-empty]': '!input.value'
  },
  templateUrl: '<i class="search-md-input-button fa fa-search"></i>,
  styleUrls: [
    ' // DO stuff with search-md-input-button & search-md-input-button-empty'
  ],
  encapsulation: ViewEncapsulation.None
})
export class SearchMdInputButtonComponent {
  @Input() input: MdInput;

}

You can change UI state, act upon input changes etc... add remove logic as you need.

In your app, you can use a template to set it:

      <md-input placeholder="Search" #input>
        <span md-suffix>
          <search-md-input-button [input]="input" (click)="input.value && doSomething(input.value)"></search-md-input-button>
        </span>
      </md-input>

In this example doSomething fires if there is text...

You can do X buttons and others...

[jdddog]

It appears that a search box is in the spec, see these links:

• Solo fields: https://material.io/guidelines/components/text-fields.html#text-fields-field-variations
• Patterns search: https://material.io/guidelines/patterns/search.html#

[thw0rted]

In case anybody else needs it, I made a pretty good approximation of a "solo field" by putting a borderless <input> inside an md-card and reducing the card's padding. It gives you the elevation and corner rounding without having to specify them manually.

[willshowell]

Here's another example of the solo field

https://stackblitz.com/edit/angular-material-google-search

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}