在我的项目中,typeahead.js给出错误:
Uncaught TypeError: $(…).typeahead is not a function
- <html>
- <head>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
- <script src="public/js/typeahead.js"></script>
- <script>
- jQuery(document).ready(function() {
- var offset = 250;
- var duration = 300;
- jQuery(window).scroll(function() {
- if (jQuery(this).scrollTop() > offset) {
- jQuery('.back-to-top').fadeIn(duration);
- } else {
- jQuery('.back-to-top').fadeOut(duration);
- }
- });
- jQuery('.back-to-top').click(function(event) {
- event.preventDefault();
- jQuery('html,body').animate({scrollTop: 0},duration);
- return false;
- });
- $('input.search').typeahead({
- name: 'companyName',remote:'ser_sug.PHP?key=%QUERY',limit : 10
- });
- });
- </script>
- <style type="text/css">
- .bs-example{
- font-family: sans-serif;
- position: relative;
- margin: 50px;
- }
- .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.075) inset;
- }
- .tt-hint {
- color: #999999;
- }
- .tt-dropdown-menu {
- background-color: #FFFFFF;
- border: 1px solid rgba(0,0.2);
- border-radius: 8px;
- Box-shadow: 0 5px 10px rgba(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>
- </head>
- <div class="col-lg-3 cd-row">
- <div class="heading" style="padding:0;margin:0;border:none;">
- <h3 class="advSearchHeading" style="color:#fff;">Search Ceramic</h3>
- </div>
- <form role="form" class="advSearchForm" action="<?PHP echo SLASHES;?>search/" method="get" style="overflow:hidden;">
- <div class="form-group">
- <input name="companyName" type="text" value="" placeholder="Company name" class="search" id="searchid">
- </div>
- <div class="form-group">
- <select name="category" class="form-control">
- <option selected value="">Select Category</option>
- <?PHP
- $categoryResult = MysqL_query("SELECT * FROM `category` where flag = 1 order by `sequence`");
- while($categoryRow = MysqL_fetch_assoc($categoryResult))
- echo '<option value="'.$categoryRow['cid'].'">'.$categoryRow['cat_name'].'</option>';
- ?>
- </select>
- </div>
- <div class="form-group">
- <select name="productSize" id="productSize" class="form-control">
- <option selected value="">Select Size(CentiMeter)</option>
- <?PHP
- $sizeResult = MysqL_query("SELECT * FROM sizes ORDER BY sequence");
- while($sizeRow = MysqL_fetch_assoc($sizeResult))
- echo '<option value="'.$sizeRow['id'].'">'.$sizeRow['inch'].'</option>';
- ?>
- </select>
- </div>
- <div class="form-group">
- <input name="location" type="text" value="" placeholder="Addr / city / state / country / pin" class="form-control">
- </div>
- <button type="submit" class="btn btn-default pull-right" style="font-weight: bold; font-size: 12px;">Search</button>
- </form>
- </div>
- </div>
sur_sug.PHP
我试图把我的$(文档).ready在一个不同的地方,但它给出以下错误:
请帮帮我.
解决方法
它与数据量无关,但是没有找到public / js / typeahead.js
将其更改为/js/typeahead.js,它将正常工作
- <html>
- <head>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
- <script src="/js/typeahead.js"></script>
- <script>
- // ...