twitterブートストラップtypeahead ajaxの例


280

私はそれをドロップダウンに入力するためにajax呼び出しを行うtwitterブートストラップtypeahead要素の実用的な例を見つけようとしています。

私は既存のjqueryオートコンプリートの作業例を持っていますが、これはajax urlを定義し、返信を処理する方法を定義しています

<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];
                }
            );
       ..

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


より具体的には、オートコンプリートオプションと結果処理機能がどのようにtextaheadオプションにマッピングされるのかと思いますか?オーバーライドできる定義済みのテキストアラート結果処理関数のセットはありますか、または名前付きメソッドは、基礎となるjquery APIから継承されます。
emeraldjava

1
Stijn Van Baelの答えを正しいものとしてマークできますか?bogertの回答は、古いバージョンのBootstrapでのみ機能します。
Giles Roberts

回答:


302

編集: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として認識します。


3
Typeaheadフォークと同様に、データは文字列のJSON配列であり、コンテンツタイプはapplication / jsonである必要があります。
Stijn Van Bael 2012

9
2.1は単なる文字列配列ではないjsonを使用できますか?ユーザーに値を設定し、IDを使用してさらに処理を行う必要があります。カスタムフォークを拾わずにそれは可能ですか?
アントン

2
@Stijin匿名オプションを使用して、表示されたオプションのIDを処理する方法の例はありますか?ありがとう!
アサイラ2013

1
このメソッドを使用すると、入力のすべてのキーストロークに対してAJAXが呼び出されるということを指摘しておきます。サーバーが本質的に静的なデータを返している場合(つまり、クエリに対して実際には何も実行していない場合)、これは非常に無駄になります。
Dologan 2013

2
get代わりになぜ使用するのgetJSONですか?より適切なようです。
greg0ire 2013年

119

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

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

1
たとえば、を返すと、POSTデータの戻り値の型に対するjQueryの「インテリジェントな推測」が機能しませんでした["aardvark", "apple"]。呼び出しでdataTypeパラメーターを明示的に設定する$.post必要がありました。jQuery.post()を参照してください。
Rusty Fausak 2012年

1
@rfausakあるいは、Content-typeヘッダーをapplication/json
Rusty Fausak

23
Uncaught TypeErrorが発生する:undefinedのメソッド 'toLowerCase'を呼び出せません
Varma

送信したリンクでは、source関数を実行することすらできません。
ジェームズ

8
素敵な答え!REST標準を満たすために、代わりにGETリクエストを使用します。
マウロ

72

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」リンクを配置して、統一されたコードを作成できます。


11
しかし、使用するように変更します$(this)[0].$element.data('link')
アンドリューエリス

またはthis.$element.data('link')
Richard87 '21

51

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

新しいポストブートストラップTwitterのtypeahead.jsを使用してAJAXの例を探している他の人のために、ここに実際の例があります。構文は少し異なります:

$('#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への呼び出し)と非同期の提案の両方を使用しているため、一部のオプションがすぐに表示され、他のオプションが追加されます。どちらか一方を使用できます。

多くのバインド可能なイベントと、文字列ではなくオブジェクトの操作を含むいくつかの非常に強力なオプションがあります。この場合、独自のカスタム表示関数を使用して、アイテムをテキストとしてレンダリングします。


1
ありがとうございました。もう1つの質問:processAsyncを使用すると、「TypeError:提案。スライスは関数ではありません」と表示されます。返されるJSONもどのように見える必要がありますか?これが私の推測です:{:suggestions => ["Thing 1"、 "Thing 2"、 "Thing 3"]}
user1515295

1
有効なJSON文字列を返すようにしてください。あなたのAJAXの提案機能は、例えば、文字列の配列を返す必要があります["Thing 1","Thing 2"]例えば、あなたのニーズに応じて、またはカスタム表示機能を持つオブジェクトの配列を[{"id":1,"label":"Foo"},{"id":2,"label":"Bar"}]
ジョナサンLidbeck

を返し[{"id":1,"label":"Foo"},{"id":2,"label":"Bar"}]ます。今度は、IDとラベルが付いた先行入力ドロップダウンに2つの列を表示します。どうやってやるの?
Vishal 2017

2
我が神よ!!!私は過去3日間からこのことについて誰も言及していませんでした。今まで同期機能でテストしてました。ありがとう、相棒!!
Gilson PJ

よろしくお願いします!ブートストラップ4.3とjquery 3.4でうまく動作します。ただし、リストされたオプションは、マウスをその上に置いたときに強調表示されません。それはタイプアヘッド自体の一部であるはずだと思いました。
Binita Bharati

25

元のtypeahead Bootstrapプラグインにajax機能を追加しました。非常に使いやすい:

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

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


Gudbergurのコードを見てきました。率直に言って、私はこれが一番好きでした。それはもう少しフレンドリーで、より多くの機能を提供します。よくやったポール!私が提案する唯一のことは、コードを正しく使用できるようにするために、JSONデータをJSに解析する必要があることをREADMEでユーザーに思い出させることです。あなたが私のためにそれを解析していたので、少しハングアップしたと思います。それ以外の場合は、かなりいい、ありがとう!:)
ベイン

3
サーバーがJSONオブジェクトの代わりに文字列を返します。jQueryの$ .ajax()を使用して呼び出しを行い、解析を行います。
ポールワレリス

1
絶対に正しい、キャッチをありがとう!:)このプラグインは非常にうまく機能します。
ベイン

