Autocomplete in ASP.NET MVC3自动检索并填充输入框-优快云博客

本文介绍如何在ASP.NET MVC项目中实现下拉框的自动补全功能，通过使用jQuery UI的autocomplete插件并结合JSON数据交互，实现单一产品代码及多属性值的快速检索。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、单一产品情况下使用：


public ActionResult GetStockList()
{
    var item = _db.Stocks.ToList().Select(s =>s.Product.CodePro);
    return Json(item, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
    $(function () {
        var url = "/Mana/BillOfLading/GetStockList";
        $.getJSON(url, null, function (myData) {
            var availableTags = myData;
            $("#stockid").autocomplete({
                source: availableTags
            });
        });
    });
  </script>
<div class="ui-widget">
     <label for="stockid">Tags: </label>
     <input id="stockid" />
</div>

2、多组返回值的情况下：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#SearchString").autocomplete({
            source: "/Student/AutocompleteSuggestions",
            minLength: 1,
            select: function (event, ui) {
                if (ui.item) {
                    $("#SearchString").val(ui.item.value);
                    $("#txtlabel").text(ui.item.label);
                }
            }
        });
    });
</script>

<div class="ui-widget">
    <label id="txtlabel" style="color:Red"></label><br />
        Find by name: @Html.TextBox("SearchString")   
        <input type="submit" value="Search" />
 </div>


 public ActionResult AutocompleteSuggestions(string term)
{
  var suggestions = db.Students.Select(s => new { label = s.LastName+"|"+s.FirstMidName, value = s.StudentID}).Where(b=>b.label.ToLower().StartsWith(term.ToLower()));
  return Json(suggestions, JsonRequestBehavior.AllowGet);
}