Bootstrap4环境下jQuery Autocomplete插件无法正常展示搜索结果

问题排查及解决方案 #

1. 资源加载顺序错误 #

当前代码中jQuery、jQuery UI的脚本引用放在了自动补全初始化代码的后方，导致执行初始化逻辑时相关依赖还未加载，功能无法正常生效。
需要调整资源加载顺序，正确顺序为：

• 先加载jQuery UI CSS文件
• 再加载jQuery核心脚本
• 再加载jQuery UI脚本
• 最后编写自动补全初始化业务代码

2. 后端返回数据格式不匹配 #

jQuery UI Autocomplete 对返回数据源有固定格式要求，仅支持两种合法格式：

• 字符串数组：["北京","上海","广州"]
• 包含label（前端显示文本）和value（输入框提交值）属性的对象数组：[{"label":"北京","value":1},{"label":"上海","value":2}]
  你当前直接返回City实体集合，包含id、CityName等多个无关字段，插件无法识别对应的显示字段，自然无法渲染结果。

3. 可选：样式冲突修复 #

如果调整前两项后仍看不到结果，大概率是Bootstrap4和jQuery UI的层级样式冲突，下拉框被其他元素遮挡，可手动追加样式调高下拉框层级。

修正后代码示例 #

前端代码

<!-- 先加载CSS -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- 再加载核心脚本 -->
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="SematYaShoghlBime" name="SematYaShoghlBime" />

<!-- 最后写业务逻辑 -->
<script>
    // 可选：修复层级冲突的样式
    $(`<style>.ui-autocomplete { z-index: 9999 !important; }</style>`).appendTo('head');

    $(document).ready(function () {
        $('#SematYaShoghlBime').autocomplete({
            source: '/Home/SearchInTaminJobs'
        });
    })
</script>

后端接口代码

[HttpGet]
public IActionResult SearchInTaminJobs()
{
    string term = HttpContext.Request.Query["term"].ToString();
    // 直接返回城市名的字符串数组，符合插件格式要求
    var query = _context.Citys.Where(Ad => Ad.CityName.Contains(term)).Select(c => c.CityName).ToList();
    return Ok(query);
}

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