Question

我正在学习bootstrap和spring mvc，我已经开始学习一些时间了。我试图在bootstrap3中实现一个typeahead。我正在关注这个例子 http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=typeahead-with-local-dataset

但它在我的机器上不起作用。我已经实现了一个spring mvc，这样当用户点击链接时，超链接会将它带到一个名为QueryBoard.html的页面，该页面被我的控制器拦截，它从db中获取一些字符串列表并作为模型传递给页面，我还没有实现如何在前端jsp页面上显示列表，

在此之前，我正在尝试使用简单的typeahead示例，但它不起作用。以下是我的代码。有人可以告诉我这里我做错了吗？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Typeahead</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script  type="text/javascript" src="/resources/core/js/typeahead.bundle.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('input.typeahead').typeahead({
            name: 'accounts',
            local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']
        });
    });
</script>
<style type="text/css">
    .bs-example{
        font-family: sans-serif;
        position: relative;
        margin: 100px;
    }
    .typeahead, .tt-query, .tt-hint {
        border: 2px solid #CCCCCC;
        border-radius: 8px;
        font-size: 24px;
        height: 30px;
        line-height: 30px;
        outline: medium none;
        padding: 8px 12px;
        width: 396px;
    }
    .typeahead {
        background-color: #FFFFFF;
    }
    .typeahead:focus {
        border: 2px solid #0097CF;
    }
    .tt-query {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    }
    .tt-hint {
        color: #999999;
    }
    .tt-dropdown-menu {
        background-color: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        margin-top: 12px;
        padding: 8px 0;
        width: 422px;
    }
    .tt-suggestion {
        font-size: 24px;
        line-height: 24px;
        padding: 3px 20px;
    }
    .tt-suggestion.tt-is-under-cursor {
        background-color: #0097CF;
        color: #FFFFFF;
    }
    .tt-suggestion p {
        margin: 0;
    }
</style>

<body>
<div class="bs-example">
    <h2>Type your favorite car name</h2>
<input type="text" class="typeahead tt-query" autocomplete="off"    spellcheck="false">
</div>
</body>
</html>

bootstrap type ahead spring mvc

0 个答案: