如何使用materialize css将带图标的搜索框添加到导航栏？

Question

我想嵌入一个简单的输入搜索框.我尝试使用像bootstrap中的代码,但我无法使其工作.我不知道怎么做.

我有这个引导代码:

<div class="col-sm-3 col-md-3 pull-right">
    <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search"
                                                    name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
            </div>
        </div>
    </form>
</div>

参考:如何添加搜索框

Answer 1

我发现:https://ampersandacademy.com/tutorials/materialize-css/navbar-with-autocomplete-search-box

您必须在导航栏ul列表的li元素中添加div元素.

<nav class="white">
        <div class="nav-wrapper">
          <a href="#" class="brand-logo red-text">Logo</a>   
            <ul class="hide-on-med-and-down right">               
                <li>    
                   <div class="center row">
                      <div class="col s12 " >
                        <div class="row" id="topbarsearch">
                          <div class="input-field col s6 s12 red-text">
                            <i class="red-text material-icons prefix">search</i>
                            <input type="text" placeholder="search" id="autocomplete-input" class="autocomplete red-text" >
                            </div>
                          </div>
                        </div>
                      </div>          
                  </li>                     
                <li><a href="sass.html" class="red-text">Sass</a></li>
                <li><a href="badges.html" class="red-text">Components</a></li>
                <li><a href="collapsible.html" class="red-text">JavaScript</a></li>
            </ul>
        </div>
      </nav>