こんにちは、サーバー側はJSONどのように見えるべきですか?私は得ていUncaught TypeError: Cannot read property 'length' of undefined ます。json_encode($array)正しいヘッダーを使用して送信しています('Content-Type: application/json; charset=utf-8')。jqueryバージョンjQuery v1.9.1
Kyslik 2013

5

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;        
}

完璧に動作します。


どのバージョンのjquery ui minを使用していますか?
emeraldjava 2012

jQuery 1.7.1およびjQuery UI 1.8.16でこれが必要な場合は、jQuery UIファイルを変更する場所を示す上記の修正に基づいて、GISTを作成しました。gist.github.com/1884819-行に// modified
Richard Hollis

これはかなり古い質問/回答ですが、サードパーティのコンポーネントコードを変更することは常に悪い習慣であることを言いたいだけです。アップグレードするたびに、すべての変更を再確認する必要があります。この特定のケースでは、jQueryウィジェットを継承できます。これは、ウィジェットをカスタマイズするためのより安全な方法です。基本的に、独自のウィジェットを作成し、コアウィジェット(この場合はオートコンプリート)を継承して、想像力を解き放ちます!:)
AlexCode 2014

3

この方法を使用しています

$('.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');
    }
});

回答に説明を付けていただければ幸いです。たとえば、既存の回答で提示されているソリューションと比較した場合のソリューションの違いは何ですか?
クラクション

2

Bootstrapを使用して通話を発信できます。現在のバージョンにはソース更新の問題はありません。Bootstrapのtypeahead data-sourceをpost response更新する際に問題が 発生しました。つまり、更新されたブートストラップのソースは再度変更できます。

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

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

受け入れられた答えのコーヒースクリプトバージョンを探している人へ:

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

2

私はこの投稿を通過しましたが、すべてが正しく動作することを望んでおらず、最終的にいくつかの回答からビットをつなぎ合わせたので、100%動作するデモがあり、参照用にここに貼り付けます-これをphpファイルに貼り付け、インクルードが含まれていることを確認してください適切な場所。

<?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

サービスが適切な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

更新:このフォークを使用してコードを変更しました

また、$。eachを使用する代わりに、Tomislav Markovskiの提案に従って$ .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) {

    }
});

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

Uncaught TypeError:undefinedのメソッド 'toLowerCase'を呼び出せません

あなたが新しい投稿で見ることができるように、私はここで理解しようとしています

この更新があなたの助けになることを願っています...


OPとは無関係:Array.map代わりに使用$.eachして、successコールバック関数全体の内容を次のものに置き換えますvar manufacturers = results.data.manufacturers.map(function (item) { return { id: item.Manufacturer.id, manufacturer: item.Manufacturer.manufacturer } });
Tomislav Markovski

@TomislavMarkovskiありがとうございます。
mmoscosa 2012年

0

実例はありませんし、非常に簡潔な解決策もありませんが、私が見つけたものを教えてください。

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

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

このコードは、jQueryの「grep」メソッドを使用して、ソース配列の要素を照合します。AJAX呼び出しでフックできる場所は見当たらないため、これに対する「クリーン」な解決策はありません。

ただし、これを行うためのややハックな方法の1つは、jQueryでgrepメソッドが機能する方法を利用することです。grepの最初の引数はソース配列で、2番目の引数はソース配列を照合するために使用される関数です(Bootstrapが初期化時に指定した「マッチャー」を呼び出すことに注意してください)。あなたができることは、ソースをダミーの1要素配列に設定し、AJAX呼び出しを含む関数としてマッチャーを定義することです。このようにして、AJAX呼び出しを1回だけ実行します(ソース配列には要素が1つしかないため)。

TypeAheadコードはすべてのキーを押すたびにルックアップを行うように設計されているため、このソリューションはハックであるだけでなく、パフォーマンスの問題に悩まされます(AJAX呼び出しは、実際には数回のキーストロークごと、または特定のアイドル時間後にのみ発生します)。私のアドバイスは、試してみることですが、問題が発生した場合は、別のオートコンプリートライブラリを使用するか、AJAX以外の状況でのみ使用してください。


0

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

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


0

私は$().one() これを解決するために使用します。ページがロードされると、ajaxをサーバーに送信して、完了するまで待機します。次に、結果を関数に渡します。$().one()typehead.jsを強制に入力に1回アタッチするためです。悪い書き込みのため申し訳ありません。

(($) => {
    
    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 ?">


-1
 $('#runnerquery').typeahead({
        source: function (query, result) {
            $.ajax({
                url: "db.php",
                data: 'query=' + query,            
                dataType: "json",
                type: "POST",
                success: function (data) {
                    result($.map(data, function (item) {
                        return item;
                    }));
                }
            });
        },
        updater: function (item) {
        //selectedState = map[item].stateCode;

       // Here u can obtain the selected suggestion from the list


        alert(item);
            }

    }); 

 //Db.php file
<?php       
$keyword = strval($_POST['query']);
$search_param = "{$keyword}%";
$conn =new mysqli('localhost', 'root', '' , 'TableName');

$sql = $conn->prepare("SELECT * FROM TableName WHERE name LIKE ?");
$sql->bind_param("s",$search_param);            
$sql->execute();
$result = $sql->get_result();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
    $Resut[] = $row["name"];
    }
    echo json_encode($Result);
}
$conn->close();

?>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.