59

Bootstrap 3 のリリースに伴い、Typeahead はこれを支持して削除されました:
https://github.com/twitter/typeahead.js

データのリモートフェッチで正常に統合しました

しかし、オートコンプリートに問題があります

ここに画像の説明を入力

ご覧のとおり、テキスト ボックスに 2 つのテキストが表示されます。

ドキュメントに記載されているように、css ( https://github.com/jharding/typeahead.js-bootstrap.css ) を含めましたが、うまくいきません。

助けや提案をいただければ幸いです。

問題を示す jsfiddle:
http://jsfiddle.net/KrtB5/

HTML

<body>
    <div class="container">
        <label>State</label> <input type="text" class="typeahead form-control" />
    </div>
</body>

Javascript :

$('.typeahead').typeahead({
    name: 'Some name',
    local: ['test', 'abc', 'def']
})
4

14 に答える 14

16

うーん、Bootstrap 3 RC の新しいクラスのように見えます.form-controlが、これがこの問題の原因です (これは間違いなく、多くの問題がある RC バージョンのみです)。そのクラスのスタイルをクラスにコピーするだけです.tt-hint。そう：

.twitter-typeahead .tt-hint {
    display: block;
    height: 38px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border: 1px solid transparent;
}

作業フィドル: http://jsfiddle.net/KrtB5/2/

jQuery 1.9.1 および Bootstrap 3.0.0 でより適切に動作する更新: http://jsfiddle.net/KrtB5/13

于 2013-08-05T19:09:12.953 に答える
14

これをチェックしてください：

$('#foo').typeahead(...);
$('.tt-hint').addClass('form-control');
于 2013-09-17T09:27:05.847 に答える
4

bootstrap.less を使用している場合は、はるかに簡単です。BS 3 は LESS 1.4.1 をインストールします。これには「extend」機能が含まれています。Less と Bootstrapを参照してください: span3 (または spanX [任意の数値]) クラスを mixin として使用する方法は?

Extend は LESS のキラー機能です。(明示的に名前が付けられた) クラスを完全に継承できるようになりました。したがって、Hieu Nguyen と Nick P の CSS 回答のようにプロパティをコピーする必要はありません。LESS は以下を使用してすべてを行います。

.twitter-typeahead .tt-hint:extend(.form-control all)
{}

https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less以下のコードが BS 3 で壊れています。これを出発点として使用し、作成も追加しましたBS 2 タイプアヘッドのようにワードラップではなくドロップダウン。私の最後の少ないファイルは次のとおりです。

.tt-dropdown-menu
{
    min-width: 160px;
    margin-top: 2px;
    padding: 5px 0;
    /* from BS dropdowns.less .dropdown-menu */
    /* background-color: @dropdownBackground;*/
    background-color: @dropdown-bg;

    /* 
    border: 1px solid #ccc;
    border: 1px solid @dropdownBorder;
    border: 1px solid @dropdownBorder;*/
    border: 1px solid @dropdown-fallback-border; // IE8 fallback
    border: 1px solid @dropdown-border;

    *border-right-width: 2px;
    *border-bottom-width: 2px;

    /*BS2 replaced with BS dropdowns.less .dropdown-menu*/
    /*.border-radius(6px);*/
    border-radius: 6px;

    /*.box-shadow(0 5px 10px rgba(0,0,0,.2));
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;*/
    .box-shadow(0 6px 12px rgba(0,0,0,.175));

    background-clip: padding-box;

}

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

    .tt-suggestion.tt-is-under-cursor
    {
        /*color: @dropdownLinkColorHover;
        #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));*/
        color: @dropdown-link-hover-color;
        background-color: @dropdown-link-hover-bg;
    }

        .tt-suggestion.tt-is-under-cursor a
        {
            /*color: @dropdownBackground;*/
            color: @dropdown-bg;
        }

    .tt-suggestion > p
    {
        margin: 0;
        white-space: nowrap !important;     //dont conform suggestion to parent input width
    }


/*https://stackoverflow.com/questions/18059161/css-issue-on-twitter-typeahead-with-bootstrap-3*/
.twitter-typeahead
{
    display: block;
    width: 100%; //BS 3 needs this to inherit this for children
}

.twitter-typeahead .tt-hint:extend(.form-control all)
{
    color: @input-color-placeholder; //show hint distinct from input
}
于 2013-11-03T11:30:21.033 に答える
3

包括的なソリューション ( Typeaheadのこのバグ レポートで推奨)

https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.css

/*
 * typehead.js-bootstrap3.less
 * @version 0.2.3
 * https://github.com/hyspace/typeahead.js-bootstrap3.less
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
.has-warning .twitter-typeahead .tt-input,
.has-warning .twitter-typeahead .tt-hint {
  border-color: #8a6d3b;
  -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);
}
.has-warning .twitter-typeahead .tt-input:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-error .twitter-typeahead .tt-input,
.has-error .twitter-typeahead .tt-hint {
  border-color: #a94442;
  -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);
}
.has-error .twitter-typeahead .tt-input:focus,
.has-error .twitter-typeahead .tt-hint:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-success .twitter-typeahead .tt-input,
.has-success .twitter-typeahead .tt-hint {
  border-color: #3c763d;
  -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);
}
.has-success .twitter-typeahead .tt-input:focus,
.has-success .twitter-typeahead .tt-hint:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.input-group .twitter-typeahead:first-child .tt-input,
.input-group .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.input-group .twitter-typeahead:last-child .tt-input,
.input-group .twitter-typeahead:last-child .tt-hint {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.input-group.input-group-sm .twitter-typeahead .tt-input,
.input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
select.input-group.input-group-sm .twitter-typeahead .tt-input,
select.input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: 30px;
  line-height: 30px;
}
textarea.input-group.input-group-sm .twitter-typeahead .tt-input,
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: auto;
}
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.input-group.input-group-lg .twitter-typeahead .tt-input,
.input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
select.input-group.input-group-lg .twitter-typeahead .tt-input,
select.input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: 46px;
  line-height: 46px;
}
textarea.input-group.input-group-lg .twitter-typeahead .tt-input,
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: auto;
}
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
.twitter-typeahead {
  width: 100%;
}
.input-group .twitter-typeahead {
  display: table-cell !important;
  float: left;
}
.twitter-typeahead .tt-hint {
  color: #999999;
}
.twitter-typeahead .tt-input {
  z-index: 2;
}
.twitter-typeahead .tt-input[disabled],
.twitter-typeahead .tt-input[readonly],
fieldset[disabled] .twitter-typeahead .tt-input {
  cursor: not-allowed;
  background-color: #eeeeee !important;
}
.tt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 160px;
  width: 100%;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  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;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
}
.tt-dropdown-menu .tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor {
  text-decoration: none;
  outline: 0;
  background-color: #f5f5f5;
  color: #262626;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor a {
  color: #262626;
}
.tt-dropdown-menu .tt-suggestion p {
  margin: 0;
}
于 2014-08-03T06:52:57.190 に答える
1

これは私にとってはうまくいきました。それを正しくするために、上と左の数字で遊ぶ必要があるかもしれません。

$('#typeahead').typeahead(...);
$(".tt-hint").css('top','3px');
$(".tt-hint").css('left','1px');
于 2013-09-28T18:12:21.083 に答える
1

Andreas's answer に基づいて、less を使用して次のことに賭けます。

.tt-hint { 
   .form-control;
}
于 2013-11-07T22:29:36.707 に答える
0

これらの複雑な実装のいずれかを実行する必要はありません。追加するだけです

style="position: relative"

親要素へ。それは絶対位置を使用しています。あなたが参照している「絶対」を知る必要があるだけです。

于 2014-09-04T16:11:05.243 に答える
0

私が思いついた解決策は、別の CSS クラス (from-group-lg) を form-group 要素に単純に追加することでした。

私のHTML：

<div class="form-group form-group-lg">
  <label class="control-label" for="my-large-typeahead">Type to automcoplete:</label>
  <input type="text" class="form-control typeahead" id="my-large-typeahead">
</div>

私のscssファイルに追加しました：

.form-group-lg .tt-hint
{
    @extend .input-lg;
}
于 2013-12-05T09:41:17.650 に答える