如何解决Uncaught ReferenceError: $ is not defined及jQuery Autocomplete异常？

错误原因分析 #

1. Uncaught ReferenceError: $ is not defined #

• 脚本标签写法错误：你把src属性写在了<script>标签的内部文本中，而非标签属性位置，导致浏览器无法正确加载jQuery库。
• 重复加载jQuery：同时引入了jquery.min.js和jquery.js，属于冗余操作，可能引发冲突。

2. uncaught typeerror: $(...).autocomplete is not a function #

Autocomplete是jQuery UI的专属组件，并非原生jQuery自带功能，你只加载了jQuery，缺少jQuery UI库的引用。

修复步骤 #

1. 修正脚本标签写法，确保src是标签属性，且仅加载一个版本的jQuery（推荐压缩版min.js）。
2. 添加jQuery UI的样式和脚本引用，确保组件功能和样式正常。
3. 严格遵循加载顺序：先加载jQuery，再加载jQuery UI样式，最后加载jQuery UI脚本和自定义代码。

修改后的完整代码 #

@model Assig1.ViewModel.CitiesViewModel

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

<head>
    <!-- 加载jQuery -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <!-- 加载jQuery UI样式 -->
    <link rel="stylesheet" href="~/lib/jquery-ui/jquery-ui.min.css">
    <!-- 加载jQuery UI脚本 -->
    <script src="~/lib/jquery-ui/jquery-ui.min.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>

额外注意事项 #

• 确认~/lib/jquery-ui/路径下存在jquery-ui.min.css和jquery-ui.min.js文件，若缺失需通过NuGet下载或手动放置对应文件。
• 若使用CDN加载资源，替换对应路径即可，仍需保证加载顺序正确。

内容的提问来源于stack exchange，提问作者softloftmaria