5

I want to embed a simple input search box. I tried to use code like in bootstrap, but I can't make it to work. I have no clue how to do it.

I have this bootstrap code: 

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

Reference: How to add a search box

Community
  • 1
  • 1
Maksym Suprunenko
  • 83
  • 1
  • 2
  • 9
  • 1
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [Stack Snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See How to create a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – andreas Aug 15 '16 at 17:03
  • 1
    Welcome to Stack Overflow! I edited the question fixing some grammar, but more importantly: I removed the link to the external site. It might be or not be your intension, but this could be perceived as advertising. Anyway, it is not necessary, as you could provide a tiny example of what you would like to achieve, and show where it is not working as you expect. – trincot Aug 17 '16 at 17:36
  • What do you mean by making it work? Is it not being displayed or are you not being able to display search results? if you meant the latter, it is a whole different issue. – hulkinBrain Aug 17 '16 at 18:00
  • When i placed some input, input covered all menu and replaced all items – Maksym Suprunenko Aug 17 '16 at 18:31

2 Answers2

10

I have found that : https://ampersandacademy.com/tutorials/materialize-css/navbar-with-autocomplete-search-box

You have to add a div element in the li element of your navbar ul list.

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

Or this way:

enter image description here

enter image description here

  <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>
HelloNewWorld
  • 335
  • 3
  • 11