web-dev-qa-db-ja.com

Typeahead.js 0.10の使用方法ステップバイステップ/リモート/プリフェッチ/ローカル

  • Twitter TypeaheadのPOST

ローカル、リモート、およびフェッチされたデータを使用するために/ manage typeahead.js 0.10を使用する方法を理解し、明確に把握しようとしています。

正直なところ、ブラッドハウンドエンジンは明確ではなく、jsonオブジェクトと配列の操作/アクセス方法に関する詳細な情報はまだ疑問符です。

ローカルの例を動作させることはできますが、プリフェッチまたはリモートオプションを使用しようとすると、いくつかのティックに加えて、動作させることができません。

この投稿での私の目標は、単に私の問題に対する答えを得ることではなく、それについて完全な知識を持ち、非常に簡単な方法でステップバイステップを説明できる人を見つけることです（例/ jsfiddles-実際に何が解析されているかを知るためのjsonの例）.

多くの人がそれを理解することを楽しみにしており、これは大きな貢献になると思います（他の詳細な記事が存在するように）。

これは大変な作業だと思います。

あなたの貢献者に事前に感謝します。

以下の提案に従ってください。私の簡単な例。

JSONファイル

   [
    {   "name": "Pink Floyd",
        "Album": "The Best Of Pink Floyd: A Foot In The Door",
        "Label": "EMI UK",
        "Tracks":"Hey You, See Emily Play, The Happiest Days Of Our Lives, Another Brick in The Wall (Part 2), Have a cigar, Wish You Where Here, Time, The Great Gig in the Sky, Money, Comfortably Numb, High Hopes, Learning to Fly, The Fletcher Memorial Home, Shine On You Crazy Diamond, Brain Damage, Eclipse" ,
        "Price": "16.40",
        "Genre": "Rock"

    },
    {
        "name": "Depeche Mode",
        "Album": "A Question Of Time",
        "Label": "Mute",
        "Tracks":"A Question Of Time, Black Celebration, Something To Do, Stripped, More Than A Party, A Question Of Time(extended), Black Celebration" ,
        "Price": "4.68" ,
        "Genre": "Rock"
    },
    {
        "name": "Placebo",
        "Album": "Street Halo/Kindred",
        "Label": "Hyperdub Japan",
        "Tracks":"Street Halo, NYC, Stolen Dog, Kindred, Loner, Ashtray Wasp" ,
        "Price": "14.06",
        "Genre": "Future Garage"

    }
  ]

先行入力スクリプト

  <script>

  var products = new Bloodhound({
    datumTokenizer: function(d) {return d.name; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'http://localhost/dh/js/products.json'


  });


  products.initialize();

  $('.test1').typeahead({
    highlight: true
  },
  {
    name: 'products',
    displayKey: 'num',
    source: states.ttAdapter()

  });

  </script>

HTML

   <script type="text/javascript" src="http://localhost/dh/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/bootstrap.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"></script>

<div class="search_content">
    <input class="test1" type="text" placeholder="product">
</div>
javascriptjsontwitter-typeahead
48
Caramba

私はこれを自分の仕事にしようと数日を費やしましたが、直感的ではないことに完全に同意します。特に、Bloodhoundについてのtypeaheadページには、うまくいかなかったかもしれないので試してみることが1つありました。たとえば、次の行：

datumTokenizer：Bloodhound.tokenizers.obj.whitespace（ 'value'）-objが存在しなかったため、常にエラーが発生しました。

DatumTokenizerの場合、次のフォームを使用します（「DisplayText」は、表示されるテキストを含むオブジェクトのプロパティの名前です）。

function (d) {
            return Bloodhound.tokenizers.whitespace(d.DisplayText);
        }

typeaheadを作成するときに、displayKeyを、表示するテキストデータが含まれるコレクション内のプロパティの名前に設定することを忘れないでください。私にとって、これは常にトークン化するプロパティと同じでした。したがって、私のtypeaheadステートメントは次のようになりました。

$('#my-typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 3
        },
    {
        name: 'someName',
        displayKey: 'DisplayText',
        source: myBloodhound.ttAdapter()
    }
14
MarkM

への変更：

ソース：products.ttAdapter（）

3
JeppePepp