無法獲得typeahead.js基本示例工作

我正在從http://twitter.github.io/typeahead.js/examples/ 複製'The Basics'示例，無法使其在純HTML頁面中工作。無法獲得typeahead.js基本示例工作

事實上，我已經嘗試了很多來自網絡的代碼示例，但似乎沒有任何工作。這讓我覺得我正在使用不正確的腳本庫版本（請參閱下文）。

這裏是我的代碼的「基礎知識」例如：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" /> 
    <script src="bootstrap.min.js" /> 
    <script src="typeahead.js" /> 

    <script> 

     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)) { 
         // the typeahead jQuery plugin expects suggestions to a 
         // JavaScript object, refer to typeahead docs for more info 
         matches.push({ value: str }); 
        } 
       }); 

       cb(matches); 
      }; 
     }; 

     var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 
      'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 
      'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 
      'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 
      'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 
      'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 
      'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 
      'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 
      'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' 
      ]; 

     $('#the-basics .typeahead').typeahead({ 
      hint: true, 
      highlight: true, 
      minLength: 1 
     }, 
     { 
      name: 'states', 
      displayKey: 'value', 
      source: substringMatcher(states) 
     }); 

</script> 
</head> 

<body> 

    <div id="the-basics"> 
     <input class="typeahead" type="text" placeholder="States of USA"> 
    </div> 

</body> 
</html>

當我運行上面的，當我在文本框中鍵入什麼也沒有發生。

我有我的腳本引用是否正確？正如你所看到的，我引用了jQuery的v1.11.0。我的本地版本的bootstrap.min.js是v3.1.1。我typeahead.js的本地版本是0.10.2

我已經在IE9和Chrome 22.x暫時

非常感謝您的幫助試過。

馬丁

來源

2014-03-28 Martin

那麼你是如何解決...？ – headkit

腳本塊的第一行（以及示例中）缺少以下內容。我的jQuery不太好！ $（document）.ready（function（）{ – Martin

以下第一行從腳本塊（以及示例中）丟失。我的jQuery不太好！

<script> 

    $(document).ready(function() { 

    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)) { 
        // the typeahead jQuery plugin expects suggestions to a 
        // JavaScript object, refer to typeahead docs for more info 
        matches.push({ value: str }); 
       } 
      }); 

      cb(matches); 
     }; 
    }; 

    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 
     'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 
     'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 
     'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 
     'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 
     'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 
     'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 
     'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 
     'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' 
     ]; 

    $('#the-basics .typeahead').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 1 
    }, 
    { 
     name: 'states', 
     displayKey: 'value', 
     source: substringMatcher(states) 
    }); 
}

來源

2014-04-15 13:42:32 Martin

我創建了一個jsfiddle從cdnjs使用typeahed，似乎工作。我知道有一個較舊的版本，但是這個版本是0.10.2，正如你所說的那樣。

//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/typeahead.bundle.min.js

來源

2014-03-28 11:34:41

無法獲得typeahead.js基本示例工作

回答

相關問題