如何使用typeahead示例？

我想用this例如使創建遵循HTML頁面：如何使用typeahead示例？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <script src="js/typeahead.bundle.js"></script> 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div id="the-basics"> 
    <input class="typeahead" type="text" placeholder="States of USA"> 
    </div> 
    <script type="text/javascript"> 
     var substringMatcher = function(strs) { 
    return function findMatches(q, cb) { 
    var matches, substrRegex; 

    // 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> 
    </body> 
</html>

而且從here和其他下載所有鏈接文件，typeahead.bundle.min.js，從官方網站的引導。但我得到了跟隨錯誤

Uncaught TypeError: Cannot read property 'isArray' of undefined 
Uncaught TypeError: undefined is not a function

請問你能幫我怎麼使用這個例子嗎？

來源

2015-01-17 Daniyal

你的問題是你加載JS庫的順序。

將

<script src="js/typeahead.bundle.js"></script>

無論是後

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

或之後

<script src="js/bootstrap.min.js"></script>

無論哪種方式應該解決您的問題。

來源

2015-01-17 15:17:32

非常感謝，你能告訴我爲什麼CSS不起作用嗎？現在我有一個簡單的文本框，而不是引導文本框。 – Daniyal

沒問題。引導程序的css文件是否在您的項目css文件夾中？ –

是的，但bootstrap.min.css中沒有typeahead類。我也嘗試從http://stackoverflow.com/questions/18059161/css-issue-on-twitter-typeahead-with-bootstrap-3複製typeahead類，但仍然無法正常工作。再次感謝... – Daniyal

如何使用typeahead示例？

回答

相關問題