Twitter 的 typeahead.js 建议没有样式（没有边框、透明背景等）

Posted 2023-05-07

技术标签:

【中文标题】Twitter 的 typeahead.js 建议没有样式（没有边框、透明背景等）【英文标题】：Twitter's typeahead.js suggestions are not styled (have no border, transparent background, etc.) 【发布时间】：2013-12-10 11:37:48 【问题描述】：

我正在使用 twitter 的 typeahead.js 0.9.3，看来我的建议根本没有风格。

我知道了：

不是这样的：（取自examples page）

JavaScript 启用 typeahead：

$('.search-typeahead').typeahead(
    name: 'videos',
    remote: 
        url: '/api/v1/internal/videos/typeahead?text=%QUERY'
    
);

HTML 输入元素：

<input type="text" value="" id="search_keywords" class="no-clear search-typeahead"/>

附加说明：

我正在处理的网站有 jQuery 1.10.1，并且不使用 twitter 引导程序。有一堆 CSS 不是我写的，因此不熟悉，我担心会干扰，但是插件似乎添加了自己的样式（没有随附的 .css 文件）所以理论上它不应该覆盖东西?我很困惑为什么我的样式有效，但插件添加的样式无效，导致建议具有透明背景、无边框等。

【问题讨论】：

【参考方案1】：

所以查看docs 我现在看到了：

默认情况下，由 typeahead.js 创建的下拉菜单看起来像丑陋的，你会想要设计它以确保它适合主题你的网页。

因此，我的解决方案是从我希望复制的示例中复制样式：

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint 
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;


.tt-query  /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);


.tt-hint 
    color: #999;


.tt-menu  /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);


.tt-suggestion 
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;


.tt-suggestion.tt-is-under-cursor  /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
    color: #fff;
    background-color: #0097cf;



.tt-suggestion p 
    margin: 0;

【讨论】：

由于某种原因，我建议的编辑被拒绝了，但请注意 tt-is-under-cursor 类似乎已重命名为 tt-cursor。文档here. 还有一个tt-input而不是tt-query（对于0.10.5）在 cmets 中有旧版本不是更好吗？ .tt-dropdown-menu 现在是 .tt-menu 将cursor: pointer; 添加到.tt-is-under-cursor 以获得一个合适的光标，告诉用户他需要点击。【参考方案2】：

因此，以下样式将为您提供这种外观和感觉。它基于我从 Typeahead 官方示例网站中提取的 CSS。

CSS：

.tt-query 
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);


.tt-hint 
  color: #999


.tt-menu     /* used to be tt-dropdown-menu in older versions */
  width: 422px;
  margin-top: 4px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);


.tt-suggestion 
  padding: 3px 20px;
  line-height: 24px;


.tt-suggestion.tt-cursor,.tt-suggestion:hover 
  color: #fff;
  background-color: #0097cf;



.tt-suggestion p 
  margin: 0;

这假设您的输入将具有form-control 类。对于我的示例，它是这样的：

<input class="typeahead form-control" type="text" placeholder="States of USA">

【讨论】：

通过一项调整为我工作。出现 .tt-dropdown-menu 现在是 .tt-menu。感谢您的回答。【参考方案3】：

https://github.com/bassjobsen/typeahead.js-bootstrap-css/blob/master/typeaheadjs.css

其他的看起来不太好，这个看起来最像Bootstrap。

【讨论】：

配合 Bootstrap 效果很好这在 Rails 4.2 和 bootstrap-sass (3.3.7) autoprefixer-rails (>= 5.2.1) sass (>= 3.3.4) 没有任何变化的情况下完美运行友好的一些其他解决方案。另外，这意味着您的输入框可以是 100% 的宽度，因此应该适用于大多数布局。虽然如果您输入的宽度大于 162（此处使用的最小宽度），那么您可能还需要添加 width: 100%;到 tt-menu/tt-dropdown 的第一部分【参考方案4】：

