jquery 如何解决Uncaught ReferenceError:$没有定义?

uqxowvwt  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(146)

我尝试使用jQuery自动完成功能,但我一直得到Uncaught ReferenceError:$没有定义。我已经做了研究,并尝试了各种各样的东西,但它真的不想工作。
我还得到了未捕获的类型错误:$(...).autocomplete也不是函数错误。
我正在使用我的wwwroot文件夹中的JQuery库,因为我已经安装了它。我试过删除它,然后使用脚本链接在线,但它似乎不工作,在所有为我:

我的代码:

@model Assig1.ViewModel.CitiesViewModel

@{
    ViewData["Title"] = "Index";
}

<head>
    <script>src= "~/lib/jquery/dist/jquery.min.js"</script>
    <script> src="~/lib/jquery/dist/jquery.js"</script>
</head>

<h1 class="alert-secondary p-2 text-center mb-3">Cities</h1>

@if (Model.RegionID != 0)
{
 <p>
    <a class="btn btn-success" asp-controller="Countries" asp-action="Index" asp-route-id="@Model.RegionID">Return Back to Countries</a>
    </p>

}
else
{
    <p>
        <a class="btn btn-success" asp-controller="Countries" asp-action="Index">Return Back to Countries</a>
    </p>
}

<form asp-controller="Cities" asp-action="Index">
<div class="row mb-3">
    <div class="col-3">
        <input type="text" id="SearchText" asp-for="SearchText" class="form-control" placeholder="City Name Search" title="Search Cities by Name" />
    </div>
    <div class="col-3">
        <button type="submit" class="btn btn-primary">Search</button>
    </div>
</div>
</form>

@if(Model.CityList.Count() > 0) {

<table class="table">
    <thead>
        <tr>
            <th>
                City Name
            </th>
            <th>
                Country
            </th>
            <th>
                Region
            </th>
            <th>
                Air Quality Data
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>

@foreach (var item in Model.CityList) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.CityName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Country.CountryName)
                <br>
                <br>
                <img src="@Html.DisplayFor(modelItem => item.Country.ImageUrl)" class="card-img-top" alt="@Html.DisplayFor(modelItem => item.Country.CountryName)" width="50" height="200" alt="@item.CityName" />
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Country.Region.RegionName)
            </td>
            <td>
                Total Records: @Html.DisplayFor(model => model.AirRecordCount)
                <br>
                <br>
                Earliest Year: @Html.DisplayFor(model => model.EarliestYear)
                <br>
                <br>
                Latest Year: @Html.DisplayFor(model => model.LatestYear)
                <br>
                <br>
                <a class="btn btn-success" asp-action="Detail" asp-route-id="@item.CityId" asp-route-countryID="@item.CountryId" asp-route-cityID="@item.CityId">Air Quality Data</a> 
            </td>
        </tr>
}
    </tbody>
</table>
}
else {

    <div class="alert alert-danger text-dark text-center" >
        <h5>Sorry, no Cities found!</h5>
    </div>
}

<script type="text/javascript">

    var cityNames = [];

    @foreach (var city in Model.CityList)
    {
        <text>
            cityNames.push("@city.CityName");
        </text>
    }

    $(function () {
        $("#SearchText").autocomplete({
            source: cityNames
        });
    });

</script>

谢谢你,谢谢!

au9on6nz

au9on6nz1#

在script标记中使用src
假设你的系统中下载了jquery

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script  src="~/lib/jquery/dist/jquery.js"></script>

您也可以使用cdn for jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js" integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

您可以选择jquery库版本click here

lnxxn5zx

lnxxn5zx2#

首先,AutoComplete.js也需要jquery-ui.js
其次,如果你使用的是Layout,请检查你的Layout.cshtml,确定没有jquery.js引用,然后你才可以在Index.cshtml中添加引用:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

如果您使用布局并且不想删除Layout.cshtml中的默认jquery.js引用,则需要在@section Scripts{}中添加引用:

@section Scripts
{
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
        //.........
        $(function () {
            $("#SearchText").autocomplete({
                source: cityNames
            });
        });
    </script>
}

相关问题