Twitter typeahead不显示文本，仅显示空白下拉菜单
Twitter typeahead是一个用于实现自动补全功能的JavaScript库。它可以根据用户输入的关键词，从预定义的数据源中获取匹配的结果，并以下拉菜单的形式展示给用户。
如果Twitter typeahead不显示文本，仅显示空白下拉菜单，可能有以下几个可能的原因和解决方法：
- 数据源问题：首先要检查数据源是否正确配置。确保数据源返回的结果是正确的，并且包含了需要显示的文本内容。可以通过查看数据源的返回结果来确认。
- 样式问题：检查下拉菜单的样式是否正确设置。有时候可能是由于CSS样式的问题导致文本无法显示。可以通过检查样式表或者使用浏览器的开发者工具来调试和修改样式。
- JavaScript错误：检查浏览器的开发者工具中是否有JavaScript错误。有时候可能是由于JavaScript代码错误导致typeahead无法正常工作。可以通过查看控制台中的错误信息来定位和修复问题。
- 版本兼容性问题：确保使用的typeahead库版本与其他相关库（如jQuery）兼容。有时候可能是由于版本不匹配导致的问题。可以尝试更新或降级typeahead库的版本，或者查看官方文档中是否有关于版本兼容性的说明。
腾讯云相关产品中，可以使用腾讯云的云开发（CloudBase）来搭建和部署应用程序。云开发提供了云函数、数据库、存储等服务，可以方便地进行前后端开发和部署。可以通过云开发的云函数来实现自动补全功能，并使用云数据库存储数据源。具体的使用方法和示例可以参考腾讯云云开发的官方文档：腾讯云云开发。
相关·内容
我想在我的ASP.Net mvc应用程序中使用Twitter typeahead。我正在使用Azure search作为我的搜索文本框。现在，我想使用Twitter typeahead为用户下拉菜单提供建议，并提示输入文本框。如何将其与azure搜索一起使用？
谢谢Pavan
浏览 0提问于2015-05-21得票数 0
因此，我在我的网站上使用twitter bootstrap，并使用我购买的css模板。不幸的是，当使用typeahead时，下拉菜单显示悬停/聚焦选项太暗，模糊了我的文本。在我的鼠标悬停/焦点上，文本是黑色的，背景是非常深的灰色，所以文本是不可替换的
我试着修改下拉菜单.active > a:hover和几乎所有我能看到的颜色属性，但这并没有改变文本的颜色。我一定错过了一些简单的东西
另外，当我尝试点击它来选择在chrome中检查元素时，不幸的是它消失了
如果有任何帮助，我将不胜感激。
浏览 0提问于2013-02-17得票数 0
回答已采纳
我正在制作的Django网站上使用Twitter bootstrap。我有一个页面，在那里用户可以输入他们的所有技术技能在一个文本输入配备了一个bootstrap typeahead。我正在尝试访问下拉菜单中当前选定的文本，这样，当按ENTER时，下拉菜单中突出显示了一个元素，它将获取该值并将其显示在输入文本字段的下方。然后清除输入文本字段，用户可以搜索其他技能。
$(document).keyup(function(event) {
if (event.keyCode == 13) {
if ($('.dropdown-menu').css(
浏览 0提问于2013-09-10得票数 11
回答已采纳
我使用的是angularjs和bootstrap。我的一些页面集成了"typeahead“代码。
当我在文本字段中输入一个字符时，下拉菜单显示，但标签为空。
当我单击任何空标签时，它会用正确的值填充文本字段。
问题是，下拉菜单不显示标签
任何解决方案。
<input type="text" class="order_input" ng-model="selected_address"
typeahead="rest as rest.name for rest in searchTerms($viewValue,
浏览 0提问于2014-12-26得票数 0
1回答
这里我想要创建文本框，它可以在3个输入字母之后显示一个匹配的客户列表。我使用过twitter typeahead和远程插件。每当我输入3个字母，它就开始显示一个空白框，但它不包含任何类型的列表。我有错过什么吗？请帮帮我!！我的标记和jQuery如下..。
<form>
<div class="form-group">
<label>Customer</label>
<input id="customer" type="text" value="&
浏览 10提问于2021-12-13得票数 0
回答已采纳
我有一个使用twitter-typeahead的自动完成下拉菜单，如下所示：
$('#Data').typeahead(
{
displayKey: 'description',
source: myData.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
<a class="js-no
浏览 44提问于2016-09-15得票数 0
回答已采纳
嗨，我正在使用twitter bootstrap。我在我的模型窗口中使用了typeahead。我的问题是，当我在文本框中输入时，下拉框是完美的，但它出现在文本框的最底部。我观察到，当下拉菜单到来时，会有属性top set。但我不知道如何在运行时更改这一点。
图片如下所示：
我不擅长CSS。有人能告诉我应该怎么解决这个问题吗？
浏览 0提问于2012-11-07得票数 1
回答已采纳
我似乎无法设置ng bootstrap typeahead的下拉菜单的样式。
输入本身的样式很好(组件只包含一个input/typeahead)，但不适用于下拉菜单(尝试使用插入的ngb-typeahead window以及.dropdown-menu类)。
浏览 0提问于2018-07-09得票数 2
因此，我希望使用typehead.js拥有一个自动完成字段()：
$(document).ready(function() {
var result;
var result = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.Domain.domain); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit
浏览 1提问于2014-03-10得票数 0
回答已采纳
在使用Bootstrap的"typeahead“自动完成功能时，如何为下拉菜单中的活动项设置自定义背景颜色？
这只是一个小问题，但是这个问题已经困扰我好几个小时了！
我通过bootstrap-sass gem在Rails3.2应用程序中使用Twitter Bootstrap。
我假设这是由下拉菜单样式控制的，但是
$dropdownLinkBackgroundHover: $customColor;
不起作用。
我还尝试了一种更具体的方法
.typeahead .active > a, .typeahead .active > a:hover { background-co
浏览 0提问于2012-12-21得票数 2
回答已采纳
1回答
我正在使用这个堆栈溢出来尝试并为我的rails应用程序实现Twitter类型化，我也尝试过实现自述，但是当我在文本框中键入时没有文本建议。
我的控制器
class PagesController < ApplicationController
def typeahead
@vn = Vn.search_by_name(params[:search])
render json: @vn.results
end
end
我的路线
get 'typeahead/:query' => 'pages#typeahead'
Applic
浏览 1提问于2015-12-02得票数 0
回答已采纳
3回答
我们目前正在努力尝试突破一个隐藏了溢出的div。
我们有一个下拉菜单，当用户输入(在搜索字段中键入'c‘可以看到)时，它会填充建议。此下拉菜单当前隐藏在菜单栏后面，因为它有“溢出隐藏”。
如果我们移除top:100%并将position设置为fixed，我们就可以突破。但我们希望它保持绝对(即对于移动设备)。
在这里创建了一个示例：
下拉建议列表可以在.headerItem.headerSearch .searchField .twitter-typeahead .tt-dropdown-menu中找到。
浏览 0提问于2014-08-27得票数 10
回答已采纳
我正在使用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
1回答
在没有结果的情况下获得下拉菜单，但是，下拉菜单没有显示视图
<div class="dropdown">
<div class="form-group">
<input placeholder="Vælg kunde" type="text" ng-model="customer" typeahead-editable="false" uib-typeahead="customer as customer.customer for cus
浏览 3提问于2015-10-24得票数 6
我试图使用typeahead.js提供自动完成从推特后面的用户列表上的文本输入，通过获取朋友/列表。
这是我的代码：
$('input.twitter_friend').typeahead({
name: 'countries',
prefetch: 'https://api.twitter.com/1.1/friends/list.json',
limit: 10,
template: [
'<img src="{{profile_image_url}} class="
浏览 1提问于2013-11-16得票数 1
回答已采纳
对于react-bootstrap- TypeAHead，有没有一种方法可以从下拉菜单中强制选择，即不允许在TypeAHead组件中输入自由文本？
浏览 12提问于2020-04-29得票数 1
我正在尝试实现typeahead.js，这是我的设置：
主计长的行动：
def autocomplete
render json: Item.search(params[:query], {
fields: ["title^5"],
match: :word_start,
limit: 10,
load: false,
misspellings: {below: 5}
}).map(&:title)
end
application.js
//= require typeahead.bund
浏览 0提问于2018-03-26得票数 2
1回答
我在我的angularJs应用程序中创建了uib-typeahead下拉菜单。我在uib-typeahead下拉菜单中显示了两个属性。我根据名字调用API，api使用object给出响应。我在下拉列表中打印名字和姓氏。名和姓。但它显示在一行中。
<input class="form-control" type="text" ng-model="name" placeholder="Search name"
uib-typeahead="name as name.firstName + ' &
浏览 32提问于2020-05-28得票数 1
我有一个输入文本，我应用它的typeahead插件来建议项目，但当我在输入文本上按enter键时，它会提交表单。
如何使用twitter bootstrap typeahead插件阻止表单提交？
浏览 1提问于2012-11-25得票数 15
选择(twitter) typeahead建议后，我无法设置文本字段的值 这不起作用： $("#location").on("typeahead:selected", function(eventObject, suggestion, name) {
console.log(suggestion.stop_id);
$("#location").val(suggestion.stop_id);
}); 虽然这是有效的：(但我希望在同一文本字段中输入文本) $("#location").on("typeah
浏览 15提问于2019-04-13得票数 2
回答已采纳
有这样的功能，需要获取有效数据的typeahead功能，这很好用。但是你能建议我如何获取无效字符串的No Results found消息吗？如果我们没有从typeahead中选择(如果我们不从typeahead中选择，那么手动输入的值应该显示为空白)，我们可以在文本框中显示为空白吗？下面是我的示例代码，
subAccountItemObservable: Observable<any>;
asyncAccountValue: string;
this.subAccountItemObservable = new Observable((observer) => {
浏览 0提问于2021-01-25得票数 0
我正在尝试在我的项目中实现twitter typeahead，将remote作为源。我能够在前端查询文本和sql之间建立连接。返回的响应如下所示：
[
{
id: 1,
name: 'user one'
},
{
id: 2,
name: 'user two'
}
..
]
typeahead显示匹配的项，但它包括id和所选内容中的名称，而不仅仅是名称。其次，我希望在select上获得id值，但是:select总是给出name值，而不是id。
下面是我的代码：
var source = new Bloo
浏览 11提问于2017-01-12得票数 1
我已经实现了Twitter的Typeahead.js功能来显示搜索结果建议，它可以正常工作，但是当我使用键盘高亮显示一个建议，然后将光标移动到另一个建议时，问题就出现了。以下是一些解释这一问题的图片：
当鼠标光标悬停在另一个选项上时，如果鼠标已经在一个建议上悬停，如果我在键盘上按上/下，鼠标选择消失，选择分别向上/向下移动，我如何删除键盘选择？
HTML/Javascript/JQuery/AJAX
<div class="col-sm-8">
<form class="navbar-form" role="
浏览 3提问于2015-11-24得票数 0
回答已采纳
1回答
我有一个只有一行的表，这些行的第一个单元格中有一个文本字段，而bind to twitter bootstrap typeahead中的文本字段在一个单独的js文件中。但是用户可以使用add按钮创建行，并克隆第一行以创建其他行。现在，我希望typeahead在这些克隆文本字段中工作得很好，但它不能工作，控制台中也不会显示任何错误。克隆的文本字段与原始文本字段具有相同的id和名称。你知道为什么会这样吗？对如何处理它有什么建议吗？
浏览 3提问于2013-05-15得票数 0
回答已采纳
我已经坚持了两天了。我试图通过使用rails 4中的typeahead.js来自动完成搜索。
问题是我的jquery根本没有选择.typeahead操作。在输入字段时，我绝对没有看到任何动作。
我希望稍后能从外部数据库获得结果，但现在我只想在输入文本框时得到一些反应。
我的app/view/layout/application.html.erb文件如下所示：
typeahead.bundle.js从下载并存储在公共/javascripts/中。(我试着安装twitter-typeahead rails创业板，并按照说明进行操作，但这对我来说也没有用。)
<!-- Include type
浏览 2提问于2014-03-17得票数 3
回答已采纳
1回答
不知道为什么，但我的typeahead.js远程自动完成停止工作。我没有更改任何关于typeahead.js的代码，但是由于它被破坏了，我一定是错了。你能看看我的吗？我会创建jsfiddle，但多亏了Cross-Origin Request Blocked，我没有能够包括我的依赖。
问题
如果我输入"JN“或"AAP”，这就是我得到的(建议用纯文本)：
另外，我想知道为什么自动完成在第三个字符输入之后开始，而不是第一个(我使用minLength: 1)。
我将粘贴我的大部分代码在这里，因为我可能会改变我的网站在未来。
进口
<link rel="styl
浏览 3提问于2015-07-11得票数 5
回答已采纳
1回答
我正在尝试使用twitter-typeahead-rails。我的意图是当我在"#Typeahead“输入框中键入时，通过下拉框建议模型"User”的实例。但是，当我输入时什么都不会发生。
有人看到我的代码有什么问题吗？
Gemfile:
gem 'twitter-typeahead-rails'
layouts/application.js:
//= require twitter/typeahead
//= require twitter/typeahead/bloodhound
config/routes.rb:
get 'typeahead/:q
浏览 0提问于2015-01-26得票数 4
回答已采纳
我正在尝试找到一种方法，以编程方式关闭typeahead结果显示并清除输入。
清除输入与在typeahead:closed事件处理程序中添加以下内容一样简单：
$(obj.currentTarget).val("");
然而，我似乎就是找不到关闭下拉菜单的方法。我在typeahead:selected、typeahead:closed和typeahead:autocompleted事件处理程序中尝试了各种方法，但都不起作用。
如何使用Javascript关闭结果显示？
浏览 2提问于2014-06-27得票数 0
在悬停在pointer建议上时，我无法让光标更改为typeahead。
我尝试在几个typeahead.css类中应用游标样式，但似乎不起作用。
我的typeahead.js版本是0.10.5。
下面是我的typeahead.css文件：
*
* typehead.js-bootstrap3.less
* @version 0.2.1
* https://github.com/hyspace/typeahead.js-bootstrap3.less
*
* Licensed under the MIT license:
* http://www.opensource.org/lic
浏览 1提问于2016-04-02得票数 0
回答已采纳
我正在尝试禁用表单上的所有文本框。其中一个盒子上有一个typeahead。当我这样做的时候：
$(#textbox).attr('disabled', true);
它不再处于启用状态，但颜色不会像所有其他文本框一样在禁用时切换。
我相信这是由于twitter typeahead，我想知道有没有办法绕过它。有人知道当文本框被禁用时如何覆盖文本框背景颜色或完全删除typeahead吗？
我尝试过.unbind()和.addClass("greyBackground")，但它们似乎都不起作用。
浏览 1提问于2013-06-25得票数 6
回答已采纳
我已经关注了几篇文章，所以posts...so非常困惑。
对于初学者来说，Bootstrap Typeahead似乎不同于twitter typeahead？？
无论如何，我有以下简单的代码：
// NOTE: Initiate auto-complete
$('#edit-keyword').typeahead({
remote: '/products/autocomplete.json/%QUERY',
wildcard: '%QUERY'
}).bind('typeahead:selected'
浏览 2提问于2013-08-19得票数 0
3回答
我是Excel宏的新手，我正在尝试自动填充文本框并从下拉菜单中选择选项，然后单击Submit。 使用我导航到页面的宏，我需要在文本框中输入文本，并根据建议选择选项。 选择该选项后，我需要单击continue using宏。 这是当前的代码(我尝试使用注释行，但它不起作用)。 Sub Create_Change()
Dim i As Long
Dim URL As String
Dim IE As Object
Dim objElement As Object
Dim objCollection As Object
Dim HWNDSrc As
浏览 24提问于2019-05-29得票数 0
1回答
我正在尝试为一个iFrame使用Twitter提前类库实现自动完成，这样当我开始输入iframe时，建议应该会出现，但它不会出现。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type=&#
浏览 1提问于2016-11-09得票数 0
我在打字方面有困难。我已经搜索了一段时间了，没有什么能帮到我。这就是我所做的:尝试了简单的
<script type="text/javascript">
// instantiate the bloodhound suggestion engine
var numbers = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
queryTokenizer: Bloodhou
浏览 3提问于2014-02-19得票数 0
回答已采纳
我使用“血犬”从数据库中获取数据，然后使用twitter显示搜索框下面的选项。
目前，猎犬部分正在寻找所需的物品，但打字机并没有显示它们。
var artist_retriever = new Bloodhound({
// turns input query into string of tokens to send to database.
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
// URL to fetch information from
浏览 2提问于2015-07-04得票数 5
我是Twitter Typeahead的新手(使用typeahead.js 0.11.1)，我正在尝试使用Thymeleaf + Spring MVC使用远程选项来配置它。我遇到了这个问题，并不是所有的结果都显示在建议下拉菜单中。返回的结果的最后一个元素没有显示。
例如，出于测试目的，我将minLength选项设置为'1‘。在我的数据库中，我有名字如下的用户: Ron，Jon，Tom。因此，当我在typeahead输入字段中输入字母'o‘时，我希望这三个名字都会显示在建议菜单中。但是，仅显示2个名称。我已经检查了响应参数(使用Firebug)，并且可以确认所有三个名称都被返回。
浏览 2提问于2015-05-05得票数 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回答
我正在使用twitter typeahead自动完成，它是一个很棒的自动完成插件。然而，我在使用它时遇到了一个问题。
它不会在下拉列表的开头显示最好的建议，如所附图片所示
在这里，单词从魔术开始，但是建议下拉菜单显示“修改的艺术魔术单曲”作为第一个建议。我知道里面有魔术这个词，但它不应该列在建议的最后吗，因为还有其他以“魔术”开头的词
我如何使下拉列表首先显示这些建议，即以键入的字母开头，并在底部休息。
在图像的情况下，我想在下拉列表的底部显示“修改的艺术魔术单曲”。
谢谢
浏览 1提问于2014-01-30得票数 0
我在一个对话框的底部使用twitter bootstrap typeahead。我想让typeahead列表总是朝上显示。我该怎么做呢？我找不到任何可以让它向上显示的选项。
浏览 0提问于2013-05-05得票数 1
回答已采纳
我使用的是twitter bootstrap 2.0.4。我想使用ajax填充下拉列表。typeahead插件的source属性要求source的值为数组或函数。我尝试在ajax请求之后更改数组的值，但它只显示第一个请求的结果。
<form class="navbar-search">
<input type="text" id="searchSong" class="typeahead" placeholder="Search">
</form>
$('.ty
浏览 1提问于2012-10-11得票数 4
回答已采纳
1回答
我正在尝试通过在上使用post来实现Twitter提前输入
我从typeahead.js下载了 0.11.1
我的HTML是
<body>
<input id="test" type="text" class="typeahead tt-input" autocomplete="off" spellcheck="false">
</body>
我的Javascript是
$(document).ready(function(){
$('#test.type
浏览 2提问于2015-05-11得票数 2
回答已采纳
我正在使用Twitter的typeahead.js插件。因此，为了使用它，我扩展了Ember的TextField。这个插件都很好用。现在我只想让控制器内的值可以访问。
当我在视图类中使用值绑定时，它工作得很好。这是。在这里，这个值最初会被设置，然后更新。要测试文本视图类型“aaa”，请执行以下操作。
App.TypeAhead = Ember.TextField.extend({
classNames: ['cmp-typeahead'],
attributeBindings: ['id','value'],
浏览 0提问于2014-04-30得票数 1
回答已采纳
我试图通过烧瓶应用程序来定义typeahead.js的模板。
我正在寻找的解决方案要么覆盖默认(Jinja2)模板，要么使用默认值定义一个新模板。
更新：
这就是我到目前为止所拥有的。除“值”以外的任何其他值都不起作用。
$('#search').typeahead({
name: 'Search',
local: {
value: 'String1',
tokens: ['1','one'],
name: 'StringTest'
浏览 7提问于2013-08-16得票数 1
回答已采纳
我有一个输入文本，它正确地填充了Twitter。在这种情况下，我希望从选择框中选择一个值，并使用与所选下拉列表值相关的值填充输入文本。我发现了类似的疑问，但不幸的是，我没有找到正确的方法来解决这个问题：
下面的代码显示了一个用php代码填充的选择框和一个用Twitter TypeAhead脚本填充的输入文本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; chars
浏览 4提问于2020-01-06得票数 0
回答已采纳
有没有办法将twitter bootstrap的typeahead函数转换成$("body").on()函数？如果页面加载上存在该元素，则以下代码可以正常工作。
$("#job_title").typeahead({
source: searchFunction,
onselect: function(obj) {
}
});
但是如果我用id="job_title"动态添加文本输入，上面的函数就不起作用了。有解决这个问题的办法吗？
浏览 3提问于2012-06-15得票数 6
回答已采纳
我使用bootstrap的typeahead作为文本输入，它也有一个弹出流行结果弹出窗口的按钮。
有没有办法设置typeahead搜索结果的“容器”？(例如，popover小工具包含一个'container‘选项)
如下所示：
Text Field Button popover
________________________________________________________
| Search... | B | Typeahead1 Popular Searches: |
|--------------|---| Typeahe
浏览 0提问于2013-05-02得票数 4
回答已采纳
1回答
如何使用Twitter的Typeahead插件禁用自由文本输入？我找到的所有示例和配置，用户都可以输入自定义文本。我需要用户不能输入自定义文本，但只有当文本匹配的选项之一。
浏览 5提问于2014-05-15得票数 5
我在我正在编写的一个小型angularjs应用程序中添加了角打字机，我下载了一个基于angularjs的代码。我已经在控制器中定义了一个数组，并且可以在视图中选择一个项。我在ui.bootstrap中添加了angular.module中的app.js。
participants.js：
$scope.clubs = ['BBIL', 'STIL', 'Vikane IL'];
participants.html：
<div class="form-group">
<input type="text&#
浏览 7提问于2014-03-17得票数 1
回答已采纳
我想在我的导航栏中实现一个自动完成字段。
var substringMatcher = function(strs) {
console.log('strs', strs);
return function findMatches(q, cb) {
console.log('q', q);
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
console.lo
浏览 2提问于2021-05-16得票数 3
回答已采纳
在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
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
