web-dev-qa-db-ja.com

Bootstrap 3.0 RC1の先行入力問題

Bootstrapがバージョン3に独自の先行入力プラグインをドロップしたため、私は Twitter Typeahead with Bootstrap 3 RC1を使用しています。

フォームで次のHTMLを使用しています。

<div class="well">  
<form>
    <fieldset>
        <div class="form-group">
            <label for="query">Search:</label>
            <input type="text" class="form-control" name="query" id="query" placeholder="Start typing something to search...">              
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
    </fieldset>
</form>
</div>

Typeaheadを追加しない場合、検索入力フィールドは次のように表示されます。

before adding Typeahead

次に、Typeaheadを次のように追加しました。

<script>
    $('#query').typeahead({        
        local: ['alpha', 'bravo','charlie','delta','epsilon','gamma','zulu']
    });
</script>

そしてフィールドは小さくなり、その中に白い長方形が表示されました。

after adding Typeahead

when typing some text...

何か間違っているのか、それともTypeaheadのバグなのか、Bootstrap 3 RC1？

jquerytwitter-bootstrapbootstrap-typeaheadtypeahead.jstwitter-bootstrap-3
24
javsmo

2014年2月14日更新

laurent-wartel で言及されているように、 https://github.com/hyspace/typeahead.js-bootstrap3.less または https://github.comを試してください/bassjobsen/typeahead.js-bootstrap-css typeahead.jsでBootstrap 3.1.0。

または、新しいBloodhound提案エンジンで「古い」（TB 2）プラグインを使用します。 https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

Twitterの先行入力がTwitterの準備ができていないようですBootstrap 3. Twitterの先行入力をTwitterのBootstrapで使用するには、 追加のCSS）が必要です （非推奨、もう保守されていません。）このCSSを使用しても問題は解決しません。

あなたの例では、入力フィールドの幅は100％になりません。これはJavascriptが原因です。 JavaScriptは入力をスパンでラップします。

<span class="Twitter-typeahead" 
    style="position: relative; display: inline-block; direction: ltr;">

このスパンには100％がないので、その中に入力を行います。 CSSへの追加を修正するには：

.Twitter-typeahead {
  width: 100%;
}

JavaScriptは、入力の背景色を透明に設定します。プラグインのソースを変更したくない場合は、これを修正するために追加のJavaScriptが必要になります。

$('.tt-query').css('background-color','#fff');

これで、例に基づいて期待どおりに動作するはずです。 http://www.bootply.com/73439

更新

元の質問は、RC1のTwitterのBootstrap 3.0.0に関するものでした。また、以下を追加する必要があります。

.tt-dropdown-menu {
   width:100%;        
}

新しいbootply： http://bootply.com/86305

39
Bass Jobsen

typeahead.js-bootstrap3.less をご覧ください。

これは、最新バージョンのBootstrap（v3.0.3）で問題なく動作し、カスタムテーマを維持できます。デフォルトのbootstrapを含む.cssファイルもあります。 =テーマ。

2
Laurent W.

Typeahead.js css修正は入力グループ（角丸め）にも問題があります。モーダルで壊れるという情報がどこかで見つかりました。その他 https://github.com/jharding/typeahead.js-bootstrap.css はもはや必須ではないので、Bass Jobsenソリューションを試してみましょう;）

1
3176243

スタイルを追加するのに全く運がない多くの調査の後、私は最終的にそれを修正して、Typeaheadコンストラクター（bootstrap.jsまたはbootstrap-typeahead.jsのバージョンに応じて）内に1行追加しました。

this。$ menu.width（this。$ element.outerWidth（））;

これがコードです：

/* TYPEAHEAD PUBLIC CLASS DEFINITION
 * ================================= */

var Typeahead = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.typeahead.defaults, options)
    this.matcher = this.options.matcher || this.matcher
    this.sorter = this.options.sorter || this.sorter
    this.highlighter = this.options.highlighter || this.highlighter
    this.updater = this.options.updater || this.updater
    this.source = this.options.source
    this.$menu = $(this.options.menu)
    this.shown = false
    this.listen()
    this.$menu.width(this.$element.outerWidth());
}
0
lukiller