如何使用物化 css 将带有图标的搜索框添加到导航栏？答案

【问题标题】：How to add a search box with icon to the navbar using materialize css?如何使用物化 css 将带有图标的搜索框添加到导航栏？
【发布时间】：2016-12-21 22:07:52
【问题描述】：

我想嵌入一个简单的输入搜索框。我尝试使用引导程序中的代码，但无法使其正常工作。我不知道该怎么做。

我有这个引导代码：

<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>

参考：How to add a search box

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。请参阅如何创建 Minimal, Complete, and Verifiable example。
欢迎来到 Stack Overflow！我编辑了修复一些语法的问题，但更重要的是：我删除了指向外部站点的链接。这可能是也可能不是您的意图，但这可能被视为广告。无论如何，这不是必需的，因为您可以提供一个小例子来说明您想要实现的目标，并说明它在哪里没有按您的预期工作。
让它工作是什么意思？是没有显示还是无法显示搜索结果？如果你的意思是后者，那就是完全不同的问题了。
当我放置一些输入时，输入覆盖了所有菜单并替换了所有项目

标签： html css materialize

【解决方案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>

【讨论】：

【解决方案2】：

或者这样：

  <nav class="blue">
    <div class="nav-wrapper">
      <a href="#" class="brand-logo"><i class="material-icons">cloud</i>Logon</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li>
          <form>
            <div class="input-field">
              <input id="search" type="search" required>
              <label class="label-icon" for="search"><i class="material-icons">search</i></label>
              <i class="material-icons">close</i>
            </div>
          </form>
        </li>
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

【讨论】：