如何在.Net MVC中实现带输入联想下拉选项的搜索栏

后端接口开发（C# 控制器部分） #

首先你需要在MVC项目中新增一个接口，用于接收前端输入的关键词，返回匹配的可选结果，示例代码如下：

// 这里可以替换为你项目中现有的控制器
public class HomeController : Controller
{
    // 模拟可选选项池，实际场景可替换为从数据库/缓存读取
    private static readonly List<string> AllSearchItems = new List<string>
    {
        "Apple", "Automotive", "Alphabet", "Banana", "Basketball", "Computer"
    };

    [HttpGet]
    public JsonResult GetMatchedItems(string keyword)
    {
        var result = new List<string>();
        if (!string.IsNullOrWhiteSpace(keyword))
        {
            // 如果你需要前缀匹配（输入Ap只返回Apple），保留当前写法即可；需要模糊匹配就把StartsWith改成Contains
            result = AllSearchItems
                .Where(item => item.StartsWith(keyword, StringComparison.OrdinalIgnoreCase))
                .ToList();
        }
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

前端视图代码（CSHTML部分） #

HTML结构 #

可直接嵌入你现有的MVC表单中：

<div style="position: relative; width: 320px;">
    <input type="text" id="searchInput" name="searchKeyword" class="form-control" placeholder="请输入搜索内容" />
    <!-- 下拉匹配选项容器，默认隐藏 -->
    <ul id="matchDropdown" style="display: none; position: absolute; top: 38px; left: 0; right: 0; background: #fff; border: 1px solid #eee; list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; z-index: 9999;"></ul>
</div>

JavaScript逻辑 #

原生JS实现，无需引入任何第三方库，自带防抖优化避免频繁请求：

const searchInput = document.getElementById('searchInput');
const matchDropdown = document.getElementById('matchDropdown');

// 防抖函数，300ms内连续输入只触发一次请求，可自行调整延迟时长
function debounce(fn, delay = 300) {
    let timer = null;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    }
}

// 监听输入事件
searchInput.addEventListener('input', debounce(async function() {
    const keyword = this.value.trim();
    // 输入为空时隐藏下拉框
    if (!keyword) {
        matchDropdown.style.display = 'none';
        matchDropdown.innerHTML = '';
        return;
    }

    // 请求后端获取匹配结果
    const res = await fetch(`/Home/GetMatchedItems?keyword=${encodeURIComponent(keyword)}`);
    const matchedItems = await res.json();

    matchDropdown.innerHTML = '';
    if (matchedItems.length === 0) {
        matchDropdown.style.display = 'none';
        return;
    }

    // 渲染匹配选项
    matchedItems.forEach(item => {
        const li = document.createElement('li');
        li.innerText = item;
        li.style.padding = '8px 12px';
        li.style.cursor = 'pointer';
        // 鼠标hover高亮
        li.addEventListener('mouseenter', () => li.style.backgroundColor = '#f5f5f5');
        li.addEventListener('mouseleave', () => li.style.backgroundColor = '#fff');
        // 点击选项填充到输入框
        li.addEventListener('click', () => {
            searchInput.value = item;
            matchDropdown.style.display = 'none';
        });
        matchDropdown.appendChild(li);
    });

    matchDropdown.style.display = 'block';
}));

// 点击页面其他区域关闭下拉框
document.addEventListener('click', e => {
    if (!searchInput.contains(e.target) && !matchDropdown.contains(e.target)) {
        matchDropdown.style.display = 'none';
    }
});

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