Typeahead.js未显示建议
Typeahead.js是一个开源的JavaScript库，用于实现自动完成和搜索建议功能。它可以根据用户输入的关键词，实时地从预定义的数据源中获取匹配的建议，并将这些建议显示在用户界面上。
Typeahead.js的主要特点和优势包括：
- 实时搜索建议：Typeahead.js可以在用户输入时实时地提供搜索建议，帮助用户快速找到他们想要的内容。
- 自定义数据源：它可以从各种数据源中获取建议，包括本地数据、远程服务器数据、静态JSON文件等。
- 高度可定制化：Typeahead.js提供了丰富的配置选项和回调函数，可以根据需求进行定制，包括建议的显示方式、匹配算法、数据过滤等。
- 键盘导航支持：它支持使用键盘上下箭头键进行建议的选择，提供更好的用户体验。
- 轻量级和快速：Typeahead.js是一个轻量级的库，加载和响应速度快，适用于各种网页应用。
Typeahead.js适用于许多应用场景，包括但不限于：
- 搜索框自动完成：在搜索框中实现自动完成功能，帮助用户快速输入关键词。
- 标签输入：在标签输入框中提供建议，帮助用户选择已有的标签或输入新的标签。
- 地址选择：在地址输入框中提供建议，帮助用户选择已有的地址或输入新的地址。
- 表单输入验证：在表单输入框中实时验证用户输入的有效性，并提供相关建议。
腾讯云提供了一些相关的产品和服务，可以与Typeahead.js结合使用，以实现更强大的功能：
- 腾讯云对象存储（COS）：用于存储和管理Typeahead.js所需的数据源文件，如JSON文件。 产品介绍链接：https://cloud.tencent.com/product/cos
请注意，以上答案仅供参考，具体的实现方式和产品选择应根据实际需求和情况进行评估和决策。
相关·内容
当没有用户输入的建议时，我试图显示results not found消息。typeahead.js在输入文本field..if时显示输入建议，没有发现任何建议，那么如何显示results not found消息？版本为typeahead.js 0.11.1
浏览 2提问于2017-01-11得票数 4
回答已采纳
我在一个输入字段上使用了推特的typeahead.js ()，该输入字段是由查询字符串预先填充的。加载页面后，我希望以编程方式触发typeahead结果的显示，而无需用户在表单域中键入任何内容。
开箱即用，只有当用户在输入字段中手动键入内容，并且我在typeahead.js中找不到任何可以调用来触发结果显示的方法时，才会触发typeahead.js。
如果有任何建议，我们将非常感谢。
谢谢!
浏览 3提问于2013-02-27得票数 38
回答已采纳
1回答
我刚刚下载了typeahead.js插件，我想知道如何在我的搜索结果旁边显示一个图像(类似于它在typeahead.js主页上的显示方式)，以及在每个搜索结果下面显示一个小页脚。
我的想法是，我的搜索结果将有一个绿色，琥珀或红色的圆圈旁边的每个结果与一些小页脚文字下面。
有人能告诉我这方面的工作例子吗？typeahead.js页面不显示带有图像的示例。
谢谢
浏览 9提问于2015-09-10得票数 0
回答已采纳
在输入上使用typeahead.js是可以的
如下所示：
<input type="text" class="typeahead" />
!function(source) {
$('.typeahead').typeahead({
source: source
});
}(["Alabama","Alaska"]);
当输入是'a‘时，它可以显示为"Alabama"，"Alaska“。但是当我这样做的时候：
<div conte
浏览 3提问于2014-03-14得票数 0
1回答
我要做一个很酷的自动完整字段，并且正在考虑使用Typeahead.js
我理解使用Typeahead.js，我可以为建议做定制的html模板，这是很棒的。
但是，我想知道，对于从建议中选择的值，我还能提供我喜欢的任何html吗？
我想在选择的值旁边显示一个小图像。
我只想在我深潜typeahead.js之前检查一下
浏览 5提问于2014-02-14得票数 0
回答已采纳
我试图在Meteor0.6.5.1中使用typeahead.js，但无法使它持续工作。只有在热代码刷新后才在呈现时填充finalItems (最好是有时)，但在浏览器中重新加载页面后才会显示为空。finalItems正确加载的时间，typeahead.js正常工作。
<template name="addProduct">
<div class="form-group">
<label for="styleName">Style Name</label>
浏览 3提问于2013-09-23得票数 0
我已经更新了引导程序2到引导程序3，最大的问题是提前输入已经被删除，并且推荐使用typeahead.js。因此，我安装了它，并且可以轻松地使用typeahead工作，但我也使用其他功能，如：
$('#my_field').typeahead({
source : [list_of_items],
matcher: function(item) {
foo();
return item;
},
updater : function(item) {
foo2();
re
浏览 1提问于2013-10-02得票数 0
回答已采纳
typeahead.js具有prefetch选项，可在需要之前获取基准。
$('input').typeahead({
"prefetch": "/selections_url"
});
我想要的是根据文档中的一些信息来过滤选择。使用filter选项时，prefetch还可以过滤初始基准。但是这只过滤了初始的抓取。我需要的确实是prefetch，但有一个钩子来过滤掉一些数据，就在他们被显示之前。
typeahead.js有此事件typeahead:opened，但此事件没有参数(无法处理数据)，并且在下拉列表中呈现数据之前触发(因此我无法
浏览 0提问于2013-09-01得票数 3
我正在做一个asp.net mvc项目，它将显示前面输入的搜索框下面的相关搜索结果。我已经在项目中添加了具有bower包管理器的twitter.typeahead.js。这是我的密码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
浏览 4提问于2017-07-31得票数 2
回答已采纳
是否有一种方法可以在这里引用解决方案：
要在没有更新器、匹配器等功能的情况下使用typeahead.js？
浏览 1提问于2014-10-27得票数 2
回答已采纳
2回答
我正在遵循一个在线教程()，它喜欢typeahead.js和一个简单的MySQL DB，但我无法让它工作。
使用typeahead.js v10.2 jQuery v1.9.1和Bootstrap v3.2.0
我已经包含了必要的css和js文件，我还创建了一个connection.php文件，它成功地连接到了我的localhost db。
问题是自动提示框没有自动提示任何东西。我可能在做一些愚蠢的事情，因为我对js和编程并不熟悉。
我已经把我的档案列在下面，如果有人能给我指出正确的方向，我会很感激的。
index.php
<!DOCTYPE>
<html lang="
浏览 0提问于2014-07-08得票数 2
回答已采纳
我正在从书中学打字。当我使用0.9.3 typeahead发行版时，Type预报工作得很好。当我使用类型机的lter版本(比如0.11.1或0.10.0 )时，它不再工作了。
那么，我应该对代码进行哪些修改，以便它在较新的提前版本中也能工作呢？(我正在使用最新的jquery版本)
<html>
<head><script type="text/javascript" src="components/jquery/dist/jquery.min.js"></script>
<script type="t
浏览 2提问于2015-08-22得票数 1
回答已采纳
我用的是typeahead.js。我看不到任何事件处理程序允许我捕获给定查询所建议的数据集的子集。是否无法从我的数据集中获取实际的行子集？
浏览 1提问于2016-02-20得票数 1
回答已采纳
我正在与Twitters Typeahead.js合作，我一直被一个问题所困扰，到处询问，但似乎没有人知道如何解决它。
我只是想在呈现Twitter Typeahead.js时循环每个结果，例如：
$('span.tt-suggestions img').each(function() { //这里的代码*} )；
有没有人知道解决办法，或者这是不可能的？我一直在尝试每一种简单的可能性。
请参阅此处的typehead示例：
浏览 1提问于2013-10-29得票数 0
我让Twitters 在Rails 4应用程序上工作。我还使用 gem动态地在我的视图中添加表单字段。问题是，typeahead.js只在页面加载时存在的文本字段上工作，而不是在页面加载后动态添加的字段上工作。
我找到了一个在中看起来相关的答案，但答案涉及编辑动态添加表单元素的javascript代码。
是否有人知道是否可以将typeahead.js与nested_form gem一起使用，或者我是否必须放弃gem并编写自己的代码？
浏览 1提问于2013-11-26得票数 0
回答已采纳
2回答
我使用的是一个简单的HTML5数据表，它在Chrome浏览器上充当自动完成下拉列表。我使用的数据表如下所示：
<datalist id="mylist">
<option value="123">Oranges</option>
<option value="2312">Apples</option>
<option value="33232">Bananas</option>
</datalist>
下面是
浏览 2提问于2014-04-03得票数 1
我正在使用Typeahead.js库，它工作得很好。我想在下拉菜单的末尾显示一个html内容。我知道有一个选项可以为每个datalist显示一个页脚。我不想显示每个列表的页脚。
我想在下拉菜单的末尾显示一个主页脚。我正在使用下面的代码。
$("#search-box").bind("typeahead:opened", function(obj, datum) {
$("div .tt-dataset-last").parent().append("Click Here");
});
上面的代码可以工作，但不是第一次打开
浏览 1提问于2013-09-22得票数 2
我在通过"npm i“安装grunt时遇到了问题。我也尝试过0.4.5，但同样的错误。知道发生了什么吗？
为了提供帮助，以下是我的依赖项：
"dependencies": {
"arrify": "1.0.1",
"as-jqplot": "1.0.8",
"babel-runtime": "6.9.2",
"bootstrap": "3.3.6",
"bootstrap-slider"
浏览 8提问于2016-07-24得票数 7
回答已采纳
我在引导3项目中使用库。这似乎是很好的，然而，我的输入领域有问题。当我开始填写时，就会启动前面的打字机，并相应地显示建议框。但是，在选择任何条目之后，输入字段将完全不被填充。有人能帮帮我吗？
下面是我现在正在工作的代码：
HTML:
<input type="text" class="form-control typeahead" name="txtCliente" id="txtCliente" placeholder="Cliente ou Aterro de Destino" value="&#
浏览 5提问于2013-10-15得票数 0
回答已采纳
我在Ember中的一个子组件中使用Twitter Typeahead.js，我为它提供了一个dataSource函数(见下文)。此dataSource函数查询远程服务器。这个查询我想在Ember中删除，这似乎不起作用。
这和运行循环有关吗？要包点什么吗？
import Ember from 'ember';
export default Ember.Component.extend({
dataResponse: [],
dataSource: function () {
var component = this;
// f
浏览 4提问于2014-11-25得票数 6
回答已采纳
1回答
我试图在字段("#addtags")上使用推特的typeahead.js来建议添加标签，但当我选择某项内容时，该字段会保留我刚输入的值，而它应该被清除。
我已经尝试了这里提供的解决方案()，即使用$("#id").typeahead('setQuery', query);清除该字段。但是，当我这样做时，我在控制台中得到一个错误：Uncaught Error: missing source.
有什么办法可以解决这个问题吗？清除该字段的代码位于底部上方的一行，其余部分用于上下文。
//===========================
//Typ
浏览 0提问于2014-09-02得票数 3
1回答
基于选定项的Json过滤
、、、
我已经使用自动完成功能来显示基于Json文件的选项，您可以在下面看到。现在，我的目标是根据选定的项过滤json文件。
例:如果我从自动完成输入中选择了“罗马人”，我需要显示存储在Json文件中的关于罗姆人的值：
1)罗姆人2) RM 3) 2019-12-04 4) 2018-25-05
并显示在#结果DIV中。
下面你可以看到我的代码。
comuni.php
<?php $arr = array(
array(
"nomeComune" => "Roma",
"provincia" =
浏览 1提问于2019-12-05得票数 0
回答已采纳
typeahead.js是一个文件，但出于某种原因，它添加了具有'style‘属性的html元素，我正在尝试修复一个z索引，但它在这里是在提前输入生成的元素中定义的。不过，我并没有在typeahead.js中定义样式。我如何重写这个高亮显示的东西为z-index=9999999，因为这个主题中的一些元素是99999 (令人讨厌) ? 我们正在尝试将菜单移到一些按钮的上方，但我不知道如何修改typeahead生成的html。为什么他们不在typeahead.css文件中使用css？这看起来有点奇怪。 谢谢你，迪恩 发现这个项目(https://github.com/coreja
浏览 24提问于2020-03-28得票数 1
回答已采纳
2回答
我有如下脚本
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/typeahead.js"></script>
<script>
var numbers = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whi
浏览 3提问于2014-03-02得票数 2
首先，请检查以下内容：
您可以将该JSON的所有内容粘贴到此处：
现在您可以看到该JSON的内容是越南语。而且，我希望当用户搜索时，他们可以使用UTF-8字符进行搜索。
例如:您在搜索框中键入字符‘You’，建议应该会显示。(Typeahead.js现在不能这样做)。
有没有什么办法可以满足我的要求？
编辑：
你可以在上看到现场演示(在搜索框中键入一个字符)
浏览 0提问于2013-07-20得票数 3
回答已采纳
我无法让预取选项在typeahead.js中工作。本地数据运行良好。对之前发布的问题的回答表明，缓存可能是一个问题，但我已经将ttl设置为0，并在Firefox和Chrome的私有浏览模式下进行测试。我遗漏了什么？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/typeahead.js/releases/latest/typeahead.css"
浏览 2提问于2013-08-08得票数 1
回答已采纳
3回答
在以前的版本中，我可以这样做：
$('#search').typeahead({
name: 'Search',
remote: '/search?query=%QUERY'
});
但是自从0.10更新以来，typeahead.js要求我们定义source，而我不能让它工作。如何在不定义数据集函数的情况下定义remote？
浏览 0提问于2014-02-03得票数 44
回答已采纳
4回答
我如何防止Typeahead.js分裂我的推特启动3输入组？每当我将预先输入的javascript指向作为输入组一部分的文本区域时，联接的文本区域和submit按钮就会停止连接。这只是打字机上的一个bug，还是有一个解决办法？
不加载Typeahead.JS：
使用Typeahead.JS：
我原来的HTML：
<div class="col-sm-4 hidden-xs">
<form class="navbar-form" role="search">
<div
浏览 2提问于2014-03-08得票数 25
回答已采纳
在Index.cshtml中，我有以下代码：
@{
ViewBag.Title = "Home Page";
}
<script type="text/javascript" src="http://twitter.github.io/typeahead.js/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://twitter.github.io/typeahead.js/releases
浏览 3提问于2013-12-20得票数 0
我想知道是否可以使用typeahead.js将远程查询保存到typeahead.js中。
我曾经使用过Bootstra2打字机，但无法用typeahead.js解决这个问题。
示例:在输入I中键入："Ger“
脚本检查localStorage中是否有什么内容。
如果不是，则从远程url获取响应并将其保存在localStorage中。
如果是，从localStorage获取数据并打印出来。
我正在使用
浏览 2提问于2013-08-30得票数 3
4回答
向所有开发人员问好
我有下面的json格式
[
{
"name": "typeahead.js",
"description": "A fast and fully-featured autocomplete library",
"language": "JavaScript",
"value": "typeahead.js",
"tokens": [
"typeahead.js"
浏览 4提问于2013-12-27得票数 0
我从Twitter 2切换到Bootstrap 3，发现自己没有提前输入，建议现在使用Twitter typeahead.js。相应的在方面似乎是最新的，但可能已经被流星的最新更新所过时。对我来说，它不能正常工作。
是否有人知道如何在Meteor中运行typeahead.js，或者确认我只是使用错了？
从我的代码中，我得到了这种错误的排版：
谢谢你的暗示！
typeahead.html
<head>
<title>typeahead</title>
</head>
<body>
{{> hello}}
<
浏览 3提问于2013-09-13得票数 1
2回答
我正在使用作为建议。除了一个问题外，一切都很顺利。我的建议有括号，如下所示：
"Elizabeth (Liz)"
"Robert (Bob)"
"Michael (Mike)"
只匹配单词的开头，所以如果用户键入"Liz“，它将不会建议第一项。如果你输入“(Liz)”，它将匹配。但是用户应该能够开始键入一个名称或昵称来查看匹配的建议。
如何让typeahead.js忽略括号并在两个单词中查找匹配项？
关于jsfiddle的工作示例：
重要注意事项：--我不希望typeahead.js在字符串中的任何位置查找匹配。我知道这会解决问题，但当有
浏览 5提问于2016-01-23得票数 2
回答已采纳
2回答
使用羊驼窗体显示键和值
、、、
我使用羊驼表单生成一个表单，一个字段将有一个自动完成。我正在测试来自的示例7，以了解它是如何工作的。但是，在我的表单中，自动完成在羊驼站点上显示为{"value":"Cloud“}和Cloud。我还尝试将自动完成值直接指定为数组。下面是我的代码，注意typeahead.js是本地安装的。
<html>
<head>
<title>Alpaca-Autocomplete Form</title>
<script type="text/javascript" src
浏览 4提问于2015-12-05得票数 3
回答已采纳
我正在使用typeahead.js，它很好，但我的用例是:在加载页面时，服务器端已经填充了一个文本字段，因此我不希望在用户聚焦文本字段时显示“建议”菜单。
当聚焦文本字段时，typeahead.js似乎总是显示菜单。这是有意义的，因为minLength是2，文本字段值类似于"Tony“(或者其他什么)。但是，我尝试使用hint: false并在回调中调用typeahead:active事件中的$('.typeahead').typeahead('close')，但两者似乎都没有阻止菜单的显示。
下面是我使用的init代码：
$('#locatio
浏览 5提问于2016-04-08得票数 1
回答已采纳
我应该把我的客户端Javascript放在哪里？我试着把它包括在我的玉模板中，如下：
script(type="type/javascript",src="../typeahead.js")
它返回了这个Cannot GET /typeahead.js
我还尝试了require('../typeahead.js')，这并不令人意外。为了澄清一下，既然我刚开始接触Node.js，require对于服务器端代码是正确的吗？
浏览 1提问于2014-02-02得票数 3
回答已采纳
你好，我的代码设置中有如下链接：
<a href="#" id="vtype" data-type="typeaheadjs" data-pk="4" class="editable editable-click" data-value="Sedan">Sedan</a>
下面是初始化它的javascript：
$('a#vtype').editable({
url: '/api/editVehicleType',
succes
浏览 2提问于2014-01-15得票数 1
回答已采纳
所以我计划使用typeahead.js，因为它看起来相当轻量级，但是不再支持它，PRs不合并，在水里看起来已经死了：
https://github.com/twitter/typeahead.js/issues/1562
我正在寻找一种替代方案，以尽可能轻量级的方式支持远程数据源，就像typeahead.js一样。
我正在使用bootstrap3并从自动完成工具的数据库查询中返回JSON数据。
提前感谢
浏览 0提问于2016-09-20得票数 6
在遗留JSP页面的HTML5迁移之后，页面加载时不会触发Bloodhound.initialize()方法。这在html5迁移之前是有效的。我是typeahead.js的新手，任何帮助都将不胜感激。
typeahead.js版本- 0.10.1
浏览 0提问于2016-02-02得票数 2
2回答
假设我有一个包含4个文本框的网页。为了保存数据，用户必须使用自动补全(例如typeahead.js)来填充它们，他不能键入数据库之外的内容。
现在，当一个ajax字段加载失败时，如何显示错误，以及在哪里检查错误？现在，我在我的控制器中使用了类似这样的东西：
if (someOperation.Success)
{
resultToReturn.Data = new {success = true, message = "",data = dataToSerializeAndReturn};
}
else
{
resultToReturn.Data = new { success
浏览 2提问于2014-01-22得票数 0
2回答
我使用引导v3.0.0和typeahead.js实现了一个搜索栏下拉列表。在我的项目完成时(2个月前)。我使用了以下内容来包含模板引擎和typeahead.min.js
<link href="http://raw.github.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css" rel="stylesheet" media="screen">
<script src="http://twitter.github.com/
浏览 1提问于2014-02-02得票数 3
回答已采纳
1回答
我想为我的搜索实现一个类似于在上找到的类型机。有谁知道一个插件能实现这一点吗？我目前使用的typeahead.js与引导带3。
浏览 6提问于2015-09-15得票数 0
回答已采纳
2回答
我正在寻找一个自动完成下拉框的解决方案，它需要从一个巨大的json加载条目(json文件也是每秒更新/生成的)。
我尝试了"typeahead.js“，但默认情况下它会在浏览器中缓存json文件，并且无法显示添加到json文件中的新条目。
是否有自动完成文本框的解决方案，该文本框可以尽可能快地从服务器加载条目？
请建议一下。谢谢
浏览 5提问于2015-01-12得票数 0
回答已采纳
我试图在一个ASP MVC视图中实现typeahead.js自动完成/搜索，但在Chrome的控制台中，当页面加载时，我收到错误消息：
Uncaught TypeError: Cannot read property 'isArray' of undefined ... typeahead.js:26
这是它所引用的typeahead.js文件中的代码段
isString: function(obj) {
return typeof obj === "string";
},
isNumber: function(obj)
浏览 0提问于2013-04-19得票数 3
回答已采纳
我正在使用twitter的typeahead.js显示一个自动完成。
我的代码如下：
$.ajax({
url:'/getlocals/',
success: function(data){
$('.local-type').typeahead({
name: 'local-tt',
source: data,
suggestion: Handlebars.compile('<p><strong>{{locali
浏览 0提问于2015-02-19得票数 3
回答已采纳
我在使用formik和我的自定义组件。
我就是这么用的
<Field id="basic-typeahead-single"
options={this.state.variables}
labelKey="name"
selected={this.state.singleSelection}
placeholder="Choose a Variable" name={`conditions.${index}.variable`}
component={AutoComplete} />
这是我使
浏览 6提问于2022-08-09得票数 0
回答已采纳
我正在努力弄清楚如何定制typeahead.js的建议。基本上，我希望搜索JSON文件中包含的医生id，并提供相关的医生id和mouseover事件的提前输入dropdown，显示更多关于医生的详细信息。
这是打字机的样品。
DoctorIdTypeahead.typeahead({
highlight: true
}, {
name: 'Doctor_ID',
displayKey: 'Doctor_ID',
浏览 10提问于2014-08-19得票数 2
回答已采纳
我正在尝试在Ruby的webpacker中加载猎犬和typeahead.query.js。但是typeahead在抛出这个错误时仍然不起作用。
Uncaught TypeError: $(...).typeahead is not a function
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlug
浏览 18提问于2020-05-16得票数 2
我试图在Rails 4应用程序中使用typeahead.js。我想用Bower来做这个，而不是使用宝石。我已经在vendor/assets/components中安装了它。我还在config/application.rb中包括了下面的一行。
config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
我已经进行了广泛的搜索，但似乎无法确定我应该在app/assets/javascripts/application.js中包含哪些内容来使Rails认识
浏览 1提问于2014-08-18得票数 4
回答已采纳
1回答
我的Typeahead.js /血犬(0.11.1)并不像预期的那样工作。在提供的json结果的长列表中，只有一些显示为建议。
例如，如果我在我的字段中键入los，当应该显示4个可选项时，我只会得到Lostorf，而不会得到任何其他内容。
这是我的密码：
<div id="remote">
<input class="typeahead" type="text">
</div>
JS
var searchablePlaces = new Bloodhound({
datumTokenizer
浏览 2提问于2015-05-21得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
