1

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"/>
4

2 に答える 2

0

ブラウザの検査ツールを使用して、スクロールバーが変化している領域を調べてみてください。要素が存在する場合は、CSSに変更を加えて、テキストの色が背景色と異なるようにする必要があります（またはその他の表示関連の問題）。

于 2013-03-26T16:07:00.717 に答える
0

レンダリングアイテム、キャッシュ管理など、いくつかの点が欠けています。

コードは次のようになります:(アクションが文字列の配列を返すと仮定します）

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 );
            };
于 2013-03-26T20:20:25.910 に答える