jquery - Asp.Net Core 3.1-用Ajax搜索一个短语并建议5个相似的短语？

Question

我有一个搜索输入框，我希望每次用户搜索一个短语时显示 5 个相似的短语？

例如：如果用户搜索“ram”...将以下单词系统返回给我并显示它 ram 4 ram 8 ram 16 rampal ...

你会建议什么最好的方法？

标签： jqueryajaxasp.net-core

Answer 1

我建议你可以在 jQuery UI 中使用 Autocomplete 插件。这是您可以遵循的简单演示：

模型：

public class Test
{
   public int Id { get; set; }
   public string Name { get; set; }
}

查看（索引.cshtml）：

<input type="text" id="tags" />
@section Scripts{
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {            
            $("#tags").autocomplete({
                source: '/Home/Test'                  
            });
        });
    </script>
}

控制器：

public class HomeController : Controller
{
    private readonly YourDbContext _context;

    public HomeController(YourDbContext context)
    {
        _context = context;
    }    
    [HttpGet]
    public IActionResult Index()
    {
        return View();
    }
    [HttpGet]
    public IActionResult Test()
    {
        var name = HttpContext.Request.Query["term"].ToString();
        var testname = _context.Tests.Where(c => c.Name.Contains(name))
                                    .OrderBy(a=>a.Name)
                                    .Select(c => c.Name)
                                    .Take(5)
                                    .ToList();
        return Ok(testname);
    }
}

参考：

https://jqueryui.com/autocomplete/