ASP MVC 5自动完成无法正常工作

时间:2014-12-08 20:23:40

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

我是ASP MVC 5的新手,在阅读了几个教程后,我似乎无法实现简单的自动完成功能。我的问题是View正在接收的数据是[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; }
    }
}

这是我的控制器(VassalControlller)

 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错误。

我为发布代码问题时遇到的任何格式问题道歉。

非常感谢任何帮助。

感谢您的时间

1 个答案:

答案 0 :(得分:1)

尝试替换

&#13;
&#13;
return {
    label: item
};
&#13;
&#13;
&#13;

&#13;
&#13;
return {
    label: item.Name
};
&#13;
&#13;
&#13;

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

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