Typeahead 更改了它们的一些类名，上面的示例现在不正确。

例如：

代替.tt-suggestion.tt-is-under-cursor 使用.tt-suggestion:hover 代替.tt-dropdown-menu，使用.tt-menu

如果你想借用examples page的样式，可以看他们的stylesheet here：

.typeahead,
.tt-query,
.tt-hint 
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;


.typeahead 
  background-color: #fff;


.typeahead:focus 
  border: 2px solid #0097cf;


.tt-query 
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);


.tt-hint 
  color: #999


.tt-menu 
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);


.tt-suggestion 
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;


.tt-suggestion:hover 
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;


.tt-suggestion.tt-cursor 
  color: #fff;
  background-color: #0097cf;



.tt-suggestion p 
  margin: 0;

这是 Stack Snippets 中的演示

var substringMatcher = function(strs) 
  return function findMatches(q, cb) 
    var matches, substringRegex;
 
    // an array that will be populated with substring matches
    matches = [];
 
    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');
 
    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) 
      if (substrRegex.test(str)) 
        matches.push(str);
      
    );
 
    cb(matches);
  ;
;
 
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
 
$('.typeahead').typeahead(
  hint: true,
  highlight: true,
  minLength: 1
,

  name: 'states',
  source: substringMatcher(states)
);

.typeahead,
.tt-query,
.tt-hint 
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;


.typeahead 
  background-color: #fff;


.typeahead:focus 
  border: 2px solid #0097cf;


.tt-query 
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);


.tt-hint 
  color: #999


.tt-menu 
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);


.tt-suggestion 
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;


.tt-suggestion:hover 
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;


.tt-suggestion.tt-cursor 
  color: #fff;
  background-color: #0097cf;



.tt-suggestion p 
  margin: 0;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.js"></script>


<div class="container" >
  <input class="typeahead form-control" type="text" placeholder="States of USA" />
</div>

【讨论】：

是否可以防止预先输入使宽度变得如此之小？【参考方案5】：

这是适合我的代码：

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint 
    margin-bottom: 0;

.tt-hint 
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #999;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

.tt-dropdown-menu 
    min-width: 160px;
    margin-top: 2px;
    padding: 5px 0;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;


.tt-suggestion 
    display: block;
    padding: 3px 20px;

.tt-suggestion.tt-is-under-cursor 
    color: #fff;
    background-color: #dfdfdf;

.tt-suggestion.tt-is-under-cursor a 
    color: #fff;

.tt-suggestion p 
    margin: 0;

【讨论】：

无论输入的宽度如何，此解决方案都有效。谢谢！在同一个屏幕上使用 typeahead.js + BS3 + datatable 非常适合我。谢谢【参考方案6】：

由于包含 BS3 的环境较少，我采用了 Zugwalt css 代码（将其置于更易读的层次结构中）并使用 bs3 下拉菜单中的样式填充它。它只是遵循您的（自定义）变量。

    .twitter-typeahead 
      display: block;
      width: 100%; //BS 3 needs this to inherit this for children

      .tt-query,
      .tt-hint 
        margin-bottom: 0;
      

      .tt-dropdown-menu 
        z-index: @zindex-dropdown;
        min-width: 326px;
        padding: 5px 0;
        margin: 2px 0 0; // override default ul
        font-size: @font-size-base;
        text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
        background-color: @dropdown-bg;
        border: 1px solid @dropdown-fallback-border; // IE8 fallback
        border: 1px solid @dropdown-border;
        border-radius: @border-radius-base;
        .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
        background-clip: padding-box;

        .tt-suggestions 

          .tt-suggestion 
            padding: 3px 12px;
            font-weight: normal;
            line-height: @line-height-base;
            color: @dropdown-link-color;
            white-space: nowrap; // prevent links from randomly breaking onto new lines
          

          .tt-suggestion.tt-cursor 
            color: @dropdown-link-hover-color;
            background-color: @dropdown-link-hover-bg;
          

          .tt-suggestion p 
            margin: 0;

