Question

我正在尝试在jQuery中使用自动完成小部件，但是当我开始输入时，没有任何内容显示在它下面。我可以告诉它正在做某事因为我输入我可以看到页面上的滚动条随着列表变短而改变，但我看不到结果。我的代码如下。任何帮助都表示赞赏。

我的控制器方法如下所示：

public ActionResult GetUsers(string query)
    {
        var empName = from u in HomeModel.CombineNames()
                      where u.StartsWith(query)
                      select u.Distinct().ToArray();
        return Json(empName);
    }

我的观点如下：

<script type="text/javascript">
$(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '/Home/GetUsers',
                type: "POST",
                dataType: "json",


                data: { query: request.term },
                success: function(data) {
                    response($.map(data, function(item) {
                        return { label: item, value: item };
                    }));
                }
            });
        }
    });
})
</script>
<input  type="text" id = "autocomplete"/>

Answer 1

尝试使用浏览器的检查工具检查滚动条更改的区域。如果元素存在，您可能需要对CSS进行一些更改，以使您的文本颜色与背景颜色（或其他与显示相关的问题）不同。

Answer 2

您缺少一些内容，例如渲染项目，缓存管理。

代码看起来应该是这样的:(假设你的动作返回一个字符串数组）

var cache = {},lastXhr;
            $( "input#autocomplete" ).autocomplete({
                minLength: 4,
                source: function (request, response) {
                    var term = request.term;
                    if (term in cache) {
                        response(cache[term]);
                        return;
                    }
                    var descripcion = new Array();
                    peticion = $.getJSON('/Home/GetUsers',{ query: request.term }, function (data, status, xhr) {
                        for (d in data) {
                            descripcion.push(data[d]);
                        }
                        cache[term] = descripcion;
                        if (xhr === peticion) {
                            response(descripcion);
                        }
                    });
                },
                select: function( event, ui ) {
                    $("input#autocomplete" ).val( ui.item);
                    return false;
                }
            })
            .data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + item +  " </a>" )
                    .appendTo( ul );
            };

jQuery自动完成隐藏的渲染结果

2 个答案: