web-dev-qa-db-ja.com

twitterのブートストラップ先読みのAjaxの例

私は Twitterブートストラップtypeahead 要素の実用的な例を見つけようとしています。

私はajaxのURLと返事を処理する方法を定義する既存の実用的なjqueryのオートコンプリートの例を持っています

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { minChars:3, max:20 };
    $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

これを先行入力の例に変換するには、何を変更する必要がありますか？

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { source:'/index/runnerfilter/format/html', items:5 };
    $("#runnerquery").typeahead(options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

' 先行入力用のリモートソースサポートの追加 '問題が解決されるのを待ちます。

jquerytwitter-bootstrapjquery-autocompletejquery-ui-autocompletetypeahead.js
270
emeraldjava

Edit：typeaheadはBootstrap 3にバンドルされなくなりました。

Bootstrap 2.1.0から2.3.2までの間に、これを行うことができます。

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            return process(data.options);
        });
    }
});

このようにJSONデータを消費するには

{
    "options": [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5"
    ]
}

JSONデータは正しいMIMEタイプ（application/json）でなければならないため、jQueryはそれをJSONとして認識します。

296
Stijn Van Bael

Ajax呼び出しをサポートする BS Typeaheadフォーク を使用できます。それからあなたは書くことができるでしょう：

