ASP MVC 5 自动完成不工作答案

【问题标题】：ASP MVC 5 Auto Complete not workingASP MVC 5 自动完成不工作
【发布时间】：2014-12-08 20:23:39
【问题描述】：

我对 ASP MVC 5 很陌生，在阅读了几个教程之后，我似乎仍然无法实现简单的自动完成功能。我的问题是视图接收的数据是 [Object object]，我不知道为什么。获取的单词数是正确的，唯一的问题是它不显示“单词”只是[Object object]。

这是我的模型：

public class Vassal
{
    public string Name { get; set; }
    public string Type { get; set; }

    public int ID { get; set; }

    public class  VassalDBContext : DbContext
    {
        public DbSet<Vassal> Vassals { get; set; }
    }
}

这是我的控制器（VassalController）

 public JsonResult AutoComplete(string search)
     {
         var vassalNames = from m in db.Vassals
                           select m;

         if (!String.IsNullOrEmpty(search))
         {
             vassalNames = vassalNames.Where(s => s.Type.Contains(search));
         }
         return Json(vassalNames, JsonRequestBehavior.AllowGet);
     }

这是我的观点

@model IEnumerable<webVassal.Models.Vassal>

@{
    ViewBag.Title = "Search";
}

 
<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
</div>


<script type="text/javascript" >       
    $(function () {
        $('#tags').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("AutoComplete")',
                    dataType: "json",
                    contentType: 'application/json, charset=utf-8',
                    data: {
                        search: $("#tags").val()
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item
                            };
                        }));
                    },
                    error: function (xhr, status, error) {
                        alert(error);
                    }
                });
            },
            minLength: 1
        });
    });  
</script>

我正在使用 Jquery 2.1.1、jquery-ui.min.js 和 jquery.ui.widget.js

另外，如果我要修改上面的代码以使用 Twitter bootstrap typeahead 插件，我需要做什么？我尝试按照此链接 http://deanhume.com/home/blogpost/twitter-bootstrap-typeahead-and-asp-net-mvc---key-value-pairs/88 上的说明进行操作，但遇到了 hasOwnProperty 错误。

对于我在发布代码问题方面的任何格式问题，我深表歉意。

非常感谢任何帮助。

感谢您的宝贵时间

【问题讨论】：

标签： javascript asp.net-mvc typeahead.js

【解决方案1】：

尝试替换

return {
    label: item
};

与

return {
    label: item.Name
};

您返回的是一个对象数组而不是字符串，因此您需要在成功子句中访问每个对象的 Name 属性。

我认为您应该单独询问 bookstrap typeahead 问题。

【讨论】：

好吧，我没有注意到这一点感到很愚蠢......非常感谢您的时间和回答。