首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法选择且删除的项目不会返回到typeahead -bootstrap中的列表

在使用Bootstrap的Typeahead组件时,如果遇到无法选择且删除的项目不会返回到列表中的问题,通常是由于以下几个原因造成的:

基础概念

Typeahead组件是一种自动完成(Autocomplete)功能,它允许用户在输入框中键入时显示匹配的项目列表。用户可以从列表中选择一个项目,该项目随后会被填充到输入框中。

可能的原因

  1. 数据绑定问题:Typeahead可能没有正确地与数据源绑定,导致选择的项目没有被更新。
  2. 事件处理问题:可能缺少必要的事件监听器来处理选择和删除操作。
  3. 缓存机制:Typeahead可能有内部缓存,如果缓存没有正确更新,可能会导致已删除的项目仍然显示。

解决方案

以下是一些可能的解决方案,包括示例代码:

1. 确保数据源正确更新

确保当你选择一个项目时,数据源也相应地更新。例如,如果你使用的是JavaScript数组作为数据源:

代码语言:txt
复制
let selectedItems = [];
let allItems = ['Apple', 'Banana', 'Cherry'];

$('#typeahead').typeahead({
  source: allItems,
  updater: function(item) {
    selectedItems.push(item);
    allItems = allItems.filter(i => i !== item); // 更新数据源
    return item;
  }
});

2. 添加删除功能

如果你需要允许用户删除已选择的项目,并且希望这些项目能够返回到Typeahead列表中,你可以添加一个删除按钮,并在点击时更新数据源:

代码语言:txt
复制
<input id="typeahead" type="text">
<div id="selected-items"></div>

<script>
let selectedItems = [];
let allItems = ['Apple', 'Banana', 'Cherry'];

$('#typeahead').typeahead({
  source: allItems,
  updater: function(item) {
    selectedItems.push(item);
    updateSelectedItemsDisplay();
    allItems = allItems.filter(i => i !== item);
    return item;
  }
});

function updateSelectedItemsDisplay() {
  $('#selected-items').empty();
  selectedItems.forEach(item => {
    let btn = $('<button>').text(item).click(() => {
      selectedItems = selectedItems.filter(i => i !== item);
      allItems.push(item); // 将项目重新添加到数据源
      updateSelectedItemsDisplay();
      $('#typeahead').val('').trigger('input'); // 清空输入框并触发Typeahead更新
    });
    $('#selected-items').append(btn);
  });
}
</script>

3. 清除缓存

如果你怀疑是缓存问题,可以尝试在每次更新数据源后手动清除Typeahead的缓存:

代码语言:txt
复制
$('#typeahead').data('ttView').clearCache();

应用场景

Typeahead组件广泛应用于需要快速搜索和选择项目的场景,如搜索框、下拉菜单、表单输入等。

优势

  • 提高用户体验,减少输入时间。
  • 减少输入错误,提供即时反馈。
  • 可以处理大量数据集,通过异步加载提高性能。

通过上述方法,你应该能够解决Typeahead组件中无法选择且删除的项目不会返回到列表中的问题。如果问题仍然存在,可能需要进一步检查Typeahead的具体实现细节或查看是否有相关的bug报告。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

bootstrap 自动补全插件Bootstrap Typeahead 组件

使用 Bootstrap Typeahead 组件 Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便。...,使用 updater 函数,在选择了某个匹配项之后,做出一些后继的处理。...然后,typeahead 组件就会调用 matcher 函数来检查用户的输入是否与某个项目匹配,你可以使用产品的 id 在产品列表中获取产品对象,然后检查产品的名称与用户的输入是否匹配。...在下一步的 highlighter 中,我们使用 Underscore 组件中的 find 方法,通过产品的 id 在产品列表中获取产品对象,然后,显示产品名称和价格的组合。...id 在产品列表中获取产品对象,然后 最后,updater 函数返回一个产品名称的字符串,为输入框提供内容。

