14

私は自分の Web サイトの検索機能に取り組んでおり、Bootstrap の先行入力を使用して結果を表示しています。ここまでは順調ですね。しかし、私が望むのは、画像やその他のアイテム、説明などを追加できるように関数を拡張することです。この投稿によると、それは可能です: custom typeahead。

基本的に、各結果項目として次のようなものが必要です。

<div class="resultContainer">
  <div class="resultImage"><img /></div>
  <div class="resultDesc"></div>
  <div class="resultLabel"></div>
</div>

今は次のとおりです。

<li><a href="#"></a></li>

そして、これは先行入力の幅よりも長いテキストでは機能しません。そのため、テキストは次の行に移動しないため、<li>. 必要なカスタム レイアウトを使用するにはどうすればよいですか? (ところで、結果の配列の配列があります。各サブ配列には、img、desc などが含まれます)。これは私が今持っているものです： ここに画像の説明を入力

前もって感謝します。

4

3 に答える 3

12

highlighter次の方法を使用します。

$('.typeahead').typeahead({
    highlighter: function(item){
        return "<div>.......</div>";
    }
});

オートコンプリートの結果を強調表示するために使用されるメソッド。単一の引数項目を受け入れ、先行入力インスタンスのスコープを持ちます。html を返す必要があります。

于 2012-06-03T20:03:17.510 に答える
10

mgadda の回答は、レンダリング項目をカスタム データで拡張する方法の問題をきちんと解決します。残念ながら、アイテムが選択されると、このメタデータは使用できません。ブートストラップのselect()メソッドはupdater()、ロードされた文字列ではなく、DOM から取得した値であなたを呼び出すためです。

var val = this.$menu.find('.active').attr('data-value');

これを回避する 1 つの方法は、必要なメタデータを で DOM 要素に設定しhighlighter()、updater(). 整数のみが必要だったので、イメージ タグ自体に ID を設定し、アップデータで、まだ表示されているイメージ タグに基づいて ID を見つけます。

$('.your_textboxes').typeahead({
  highlighter: function(item) {
    return('<img src="' + item.friend.img + '" id="klid_' + item.friend.id + '" />' + item);
  },
  updater: function(val) {
    var klid = $('ul.typeahead li.active:visible a img');
    if (klid && klid.length) {
      klid = klid[0].id.substr(5);
      // do stuff with metadata...
    }
    return(val);
}

さらにメタデータが必要ですか? ハイライターをスパンでラップするか、非表示のフォーム フィールドをいくつか追加します。

しかし、これは不器用に感じます。誰かがよりクリーンなソリューションを持っている場合は、ぜひ見てみたいです。

于 2012-10-17T16:57:55.600 に答える
8

Typeaheadは、ソースコールバックからプロセスコールバックに渡されるすべてのものが文字列になることを想定しています。残念ながら、これは、文字列を大幅に変更することしかできないため、蛍光ペンのコールバックが生成できるHTMLの種類がいくらか制限されていることを意味します。

ただし、ソースメソッドを定義して、文字列オブジェクトの通常の配列を返すようにすることもできます。各オブジェクトには、蛍光ペンでHTMLを生成するために必要なすべてのデータを含む追加のデータプロパティがあります。

$('.typeahead').typeahead
  source: (query, processCallback)->
    $.get '/users', q: query, (data)->
      processCallback data.map (user)->
        item = new String("#{user.first_name} #{user.last_name}")
        item.data = user
        item

このフォームでitemは、typeaheadの内部を文字列として渡し、最終的にカスタムハイライターに到達したら、dataプロパティを使用してより複雑なhtmlを作成できます。

$('.typeahead').typeahead
  highlighter: (item)->
    "<img src=\"#{item.data.avatar_url}\" /> #{item}"
于 2012-09-17T22:53:25.007 に答える