$('.typeahead').typeahead({
    source: function (typeahead, query) {
        return $.get('/typeahead', { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});
117
bogert

Bootstrap 2.1.0以降：

HTML：

<input type='text' class='ajax-typeahead' data-link='your-json-link' />

Javascript：

$('.ajax-typeahead').typeahead({
    source: function(query, process) {
        return $.ajax({
            url: $(this)[0].$element[0].dataset.link,
            type: 'get',
            data: {query: query},
            dataType: 'json',
            success: function(json) {
                return typeof json.options == 'undefined' ? false : process(json.options);
            }
        });
    }
});

今すぐあなたのHTMLコードに "json-request"リンクを配置して、統一されたコードを作ることができます。

69
Thantifaxath

すべての応答はBootStrap 2先行入力を参照していますが、これはBootStrap 3にはもう存在しません。

他の誰かがここで新しいポストブートストラップを使用してAJAXの例を探しているのなら、 Twitter typeahead.js を使ってください、これは実用的な例です。構文は少し異なります。

$('#mytextquery').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  limit: 12,
  async: true,
  source: function (query, processSync, processAsync) {
    processSync(['This suggestion appears immediately', 'This one too']);
    return $.ajax({
      url: "/ajax/myfilter.php", 
      type: 'GET',
      data: {query: query},
      dataType: 'json',
      success: function (json) {
        // in this example, json is simply an array of strings
        return processAsync(json);
      }
    });
  }
});

この例では、同期（ processSync への呼び出し）と非同期の提案の両方を使用しているので、すぐにいくつかのオプションが表示され、それから他のオプションが追加されます。どちらか一方だけを使用できます。

文字列ではなくオブジェクトを扱うなど、バインド可能なイベントや非常に強力なオプションがたくさんあります。その場合は、独自のカスタムの display 関数を使用してアイテムをテキストとしてレンダリングします。

43
Jonathan Lidbeck

私はajax機能を備えたオリジナルの先行入力Bootstrapプラグインを拡張しました。非常に使いやすい：

$("#ajax-typeahead").typeahead({
     ajax: "/path/to/source"
});

これがgithubリポジトリです： Ajax-Typeahead

24
Paul Warelis

Jquery-ui.min.jsにいくつか修正を加えました。

//Line 319 ORIG:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").appendTo(d(...
// NEW:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").addClass("typeahead").addClass("dropdown-menu").appendTo(d(...

// Line 328 ORIG:
this.element.addClass("ui-menu ui-widget ui-widget-content ui-corner-all").attr...
// NEW:this.element.attr....

// Line 329 ORIG:
this.active=a.eq(0).children("a")
this.active.children("a")
// NEW:
this.active=a.eq(0).addClass("active").children("a")
this.active.removeClass("active").children("a")`

そして、次のCSSを追加

.dropdown-menu {
    max-width: 920px;
}
.ui-menu-item {
    cursor: pointer;        
}

完璧に動作します。

5
bmoers

私はこの方法を使っています

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
    {
    name: 'options',
    displayKey: 'value',
    source: function (query, process) {
        return $.get('/weather/searchCity/?q=%QUERY', { query: query }, function (data) {
            var matches = [];
            $.each(data, function(i, str) {
                matches.Push({ value: str });
            });
            return process(matches);

        },'json');
    }
});
3
Krava

受け入れられた答えのコーヒースクリプト版を探している人へ：

$(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead",
    query: query
  , (data) ->
    process data.options
2
Hendrik

私はこの記事を読みましたが、すべてが正しく動作することを望んでおらず、最終的にはいくつかの答えから少しまとめてみました。正しい場所です。

<?php if (isset($_GET['typeahead'])){
    die(json_encode(array('options' => array('like','spike','dike','ikelalcdass'))));
}
?>
<link href="bootstrap.css" rel="stylesheet">
<input type="text" class='typeahead'>
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('index.php?typeahead', { query: query }, function (data) {
            return process(JSON.parse(data).options);
        });
    }
});
</script>
2
l0ft13

ブートストラップを使って電話をかけることができます。現在のバージョンには、ソースアップデートに関する問題はありません。 ポストレスポンスでブートストラップの先行入力データソースをアップデートする際の問題 、つまり、一度アップデートされたブートストラップのソースは再度修正できます。

例として以下を参照してください。

jQuery('#help').typeahead({
    source : function(query, process) {
        jQuery.ajax({
            url : "urltobefetched",
            type : 'GET',
            data : {
                "query" : query
            },
            dataType : 'json',
            success : function(json) {
                process(json);
            }
        });
    },
    minLength : 1,
});
2
neoeahit

アップデート：私は this forkを使ってコードを修正しました。

tomislav Markovskiが示唆しているように$ .eachを使う代わりに$ .mapに変更

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.Origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.Push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name',
    items:11,
    onselect: function (obj) {

    }
});

しかし、私は次のようになることによっていくつかの問題に遭遇しています

捕捉されないTypeError：未定義のメソッド 'toLowerCase'を呼び出すことはできません

あなたがより新しいポストで見ることができるように私は把握しようとしています ここ

このアップデートがお役に立てば幸いです。

1
mmoscosa

サービスが正しいapplication/jsonコンテンツタイプヘッダを返さない場合は、これを試してください。

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            var json = JSON.parse(data); // string to json
            return process(json.options);
        });
    }
});
1
Andres

ajaxを使用しているとき、結果の正しい表示に問題がある場合は$.getJSON()ではなく$.get()を試してください。

私の場合、$.get()を使用したとき、私はすべての結果の最初の文字しか得られませんでしたが、json_encode()サーバーサイドを使用しました。

0
larsbo

これを解決するために$().one()を使います。ページがロードされると、私はajaxをサーバーに送り、完了するのを待ちます。それからfunction .$().one()に結果を渡すことが重要です。強制的に typehead.js を入力にアタッチするようにしてください。悪い執筆のため申し訳ありません。

(($) => {
    
    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 = [];
      $.ajax({
          url: 'https://baconipsum.com/api/?type=meat-and-filler',
          type: 'get'
      }).done(function(data) {
        $('.typeahead').one().typeahead({
            hint: true,
            highlight: true,
            minLength: 1
          },
          {
            name: 'states',
            source: substringMatcher(data)
          });
      })
      

})(jQuery);
.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;
    cursor: pointer;
}

.tt-suggestion:hover {
    color: #f0f0f0;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://Twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<input class="typeahead" type="text" placeholder="where ?">
0
ali karimi

私はあなたのための実用的な例も持っていないし、私は非常にきれいな解決策を持っていません、しかし私が私が見つけたものをあなたに言わせてください。

TypeAheadのJavaScriptコードを見ると、次のようになります。

items = $.grep(this.source, function (item) {
    if (that.matcher(item)) return item
  })

このコードは、jQueryの "grep"メソッドを使用してソース配列内の要素と一致させます。あなたがAJAX呼び出しに引っ掛かることができる場所は見当たりませんでしたので、これに対する「きれいな」解決策はありません。

ただし、これを行うことができるやや厄介な方法の1つは、grepメソッドがjQueryで機能する方法を利用することです。 grepの最初の引数はソース配列で、2番目の引数はソース配列と一致させるために使用される関数です（Bootstrapは初期化時に指定した "matcher"を呼び出します）。できることは、ソースをダミーの1要素配列に設定し、マッチャーをAJAX呼び出しを含む関数として定義することです。こうすると、AJAX呼び出しが一度だけ実行されます（ソース配列には要素が1つしかないため）。

TypeAheadコードはキーを押すたびに検索を実行するように設計されているため、この解決策はハックなだけでなくパフォーマンス上の問題もあります（AJAX呼び出しは実際には数回のキーストロークごとまたは一定時間のアイドル時間後にのみ発生します）。私のアドバイスはそれを試してみることですが、別のオートコンプリートライブラリを使用するか、何か問題が発生した場合にのみAJAX以外の状況で使用するようにしてください。

0
Aamer Abbas