Typeahead.js 干扰 Bootstrap 输入组

2024-05-09

如何防止 Typeahead.js 拆分我的 Twitter Bootstrap 3 输入组?每当我将 Typeahead javascript 指向属于输入组一部分的文本区域时,连接的文本区域和提交按钮就会停止连接。这只是 Typeahead 中的一个错误,还是有解决方法?

不加载 Typeahead.JS:

使用 Typeahead.JS:

我的原始 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 所做的操作:

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



.twitter-typeahead{ float:left; width:100%}
  
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Typeahead.js 干扰 Bootstrap 输入组 的相关文章

  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • HTML2canvas 和 Canvas2image,下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • 如何在 Angular 中从父组件访问子组件?

    I have mat paginator在子组件a中 如下所示 子组件 html
  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • 如何使JavaScript函数在Eclipse“大纲视图”中可见?

    我有这样的代码 但如果它在匿名函数中定义 则无法打开函数大纲 类没有问题 我该如何概述something2 请分享一些提示 我可以将所有函数标记为构造函数 但这是无效的方法 start of track event required deb
  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试
  • 单击关闭按钮后不显示 Google 一键登录 UI

    我正在尝试按照本指南使新的谷歌一键登录工作 https developers google com identity one tap web https developers google com identity one tap web
  • Chartjs刻度标签位置

    尝试让 Y 轴刻度标签看起来像image https i stack imgur com XgoxX png 位于秤顶部且不旋转 缩放选项当前如下所示 scales yAxes id temp scaleLabel display true
  • 类型“typeof import("/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")”上不存在属性“auth”。 TS(2339)

    我是 FireBase 的初学者 我正在尝试使用 Angular 通过 FireBase 实现 Google 登录 我在 auth 时收到上述错误 我特此附上login component ts和package json package l
  • 为范围旋钮 ionic-range 添加边框颜色

    我正在使用离子范围添加范围滑块 并想向范围旋钮添加边框 由于它的 ionic4 和范围旋钮是 Shadow dom 的一部分 我无法使用范围旋钮的 border 属性直接更改边框 我已附上我想要实现的图像 范围旋钮周围有白色边框 现有属性只
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012
  • 如何在打字稿文件中导入没有定义文件的js库

    随着我们的项目变得越来越大 我想从 JavaScript 切换到 TypeScript 以帮助进行代码管理 然而 我们使用许多库作为 amd 模块 我们不想将其转换为 TypeScript 我们仍然想将它们导入 TypeScript 文件
  • KeyboardAvoidingView - 隐藏键盘时重置高度

    我正在使用 React NativeKeyboardAvoidingView设置我的高度View当显示键盘时 但是当我关闭应用程序中的键盘时 视图的高度不会变回原来的值
  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4
  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d

