Question

我有一个文本框，我需要用户才能开始输入。当他们输入时，我需要在文本框下方的下拉列表中显示结果。一旦用户选择了他们想要的项目，我就需要它出现在文本框中。项目列表从控制器中提取。这是一个使用剃刀页面的MVC页面。控制器已经到位，我只需要知道如何连接它。我更像是一个中/后端开发人员，所以这对我来说是一个新的领域。如果有人可以指向我这样做的网站，代码或示例，我可以从那里找到它。

由于

Answer 1

如果你不使用第三部分

<强>控制器：

public JsonResult MyData(string text)
{
    text = text.ToLower().Trim();
    string[] words = { "Microsoft", "Microsoft MVC", "Google", "Apple" };

    IEnumerable<string> matched = words.Where(x => x.ToLower().StartsWith(text));

    return Json(matched, JsonRequestBehavior.AllowGet);
}

查看：

<input id="search" type="text"> <br> <select id="result" multiple></select> @section scripts{ <script> $("#search").on("keypress", function () { // get the value ftom input var text = $(this).val(); if (text.length > 0) { $.get("@Url.Action("MyData")", { text: text }, function (data) { //add all data for (i = 0; i < data.length; i++) { $("#result").append('<option>' + data[i] + "</option>"); } //if hidden show the select if ($("#result").is(":hidden")) { $("#result").show(); } }); } }); $(document).on("click", "#result > option", function () { //add selected value to #search $("#search").val($(this).val()); //clear and hide #result $("#result").empty().hide(); }); </script> }

玩得开心;）

Answer 2

您可以借助jQueryUI自动完成插件创建自动完整文本框。对于数据源，您可以创建apicontroller并为自动填充文本框提供数据。

例如：

Api控制器：

[Produces("application/json")]
[Route("api/Home")]
public class HomeController : Controller
{       
        [Route("")]        
        public IActionResult Index()
        {        
            return Ok(new List<string> { "test", "test2" });
        }
}

Page.cshtml：

<link rel="stylesheet" href="//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 type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: "/api/Home",
            type: "GET",            
            success: function (data) {
                $('#AutoCc').autocomplete({
                       source: data
                });
            },
            error: function (error) {                
            }
       })
    })
</script>


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

MVC Razor自动填充文本框，带有下拉结果

2 个答案: