如何使用Typeahead.js 0.10一步一步/遠程/預取/本地

POST Twitter並事先鍵入的內容

我一直在爲目前2天后，試圖理解並具有清晰的畫面如何使用/管理typeahead.js 0.10以使用本地，遠程和獲取的數據。如何使用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>

來源

2014-02-11 crowdfun

我不喜歡預輸入，所以儘量使用http://brianreavis.github.io/ selectize.js /我覺得更容易和豐富的圖書館 –

爲什麼不顯示你已經嘗試過？ – Will

首先，將您的顯示鍵從num更改爲結構中的字段，例如名稱。第二。將'prefetch'改爲'remote'。不知道爲什麼第二個更改適用於我，但是當我像你一樣嘗試時，預取會被破壞。 – crafter

我只是花了一些時間試圖讓這個工作我自己，我完全同意它不直觀。特別是在關於血獵犬的類型頁面上有一件事，因爲我可能只是沒有工作。例如，以下行：

datumTokenizer：Bloodhound.tokenizers.obj.whitespace（'value'） - 總是會產生錯誤，因爲obj不存在。

對於datumTokenizer使用以下形式（其中「DisplayText」是你對象的屬性，它包含將要顯示的文本名稱）：

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

，並記住當你創建預輸入集將displayKey設置爲您的集合中包含要顯示的文本數據的屬性的名稱。對我來說，這是始終不變的，因爲我想來標記屬性 - 所以我的預輸入語句看起來像下面這樣：

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

來源

2014-06-26 04:08:41 MarkM

變化：

源：products.ttAdapter（）

來源

2014-05-15 13:31:45 JeppePepp

如何使用Typeahead.js 0.10一步一步/遠程/預取/本地

回答

相關問題