<!-- View中的搜索框 -->
<input type="text" id="searchBox" placeholder="输入搜索内容..." />
<div id="searchResults"></div>

<script>
$(document).ready(function() {
    $('#searchBox').on('input', function() {
        var searchTerm = $(this).val();
        
        if(searchTerm.length >= 2) { // 至少输入2个字符才搜索
            $.ajax({
                url: '@Url.Action("Search", "Home")',
                type: 'GET',
                data: { term: searchTerm },
                success: function(result) {
                    $('#searchResults').html(result);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        } else {
            $('#searchResults').empty();
        }
    });
});
</script>

public class HomeController : Controller
{
    public ActionResult Search(string term)
    {
        // 这里模拟数据库查询
        var results = _dbContext.Products
            .Where(p => p.Name.Contains(term))
            .Take(10)
            .ToList();
            
        return PartialView("_SearchResults", results);
    }
}

@model IEnumerable<Product>

@if(Model.Any())
{
    <ul>
    @foreach(var product in Model)
    {
        <li>@product.Name - @product.Price.ToString("C")</li>
    }
    </ul>
}
else
{
    <p>没有找到匹配的结果</p>
}

var timer;
$('#searchBox').on('input', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        // AJAX调用代码
    }, 300); // 300毫秒延迟
});

config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

var currentRequest = null;
$('#searchBox').on('input', function() {
    if(currentRequest != null) {
        currentRequest.abort();
    }
    
    currentRequest = $.ajax({
        // AJAX配置
        complete: function() {
            currentRequest = null;
        }
    });
});