[解決済み】twitter bootstrap typeahead ajaxの例
2022-04-01 07:59:17
質問
の動作例を探しています。 twitter ブートストラップ タイプアヘッド 要素で、ドロップダウンに入力するために ajax 呼び出しを行います。
私は、AjaxのURLと応答を処理する方法を定義した、既存の作業jquery autocompleteの例を持っています。
<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];
}
);
..
これをtypeaheadのサンプルに変換するには、何を変更すればよいのでしょうか?
<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];
}
);
..
を待つことにして、' typeaheadのリモートソースサポートを追加 ' の問題が解決されます。
解決方法は?
編集: 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データは、jQueryがJSONとして認識するように、正しいMIMEタイプ(application/json)である必要があることに注意してください。
関連
-
[解決済み] jquery ui Dialog: 初期化前のダイアログでメソッドを呼び出せない
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'ajax' を読み取ることができません。
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Twitter Bootstrapでナビバーの色を変更する
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] Twitter Bootstrapのモーダルウィンドウを閉じないようにする
-
[解決済み] FirefoxでjQuery $.ajax(), $.post がREQUEST_METHODとして "OPTIONS "を送信する問題
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】jQuery.addClassが動作しない。
-
[解決済み] Foundation Revealモーダルjavascriptを開く方法
-
[解決済み】Ajaxクロスオリジンリクエストがブロックされました。同一生成元ポリシーがリモートリソースの読み取りを不許可にする
-
[解決済み] jQueryでPUT/DELETEリクエストを送信する方法は?
-
[解決済み] jQueryでページスクロールをプログラム的に無効にする方法
-
[解決済み] AJAXを同期させる(SJAX)にはどうすればよいか
-
[解決済み] jQueryを使って要素のIDを取得するにはどうすればよいですか?
-
[解決済み] jQueryとIntraweb?
-
[解決済み] jQueryの再帰性が高すぎる
-
[解決済み] jQuery resizableを画像と結合する方法は?