Question

在我的项目中，typeahead.js会出错：

未捕获的TypeError：$（...）。typeahead不是函数

PHP

<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, 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>
</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

<?php
mysql_connect('localhost','username','pass');
mysql_select_db("database");
$key=$_GET['key'];
$array = array();
$query=mysql_query("select com_name from company_details where com_name LIKE '%{$key}%'");
while($row=mysql_fetch_assoc($query))
{
  $array[] = $row['com_name'];
}
echo json_encode($array);
?>

我试图将我的$(document).ready放在另一个地方，但它发出以下错误：

请帮帮我。

Answer 1

它与数据量无关，但与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>
  // ...

Answer 2

实际上，由于数据库较大，这不是问题。您的脚本文件未在行中提取

＆＃13;

<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>

＆＃13;

要清除该问题，您必须为此脚本文件提供确切的路径 typeahead.js ，或用

替换该脚本行

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/3.1.1/bootstrap3-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>

＆＃13;

Answer 3

Bootstrap Typeahead是Bootstrap plugin。为此，首先加载bootstrap是必不可少的。另外，请确保Bootstrap和jQuery仅在任何相关代码的顶部加载。

加载插件实例后，Bootstrap或jQuery的所有新实例都会覆盖插件方法。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/3.1.1/bootstrap3-typeahead.js"></script>

具有大型数据库的Typeahead.js提供Uncaught TypeError：$（...）。typeahead不是函数

3 个答案: