如何使用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示例？

回答

相关问题