【讨论】：

【参考方案7】：

这是一个尽可能依赖引导变量/声明的scss 版本。不幸的是，你不能在 sass 中扩展嵌套选择器，否则它会更小：

@mixin typeahead-active() 
  // mimics  @extend .dropdown-menu > .active > a;
  color: $dropdown-link-active-color;
  text-decoration: none;
  outline: 0;
  background-color: $dropdown-link-active-bg;


//https://github.com/corejavascript/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names
span.twitter-typeahead 

  // this is the suggested matches dropdown
  .tt-menu 
    @extend .dropdown-menu;
  

  .tt-hint 
    color: #999
  

  // Added to suggestion elements.
  .tt-suggestion 

    // mimic .dropdown-menu > li > a
    padding: 3px 20px;
    line-height: $line-height-base;

    // Added to suggestion element when menu cursor moves to said suggestion.
    &.tt-cursor 
      @include typeahead-active;
    

    // Hover/focus on suggestion
    &:hover,
    &:focus 
      @include typeahead-active;
    

    p 
      margin: 0;
    
  

  .input-group & 
    display: block !important;
    .tt-dropdown-menu 
      top: 32px !important;
    
  
  .input-group.input-group-lg & 
    .tt-dropdown-menu 
      top: 44px !important;
    
  
  .input-group.input-group-sm & 
    .tt-dropdown-menu 
      top: 28px !important;

【讨论】：

【参考方案8】：

如果您使用的是 Bootstrap 4，这样做就足够了：

span.twitter-typeahead
  width: 100%

.tt-input
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)

.tt-menu
  @extend .list-group
  box-shadow: 0 5px 10px rgba(0,0,0,.2)
  width: 100%

.tt-suggestion
  @extend .list-group-item

.tt-selectable
  @extend .list-group-item-action

【讨论】：

【参考方案9】：

在我的特殊情况下，绝对定位解决了它。当建议列表（tt-menu）打开时，相对定位会下推其他引导元素。

.tt-menu  
    z-index: 2147483647;
    position: absolute;

您可以将这个添加到上面的答案https://***.com/a/26934329/1225421

【讨论】：

【参考方案10】：

什么对我有用：

.typeahead, .twitter-typeahead, .tt-hint, .tt-input, .tt-menu  width: 100%; height:auto;

添加高度：自动；尤其是在“tt-hint”中。

【讨论】：

【参考方案11】：

另一种获取样式的方法是在进入 typeahead 网站后，选择大搜索栏下方的查看示例，然后在示例的任何建议框中输入一个字母。

从那里，右键单击搜索栏下方显示的建议之一，然后选择“查看页面源代码”。这向您展示了所有使用的 html、CSS 和 JS。在您现在看到的 HTML 的最顶部，单击样式表的链接。

<link rel="stylesheet" href="../css/examples.css">

这会显示所有使用的 CSS。

以下代码块帮助了我，但您可以随意使用它。

.typeahead 
  background-color: #fff;


.typeahead:focus 
  border: 2px solid #0097cf;


.tt-query 
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);


.tt-hint 
  color: #999


.tt-menu 
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);


.tt-suggestion 
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;


.tt-suggestion:hover 
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;


.tt-suggestion.tt-cursor 
  color: #fff;
  background-color: #0097cf;



.tt-suggestion p 
  margin: 0;

TLDR：https://twitter.github.io/typeahead.js/css/examples.css

【讨论】：

以上是关于Twitter 的 typeahead.js 建议没有样式（没有边框、透明背景等）的主要内容，如果未能解决你的问题，请参考以下文章

如何在大型数据库中使用 typeahead.js

Twitter Typeahead.js - 选择时删除数据

Twitter typeahead .js 文件未更新

typeahead 表单，为用户提供提示或数据。自动补全typeahead.js

Twitter Typeahead.js：单击/聚焦时显示所有选项

使用 Twitter Typeahead.js 的多个远程源