24

Bootstrap はバージョン 3 で独自の typeahead プラグインを削除したため、Bootstrap 3 RC1 でTwitter Typeaheadを使用しようとしています。

フォームで次の 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 を追加しない場合、検索入力フィールドは次のように表示されます。

Typehead を追加する前に

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

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

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

Typehead を追加した後

テキストを入力するとき...

私は何か間違ったことをしていますか、それとも Typeahead または Bootstrap 3 RC1 の単なるバグですか?

4

5 に答える 5

2

typeahead.js-bootstrap3.lessを見てください。

Bootstrap の最新バージョン (v3.0.3) でうまく機能し、カスタム テーマを維持できます。デフォルトのブートストラップ テーマの .css ファイルもあります。

于 2014-01-03T12:27:43.550 に答える
1

Typeahead.js css の修正には、入力グループ (角の丸め) にも問題があります。モーダルなどで壊れるという情報がどこかで見つかりました。なので、Bass Jobsen ソリューションを試してみます ;)

于 2014-01-09T06:33:59.590 に答える
0

スタイルをまったく追加できずに多くの調査を行った後、最終的に Typeahead コンストラクター内に 1 行を追加して修正しました (バージョンによっては、bootstrap.js または bootstrap-typeahead.js)。

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());
}
于 2015-04-14T22:28:50.770 に答える
-2

Twitter Typeahead の代わりに、bootstrap-selectを使用してみてください。このライブラリは Bootstrap 3 に統合されており、より幅広い機能を備えています。

于 2013-12-31T14:08:45.070 に答える