菜单，在Bootstrap导航栏上的搜索栏下...不兼容

Question

I am trying to create a search bar with results that appear right under the bar, but I am faced with a number of problems while trying to implement this. I am new in web programming, which is why I prefer to use bootstrap because of its compatibility on different screen sizes. In this case, I don't know which method to use and I simply created "div" under the bar, but I am not sure if it is the correct way. Would be happy if you gave me suggestion.

Below I included the code with css that I used. I gave hard-coded value for the width as 174px, while I need something that automatically identifies the width of search bar and sets that value as maximum. ID="searchResults" is the string that I get in real time using jQuery and Ajax.

Would be happy if you give me advice about the way how to implement this.

 <div class="navbar-form navbar-left">
       <input class="form-control" placeholder="Search..." type="text"
       autocomplete = off  id = "autocomplete_search">
      <div  id="searchResults" 
            style="position: absolute;
                width: 174px;
                background: white;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                max-height: 200px;
                overflow-y: auto;
                margin-top: -3px;"> </div>
 </div>

Answer 1

your attemp is ok. .navbar-form navbar-left needs to be position: relative; . If you do that, you can use this element to position and size the absolute container of #searchResults .

Your HTML is not valid, here is a more clean version:

<div class="navbar-form navbar-left">
    <input class="form-control" placeholder="Search..." type="text" autocomplete="off"  id="autocomplete_search" />
    <div id="searchResults">So much results...</div>
 </div>

Here is some CSS to put the html in shape:

.navbar-form
{
    position: relative;

    /* just a little demo */
    margin-left:200px;
}

.form-control
{
    width: 100%;
}

#searchResults
{
    position: absolute;
    width: auto; 
    background: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    max-height: 200px;
    overflow-y: auto;

    border: 1px solid gray;

    /*This is relative to the navbar now*/
    left: 0;
    right: 0;
    top: 20px;
}

And here is a little demo: http://jsfiddle.net/NicoO/ZAyN9/