如何将自动完成（使用AJAX）添加到我现有的搜索文本框

Question

如何使用绑定到数据源（包含表课程的表）的AJAX进行自动完成的文本框？当前，文本框返回搜索的“课程”名称。

我在_layout.cshtml文件中有这个。

<form class="form-inline my-2 my-lg-0" asp-controller="Courses" asp-action="Filter" style="padding-right: 25px;">
                        <input name="searchString" type="text" class="form-control" placeholder="Search for a course...">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="bi bi-search"></i></button>
                    </form>

我在我的coursescontroller.cs文件中有这个。

[AllowAnonymous]
        public async Task<IActionResult> Filter(string searchString)
        {
            var allCourses = await _service.GetAllAsync(n => n.Difficulty);

            if (!string.IsNullOrEmpty(searchString))
            {
                var filteredResult = allCourses.Where(n => n.Name.ToLower().Contains(searchString.ToLower()) || n.Description.ToLower().Contains(searchString.ToLower())).ToList();
                return View("Index", filteredResult);
            }

            return View("Index", allCourses);
        }

在此先感谢您的任何帮助！

Answer 1

使用AJAX意味着您将调用API以在后台获取数据，这意味着当您的页面满载时，您将执行呼叫的后端来获取课程列表。

假设您在用户单击按钮（或您感兴趣的任何事件）时使用jQuery，

<button id="searchBtn" type="button">Search</button>

我们将调用一种致电给您的后端的方法：

$("#searchBtn").click(function(){
    // load the data when the button is clicked
    loadData();
}); 

function loadData() {
    $.ajax({
        url: '@Url.Action("GetCourses", "Courses")',
        type: "GET",
        data: {
            // get the value from your input with id = "search-query"
            searchQuery: $("#search-query").val()
        },
        success: function (result) {
            // here you have your data
            // so now you can render the result to your list or table
           console.log(result);
        },
        error: function (error) {
            // here something went wrong
           console.log(error);
        },
    });
}

在您的CoursesController上，您将拥有一种将课程返回为课程的方法JSON结果。 （假设您有用于访问数据的实体框架）

[AllowAnonymous]
[HttpGet]
public async Task<JsonResult> GetCoursesAsync(string searchQuery)
{
    var query = _dbContext.Courses.AsQueryable();

    if (!string.IsNullOrEmpty(searchQuery))
    {
        query = query.Where(c => 
                c.Name.Contains(searchQuery) ||
                c.Description.Contains(searchQuery)
        );
    }

    // load the courses
    var courses = await query.ToArrayAsync();

    // return the data as json result
    return new JsonResult(courses);
}