随机推荐

  • PHP 中 while (true){ 是什么意思?

    我看过这段代码 但不知道这意味着什么 while true echo Hello world 我知道什么是 while 循环 但是 while true 是什么意思 会执行多少次 这不是无限循环吗 虽然是无限循环 但您可以使用以下命令退出它
  • 在 Clojurescript 中查找不匹配的分隔符

    有时我会发现自己遇到大括号 圆括号或方括号不匹配的情况 在 Clojurescript 中 我在用leininingen and cljsbuild我很难追踪到错误源 通常它可以归结为这样 Compiling resources publi
  • 如何在 Api-Platform 中按链接属性过滤结果?

    我有一个User实体和一个Organisation实体 存在关系ManyToOne之间Booking and User ORM ManyToOne targetEntity App Entity User inversedBy bookin
  • 尝试使用curl进行GET,发送的值允许为空

    我正在尝试使用curl 来执行一个简单的GET 其中包含一个名为redirect uri 的参数 被调用的 php 文件打印出 GET redirect uri 的空字符串 它显示 red 并且似乎没有发送任何内容 执行获取操作的代码 Ge
  • 是否有 CSS 选择器可以选择文本溢出的元素?

    是否可以编写一个 css 选择器 仅选择已调用文本溢出行为的元素 div style width 200px I don t want to select this div div style width 200px But I do wa
  • 特征密集稀疏矩阵乘积是线程化的吗?

    我知道稀疏密集产品是根据文档进行线程化的 https eigen tuxfamily org dox TopicMultiThreading html https eigen tuxfamily org dox TopicMultiThre
  • 从 Xamarin Forms 的输入控件中删除下划线

    我是 Xamarin Forms 的新手 正在开发登录表单并使用 Material Design IVisual 我创建了一个自定义 Entry 类并继承它MaterialEntryRenderer来定制它 我想要实现的目标是删除下划线En
  • 获取键盘事件中的鼠标位置

    我试图在用户按住 Shift 键时出现选择轮 滚轮应以鼠标位置为中心 然而当我测试这个时 pageX and clientX两者在事件对象上都未定义 是否可以通过键盘事件获取鼠标坐标 不 只需跟踪mousemove事件并持续保存当前位置 以
  • 为什么 Visual Studio 不移动发布中的某些文件?

    当我尝试发布项目时 Visual Studio 不会将某些文件移动到目标发布文件夹 目前我有这个问题 json文件 我正在使用 Visual Studio 2010 和 MVC4 是否有关于应发布哪些文件或 mime 类型并将其移动到目标文
  • 列出 Docker 容器的卷

    如何列出 Docker 容器的所有卷 我知道它应该很容易获得 但我找不到如何获得 另外 是否可以获取已删除容器的卷并将其删除 您可以使用 docker ps 获取容器 id 并写入 docker检查container id 像这儿 Volu
  • 当IRQL下降时,Windows中如何触发软件中断?

    我知道对于硬件中断 当 KeAcquireInterruptSpinLock 调用 KeLowerIrql 时 HAL 会调整 LAPIC 中的中断掩码 这将允许自动服务排队的中断 可能在 IRR 中 但是对于软件中断 例如 ntdll d
  • 在 VSCode 的集成终端中运行任务?

    当我过去运行任务 tasks json 时 它们在 VSCode 的集成终端内运行 但是 在重置我的开发计算机并重新安装所有内容后 我的任务现在在新的 cmd 窗口中运行 当任务因错误而失败时 就会出现问题 在这种情况下 cmd 窗口刚刚关
  • Google BigQuery 另存为表

    我用 Google BigQuery 运行了这个查询 SELECT repo id count as count FROM TABLE DATE RANGE githubarchive day events TIMESTAMP 2015 0
  • R Shiny - 修复了 Shiny 仪表板中的侧边栏和主标题

    我有一个简化的闪亮仪表板 请参阅下面的代码 我想修复侧边栏和主标题 因此 在其他帖子的帮助下 我编写了一个 CSS 文件来解决该问题 sidebar color FFF position fixed width 220px white sp
  • 使用 PHP 将子项添加到 XML 文件

    添加子项时 抛出此错误 无法添加孩子 父级不是 XML 树的永久成员 我无法解决这个问题 这是我的代码 if visited FIRST xml new SimpleXMLElement
  • 在tensorflow .ckpt文件中使用预训练模型

    我有一个 ckpt 文件 我只想得到 cnn 的权重 我已经从 ckpt 检查点文件中进行了训练 inception resnet v2 2016 08 30 import tensorflow as tf saver tf train S
  • 日期时间的自定义 JavaScriptConverter?

    我有一个对象 它有一个 DateTime 属性 我想通过 AJAX JSON 将该对象从 ashx 处理程序传递回网页 我不想使用第 3 方控件 当我这样做时 new JavaScriptSerializer Serialize DateT
  • 在简单注入器中注册具有多个构造函数和字符串依赖项的类型

    我正在尝试弄清楚如何使用 Simple Injector 我在项目中使用了它 注册简单服务及其组件没有任何问题 但是 当组件具有两个以上实现接口的构造函数时 我想使用依赖注入器 public DAL IDAL private Logger
  • Firefox OS 后台服务

    我想构建一个应用程序 用户可以通过它输入一些设置 并且应用程序将启动后台服务来根据这些设置执行一些任务 我只想在模拟器中运行应用程序和后台服务 我知道它需要 认证 模式才能运行后台服务 但我现在不考虑在 Firefox Marketplac
  • Typeahead.js 干扰 Bootstrap 输入组

    如何防止 Typeahead js 拆分我的 Twitter Bootstrap 3 输入组 每当我将 Typeahead javascript 指向属于输入组一部分的文本区域时 连接的文本区域和提交按钮就会停止连接 这只是 Typeahe