问题描述:
使用bootstrap 3 的 typeahead 3 做搜索下拉提示,中间出现如:"TypeError: $(...).typeahead is not a function"
实现搜索输入自动提示下拉过程:
css:
<link href="./resources/app/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="./resources/app/bootstrap/css/navbar-fixed-top.css" rel="stylesheet">
js:
<script src="./resources/app/bootstrap/js/jquery-1.10.2.min.js"></script>
<script src="./resources/app/bootstrap/js/bootstrap.min.js"></script>
<!-- 搜索提示插件,必须放在 jquery-1.10.2.min.js, bootstrap.min.js 之后,要不然会报错 "TypeError: $(...).typeahead is not a function" -->
<script type="text/javascript" src="./resources/app/bootstrap/assets/js/bootstrap3-typeahead.js"></script>
脚本结构图:
html:
//搜索框
<form action="app_web.do?method=getMainList" method="post"
class="navbar-form navbar-right" role="form">
<div class="input-group">
<input type="text" class="form-control" name="search" id="temp" data-provide="typeahead" autocomplete="off" placeholder="输入问题搜索" >
<span class="input-group-btn">
<button class="btn btn-default" type="submit">搜索</button>
</span>
</div>
</form>
//绑定搜索框搜索事件脚本
<script type="text/javascript">
$(document).ready(function() {
$("#temp").typeahead({
source: function (query, process) {
return $.ajax({
url: 'bzsearch.do?method=prompt_keyword',//后台访问ajax地址
type: 'post',
data: {keyword: query},//后后参数名称
success: function (result) {
return process(result);
},
});
}
});
});
</script>
效果图: