jQueryUI的自动完成返回回空列表 [英] jQueryUI autoComplete returns back empty list

问题描述

在我的asp.net MVC3应用程序，我自动完成加为我的搜索框。当我测试了一下，有3个结果返回从动作了。你可以看到一个列表出现了，但是，这是一个空的列表，你只看到第3版;李>＆LT; / LI>，这里面的李标签之间什么也没有。

我pretty肯定的是，行动是好的，因为它没有返回3个结果了。我可以验证通过观看3个空＆LT; li>标签。我应该怎么做补充名＆LT; LI>苹果＆LT; / LI>

  $（＃搜索框）。自动完成（{
            来源：/首页/ SearchIngredients
            的minLength：2        }）;
    公共虚拟JsonResult SearchIngredients（串词）
    {
        VAR成分= _smoothi​​eService.GetIngredients（项）;        VAR数据= ingredients.Select（X =＆gt;新建{ID = x.NDB_No，值= x.Name}）。以（25）.ToArray（）;
        返回JSON（数据，JsonRequestBehavior.AllowGet）;
    }
 

解决方案

事情是这样的：

  $（'＃搜索'）。自动完成（{
    来源：函数（请求，响应）{
        $阿贾克斯（{
            网址：/首页/ SearchIngredients
            数据类型：JSON，
            数据：要求，
            成功：功能（数据）{
                响应（Data.Map中（函数（值）{
                    返回{
                        标签：'＆LT;立GT;' + value.Id +'＆LT; /李＆GT;，
                        价值：value.Value
                    };
                }））;
            }
        }）;
    }，
    的minLength：2
}）
 

In my asp.net mvc3 application, I added autoComplete for my search box. When I test it, there are 3 results returned back from the action. You can see a list showed up, however, this is an empty list, you only see 3 < li >< /li >, and there's nothing there between the li tag.

I pretty sure, action is fine, because, It did return 3 results back. I can verify that by seeing 3 empty < li > tag. what should I do to add name < li > apple < / li>

        $("#searchbox").autocomplete({
            source:"/Home/SearchIngredients",
            minLength: 2

        });


    public virtual JsonResult SearchIngredients(string term)
    {
        var ingredients = _smoothieService.GetIngredients(term);

        var data = ingredients.Select(x => new {Id = x.NDB_No, Value = x.Name}).Take(25).ToArray();
        return Json(data, JsonRequestBehavior.AllowGet);
    }

解决方案

Something like this:

$('#search').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Home/SearchIngredients",
            dataType: 'json',
            data: request,
            success: function (data) {
                response(data.map(function (value) {
                    return {
                        'label': '<li>' + value.Id + '</li>',
                        'value': value.Value
                    };  
                }));
            }   
        }); 
    },  
    minLength: 2
})

这篇关于jQueryUI的自动完成返回回空列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！