Typeahead.js会干扰引导程序输入组

本文介绍了Typeahead.js会干扰引导程序输入组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我如何让Typeahead.js将我的Twitter Bootstrap 3输入组分开？每当我将Typeahead javascript指向输入组的一部分的文本区域时，加入的文本区域和提交按钮就会停止加入。这是什么只是在Typeahead中的错误，或者有没有解决这个问题？

How do I keep Typeahead.js from splitting up my Twitter Bootstrap 3 input groups? Whenever I point the Typeahead javascript at a text area that's part of an input group, the joined text area and submit button stop being joined. Is this something that's just a bug in Typeahead, or is there a workaround for this?

没有加载Typeahead.JS：

Without loading Typeahead.JS:

Typeahead.JS：

With Typeahead.JS:

我的原始HTML：

My original HTML:

<div class="col-sm-4 hidden-xs"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" id="tags" class="form-control" name="q"> <div class="input-group-btn"> <button class="btn btn-default" type="submit">Search</button> </div> </div> </form> </div>

这是Typeahead对此HTML的作用：

This is what Typeahead does to this HTML:

<div class="col-sm-4 hidden-xs"> <form class="navbar-form" role="search"> <div class="input-group"> <span class="twitter-typeahead" style="position: relative; display: inline-block;"> <input type="text" class="form-control tt-hint" disabled="" autocomplete="off" spellcheck="false" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; background-position: 0% 0%; background-repeat: repeat repeat;"> <input type="text" id="tags" class="form-control tt-input" name="q" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"> <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"> </pre> <span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset-0"></div> </span> </span> <div class="input-group-btn"> <button class="btn btn-default" type="submit">Search</button> </div> </div> </form> </div>

推荐答案

这个项目部分解决了我的问题： github/hyspace/typeahead.js-bootstrap3.less p>

唯一突出的问题是，当我将阴影效果应用于.btn和.form控件时，也会在输入字段和按钮之间绘制阴影。

The only outstanding problem is when I apply shadow effect to both the .btn and .form-control the shadow is drawn also between the input field and the button.