Javascript 带TwitterTypeahead字段的引导按钮

我有一张表格。用Bootstrap3构建。在这个表单上，我有twitter的typeahead字段

我需要能够在typeahead字段中嵌套一个按钮，这是bootstrap的标准设置

表单加载时，按钮是字段的一部分。输入字段时，按钮向下移动约4像素

表单该部分的HTML为：

            <div class="form-group"> 
                <div  class="input-group" id="partTypeahead">  
                    <label for="Part Number">Part Number</label>
                    <input type="text" class="form-control input-sm typeahead" id="partNumber" placeholder="4+  Characters then Press Search" data-toggle="tooltip" data-placement="top" title="Enter At Least 4 Characters And Then Press Search Button">
                    <span class="input-group-btn">
                        <button class="btn btn-default btn-xs moveDown" type="button" id="showPart" data-toggle="tooltip" data-placement="right" title="Go to Part"><span class="glyphicon glyphicon-open"></span></button>
                    </span>
                </div>  
            </div>

零件号

---

我甚至尝试添加一个方法，在输入字段时修改按钮的css，但它忽略了类似的内容

不确定这是否正是您想要的解决方案，请查看以下内容：

HTML：

<div class="form-group"> 
                <label for="Part Number">Part Number</label>
                <div class="input-group" id="partTypeahead">
                <input type="text" class="form-control input-sm typeahead" id="partNumber" placeholder="4+  Characters then Press Search" data-toggle="tooltip" data-placement="top" title="Enter At Least 4 Characters And Then Press Search Button">
                <span class="input-group-btn">
                <button class="btn btn-default btn-xs moveDown" type="button" id="showPart" data-toggle="tooltip" data-placement="right" title="Go to Part"><span class="glyphicon glyphicon-open"></span></button>
                </span>
</div> 

---

查看。

不确定这是否是您正在寻找的确切解决方案，请查看以下内容：

HTML：

<div class="form-group"> 
                <label for="Part Number">Part Number</label>
                <div class="input-group" id="partTypeahead">
                <input type="text" class="form-control input-sm typeahead" id="partNumber" placeholder="4+  Characters then Press Search" data-toggle="tooltip" data-placement="top" title="Enter At Least 4 Characters And Then Press Search Button">
                <span class="input-group-btn">
                <button class="btn btn-default btn-xs moveDown" type="button" id="showPart" data-toggle="tooltip" data-placement="right" title="Go to Part"><span class="glyphicon glyphicon-open"></span></button>
                </span>
</div> 

---

查看。

标签不属于输入组；此外，您的输入类是

sm

，按钮类是

xs

。这些不同的尺寸可能会让你感觉不舒服。@Kramb很好地抓住了这些，不幸的是它没有解决这个问题。但是我很欣赏关于正确结构和按钮大小的提示。你能把相关的代码放在一个代码片段（或小提琴）中吗？a总是使故障排除更快。THX标签不属于输入组；此外，您的输入类是

sm

，按钮类是

xs

。这些不同的尺寸可能会让你感觉不舒服。@Kramb很好地抓住了这些，不幸的是它没有解决这个问题。但是我很欣赏关于正确结构和按钮大小的提示。你能把相关的代码放在一个代码片段（或小提琴）中吗？a总是使故障排除更快。thxIt似乎可以做到这一点，让我充满希望，因为两者的最小高度都是我还没有尝试过的。但是没有骰子。按钮仍在移动。有趣的是，typeahead的下拉菜单在菜单顶部和字段本身之间有一个小间隙。按钮向下移动，使按钮的底部与菜单的顶部对齐。这似乎可以做到，让我充满希望，因为两个按钮的最小高度都是我还没有尝试过的。但是没有骰子。按钮仍在移动。有趣的是，typeahead的下拉菜单在菜单顶部和字段本身之间有一个小间隙。按钮向下移动，使按钮的底部与菜单的顶部对齐。