Angular 2材料自动完成不起作用

Question

我正在尝试使用material中的自动填充组件，这是我的

HTML

input[type=text] {
display:block;
margin: 0 0 0 auto;
width: 250px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('/searchicon.png');
background-position: 10px 10px; 
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;

}

input[type=text]:focus {
width: 90%;
}
input[type=text]:focus + .but{
  display: block;
}

.but{
  cursor:pointer;
  width: 100px; 
  height: 50px;
  position: absolute;
  right:5px;
  top:5px;
  display:none;
}

xyz.component.ts

<form>
                <input type="text" name="search" placeholder="Search.."><input class="but" type="button" value = "search">
            </form>

我无法看到任何自动填充功能。我的代码没有错误。我在控制台没有错误，终端没有错误，但当我刷新页面时，我什么都没看到。该页面未加载给我。只是一个空白页面。我不知道该怎么弄清楚。我已经看到以前它正在开发中，但现在因为它们已经在网站上将其作为组件提供，我相信它应该可以工作。我需要知道我是否遗漏了什么。