3K20
  • RequireJS极简入门教程RequireJS核心功能:HOW TOmain.js使用 shim

    随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。...HOW TO 在HTML中,添加这样的 标签: <!...main.js 在main.js 中通常做两件事: 配置requirejs 比如项目中用到哪些模块,文件路径是什么 载入程序主模块 /** * 真正的入口文件main.js。...hello ,是我们在 hello.js 中定义的 hello 函数。...如果我们选择了把它 export 给requirejs,那当我们的代码依赖于 hello 模块的时候,就可以拿到这个 hello 函数的引用了。

    1.6K30

    系统设计:实时建议服务

    当用户输入搜索框时,它会根据用户输入的字符尝试预测查询,并给出完成查询的建议列表。提前输入建议有助于用户更好地表达其搜索查询。这不是关于加快搜索过程,而是关于指导用户并帮助他们构建搜索查询。...因为我们在每个节点中存储前10个查询,所以这个特定的搜索词可能会跳到其他几个节点的前10个查询中。因此,我们需要更新这些节点的前10个查询。我们必须从节点返回到根。...如果是这样,我们将插入此新术语,并删除频率最低的术语。 如何从trie中删除一个术语? 比如说,由于一些法律问题或仇恨或盗版等原因,我们必须从trie中删除一个术语。...当定期更新发生时,我们可以从trie中完全删除此类术语,同时,我们可以在每个服务器上添加一个过滤层,在将其发送给用户之前删除任何此类术语。 对于建议,有哪些不同的排名标准?...这种方法的主要问题是,它可能导致服务器不平衡,例如,如果我们决定将所有以字母“E”开头的术语放在一个DB分区中,但后来我们意识到,我们有太多以字母“E”开头的术语,无法放在一个DB分区中。

    4.1K320

    网站搭建-django-学习成绩管理-09-查询成绩之前端实现

    Windows-x86_64 编辑器:pycharm-community-2016.3.2 Django:2.1.4 Python:3.6.0 本系列介绍如何搭建一个网站,后端使用django框架 今天开始介绍一个单独的项目...app,关于学生成绩管理的网站的搭建 主要功能包括: 学习成绩查询,数据统计分析 涉及前端模块: Datatables、ECharts、JQuery Part 1:目标 提前在数据库中录入一部分成绩信息...,本文目标,选择特定条件查询 数据库 ?...Part 2:代码逻辑 前端 获取页面中输入的条件信息(JQuery) 将前端信息传入后端(Ajax) 后端查询的结果传入前端,显示出表格(Datatables) 后端 获取前端传递的信息(json.loads...bootstrap/js/bootstrap3-typeahead.js'%}" type="text/javascript">

    1.8K30

    「jQuery」基础 - 03

    缺点: 普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。 语法 register 演示代码 <!...案例:发布微博案例 点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。 点击的删除按钮,可以删除当前的微博留言。 中的li是JS动态创建的,在页面加载时Docoment中并没有此元素,选择器并不能选取。...jQuery 多库共存 实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现...1.4.4. bootstrap组件 Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架,他依靠jQuery实现,且支持响应式

    2.8K30

    那些前端常用的网站插件

    这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。 这个列表包含许多种类的资源,所以这里我将它们分组整理。...Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js...Typeahead.js — 搜索补全 Dragdealer.js — 炫酷拖拽 Bounce.js — 创建炫酷的 CSS3 动画 Pagepiling.js — 全屏滚动 Multiscroll.js...Hybrid 选择框 Nice select — 创建漂亮的选择框的 jQuery 库 Tether — 使用固定定位来创建相关元素 Shepherd.js — 为应用创建新手引导 Tooltip — ... — 框架 Foundation — 框架 有用的产品/链接 cheatsheet — 可以写在中的所有标签 Ghost — 基于 Node.js 的博客平台 What runs — 一个用于网站技术分析的

    4.5K50

    网站搭建-django-学习成绩管理-05-成绩查询之检索条件

    本次实现成绩查询界面的条件查询部分,效果如下图,实现了每个选项的下拉列表显示 网址如下:http://127.0.0.1:8000/sg/gradesinput/ 项目在Pycharm中启动:python...manage.py runserver 注意在局域网中启动项目,并希望局域网中其它用户可以访问时,启动方式更改如下python manage.py runserver 0.0.0.0:8000,端口号可以根据需要人工设定...以上代码就是返回一个网址,并传递了一些初始化参数,这些参数是从数据库中获取的 以上代码涉及到Django中几点知识 get/post请求 数据库ORM操作 Django的模板语法 Part 5:代码实现...> bootstrap/js/bootstrap3-typeahead.js'%}" type="text/javascript">中的下拉菜单 ?

    1.2K20

    常见分布式应用系统设计图解(四):输入建议系统

    输入建议系统,指的就是 “typeahead”,比如 Google 搜索,输入一个单词的前几个字母,后面最常用的几个搜索词会被联想出来。有时,它也需要具备一定程度的字符拼写错误自动更正能力。...这个功能可以说不是搜索系统的核心功能,而且要求响应一定要非常迅速,考虑到无法避免的网络延迟,我们希望服务端的处理越快越好。响应数据不用非常准确,但是延迟响应肯定是一个糟糕的结果。...所以我们希望服务端的处理的数据尽量都在内存中,几乎不需要怎么读取磁盘,整个过程也要保持简洁。...用户侧的浏览器方面,有这么几件事情比较重要:缓存之前的提示数据; 数据不一定只从服务端返回,浏览器也有本地的历史查询记录(比如 Cookie),提示列表可以是二者的并集; 用户打开页面或者选中焦点框就要开始建立连接...为了尽量减少延迟,又考虑到一致性要求不高,CDN 是一个很好的选择。新生成的 Trie 树被推送到离用户较近的节点去。 再来看服务端,大致分为三个步骤。

    43120

    Bootstrap运用终极指南

    编译版本可以在任何项目中直接使用,里面包含已编译的CSS和JavaScript,以及各自的编译和压缩版本。它还包含了数百个Glyphicon字体图标,以及Boostrap主题可供你自由选择。...还有一个Saas版本,它是Bootstrap从Less移植到Sass的源码移植项目。如果你想快速地在Rails、Compass或仅支持Sass的项目中使用Bootstrap,那么这个版本是不二之选。...只需要在CSS中省略viewport元标记,覆盖每个网格层容器的宽度,删除导航栏上所有折叠和展开行为,并在使用网格布局时对它们进行一些调整就可以了。关于操作详情,你可以阅读入门文档中的说明。...Typeahead.js 是一个来自Twitter的JavaScript库,用于构建typeaheads。 31. X-editable 插件支持在Bootstrap中的页面上创建可编辑元素。...如果你仍不确定使用什么框架进行开发,不妨花点时间研究一下与其它框架相比Bootstrap可以做什么 (或者说你觉得用它做什么比较顺手),然后选择最适合项目需求的框架。

    4.2K11

    前端成神之路-03_jQuery

    缺点: 普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。 语法 ?...案例:发布微博案例 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。 2.点击的删除按钮,可以删除当前的微博留言。 ​ 代码实现略。...很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现,这种情况被称为,jQuery 多库共存...1.4.4. bootstrap组件 ​ Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架,他依靠jQuery实现,且支持响应式...// 2.核心原理:先获取本地存储数据,删除对应的数据,保存给本地存储,重新渲染列表li // 3.我们可以给链接自定义属性记录当前的索引号 // 4.根据这个索引号删除相关的数据----数组的splice

    3K20

    使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理

    BlogController类,并添加以下方法(当然也可以写在MainController中,在较大型的项目开发中,最好对各类的操作进行一个区分,以增强代码的可读性): package com.gaussic.controller...">       讲解:         (1)首先在作者一栏使用了选择框,通过select来选择该博文的作者,注意到select标签的id和name...(2)Content处使用了textarea标签,关于文中的一些标签的用法可以参照Bootstrap中文官网(没有Bootstrap实在不会写前端。。)...(3)发布日期的选取,采用了最简单的H5 date控件,有兴趣做成选择框的话,可以引入Bootstrap Datetimepicker,这是一个比较好的组件,但不是本文的重点,在此使用最简单的。...我维护过PHP的项目,开发过Django的项目,SpringMVC的项目也做了不少,甚至乎用Node.js搭建博客等都有一定的涉猎,这些项目无论哪一个都离不开前端知识的支持。

    75910

    Github使用教程图文详解

    参与开源项目 如何去参与一个开源项目,比如人气极高的bootstrap,这是一个非常强大的CSS框架,我们在整个网站中搜索bootstrap,然后进入仓库主页。 ?...如何合并代码 我们知道,git拥有极其强大的克隆和分支功能,在团队协作中,你自己作为团队项目的主干,其它成员就各自有一条分支,每个人都在自己的分支上工作,互不影响,这样能最高效地开发项目。...当每个人的项目功能都完成后,就是合并代码的时候了,所有人的代码都合并完成并没有发生错误,整个项目就完成了。那么,在Github中,该如何合并代码呢?...我们回到仓库主页,发现user2的文件成功进来了。 ?...如何删除仓库 最后一点,如何删除创建的仓库? ? 点击Settings进入设置页面。 将网页拉到底部,选择Delete this repository。 ?

    6.2K21

    我们放弃了Nacos作为配置中心,转而选择了这款神器~

    在登录后创建项目时,选择部门默认只能选择 Apollo 自带的 测试部门1与测试部门2两个选项。...2.3、创建一个项目 修改完数据库部门信息后,重新登录 Apollo Portal,然后创建项目,这时候选择部门可以看到已经变成我们自己修改后的部门信息了,选择我们自定义部门,然后设置应用 ID 为 apollo-test...上面我们配置了本地缓存配置文件存放地址为 "/opt/data/" ,接下来进入缓存目录,找到对应的缓存配置文件,删除缓存配置文件后,重启应用,再次输入地址查看: test的值为:默认值 删除缓存配置文件后...4.5、测试当 Apollo 中将参数删除后客户端的变化 这里我们进入 Apollo 配置中心,删除之前创建的 test 参数,然后发布。...5.1、不同环境下的配置 (1)、Apollo 配置中心 PRO 环境添加参数 打开 Apollo 配置中心,环境列表点击 PRO 环境,然后新增一条配置,和之前例子中参数保持一致,都为 test 参数

    69310

    (很全面)SpringBoot 集成 Apollo 配置中心

    在登录后创建项目时,选择部门默认只能选择 Apollo 自带的 测试部门1与测试部门2两个选项。...3、创建一个项目 修改完数据库部门信息后,重新登录 Apollo Portal,然后创建项目,这时候选择部门可以看到已经变成我们自己修改后的部门信息了,选择我们自定义部门,然后设置应用 ID 为 apollo-test...上面我们配置了本地缓存配置文件存放地址为 “/opt/data/” ,接下来进入缓存目录,找到对应的缓存配置文件,删除缓存配置文件后,重启应用,再次输入地址查看: test的值为:默认值 删除缓存配置文件后...5、测试当 Apollo 中将参数删除后客户端的变化 这里我们进入 Apollo 配置中心,删除之前创建的 test 参数,然后发布。...1、不同环境下的配置 (1)、Apollo 配置中心 PRO 环境添加参数 打开 Apollo 配置中心,环境列表点击 PRO 环境,然后新增一条配置,和之前例子中参数保持一致,都为 test 参数,创建完成后发布

    17.7K53

    Apollo,真香!

    在登录后创建项目时,选择部门默认只能选择 Apollo 自带的 测试部门1与测试部门2两个选项。...3、创建一个项目 修改完数据库部门信息后,重新登录 Apollo Portal,然后创建项目,这时候选择部门可以看到已经变成我们自己修改后的部门信息了,选择我们自定义部门,然后设置应用 ID 为 apollo-test...上面我们配置了本地缓存配置文件存放地址为 "/opt/data/" ,接下来进入缓存目录,找到对应的缓存配置文件,删除缓存配置文件后,重启应用,再次输入地址查看: test的值为:默认值 删除缓存配置文件后...5、测试当 Apollo 中将参数删除后客户端的变化 这里我们进入 Apollo 配置中心,删除之前创建的 test 参数,然后发布。...1、不同环境下的配置 (1)、Apollo 配置中心 PRO 环境添加参数 打开 Apollo 配置中心,环境列表点击 PRO 环境,然后新增一条配置,和之前例子中参数保持一致,都为 test 参数,创建完成后发布

    35610
    领券