带有下拉结果的 MVC Razor 自动完成文本框答案

【问题标题】：MVC Razor Autocomplete Text box with dropdown result带有下拉结果的 MVC Razor 自动完成文本框
【发布时间】：2017-12-15 22:43:29
【问题描述】：

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

谢谢

【问题讨论】：

jQuery-UI 有一个autocomplete

标签： asp.net-mvc razor autocomplete

【解决方案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>
}

玩得开心;)

【讨论】：

【解决方案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" />

【讨论】：