Javascript 菜单，导航栏上的搜索栏下，在引导中…不兼容

我正在尝试创建一个搜索栏，搜索结果显示在搜索栏的正下方，但在尝试实现此功能时，我遇到了许多问题。我是网络编程新手，这就是为什么我更喜欢使用bootstrap的原因，因为它在不同的屏幕大小上具有兼容性。在这种情况下，我不知道使用哪种方法，我只是在条下创建了“div”，但我不确定它是否正确。如果你给我提建议，我会很高兴的

下面是我使用的css代码。 我给了宽度的硬编码值为174px，而我需要一些自动 标识搜索栏的宽度并将该值设置为最大值。

ID=“searchResults”

是我使用jQuery和Ajax实时获取的字符串

如果你能给我一些关于如何实施的建议，我会很高兴的

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

---

您的尝试正常

.navbar表单navbar left

需要是

位置：相对。
如果这样做，您可以使用此元素定位和调整
#searchResults
的绝对容器的大小

您的HTML无效，这里有一个更干净的版本：

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

这里有一个小演示：
如果你有某个问题，你可以创建一个新问题。如果你想要的信息不太宽泛，无法解释，我同意。好的，首先，我不知道如何避免搜索结果前面出现一个点。第二，我应该使用什么来移动搜索结果，通过按箭头键来突出显示搜索结果，当按下enter键时，页面将被重定向（p.s searchResults是指向其他页面的链接），如果太宽而无法解释，请让我知道，我将创建另一个问题“点”是什么意思？您是否将搜索结果放在
中？然后这将是
列表样式
。关于可搜索列表的另一个问题非常复杂。您可以使用jQuery+Ui来实现这一点。看看这里：是的，我把它放在
标签里
.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;
}