☰

Typeahead.js 0.10 の使い方（ステップバイステップ / リモート / プリフェッチ / ローカル） 質問する

tag-icon • tag-icon javascript json twitter-typeahead
Typeahead.js 0.10 の使い方（ステップバイステップ / リモート / プリフェッチ / ローカル） 質問する
  • Twitter Typeahead の POST

私は、ローカル、リモート、およびフェッチされたデータを使用するために、/manage typeahead.js 0.10 を使用する方法を理解し、明確に把握しようと 2 日間取り組んできました。

正直なところ、Bloodhound エンジンは私にとっては明確ではなく、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>

ベストアンサー1

私は数日かけてこれを自分で動作させようとしましたが、直感的ではないことに完全に同意します。特に、Bloodhound に関する先行入力ページで、私がどんなに試しても動作しなかったことが 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()
    }

おすすめ記事