0

無限スクロールでオートコンプリート コンボを実現するにはどうすればよいですか? 無限スクロールのオートコンプリート jquery ui を見つけましたが、このオートコンプリートは pagemethods によってデータを取得します。しかし、私はそれをmvcアプリケーションで使用したいと考えており、コントローラーのアクションを使用してデータを取得したいと考えています。pagemethods でこのオートコンプリートを使用するには、次のようにする必要があります。

$(document).ready(function () {
        //Input for testing purposes
        $("#inp").smartautocomplete({
            getDataFunc: getData,
            pageSize: 15,
            autoFocus: true
        });
    });

    //Function the SA plugin called when data is needed. 
    var getData = function (input, pageIndex, pageSize, callback) {

        PageMethods.GetData(input, pageIndex, pageSize, function (response) {
            if (response) {
                response = $.map(response, function (item) {
                    return {
                        label: item,
                        value: item
                    }
                });
                callback(response);
            }
            else callback();
        });
    };

しかし、$.ajax を使用してデータを取得する方法を変更します。

var getData = function (input, pageIndex, pageSize, callback) {
        $.getJSON(
            { url: '@Url.Action("GetData", "Home")' },
            { input: input, pageIndex: pageIndex, pageSize: pageSize },
            function (response) {
            if (response) {
                response = $.map(response, function (item) {
                    return {
                        label: item,
                        value: item
                    };
                });
                callback(response);
            }
            else callback();
        });

    };

しかし、それは機能せず、アクションは呼び出されません。このオートコンプリートには、http: //www.codeproject.com/Articles/325719/JQueryUI-smartAutocomplete? fid=1683905 からアクセスできます。

無限スクロールでオートコンプリートする他の解決策があるかどうか知りたい

4

1 に答える 1

1

PageMethod 呼び出しを AJAX 呼び出しに置き換えます

        $.ajax({
            url: '@Url.Action("GetData", "Default")',                
            type: 'GET',
            dataType: 'json',
            data: {
                input: input,
                pageIndex: pageIndex,
                pageSize: pageSize

            },

            success: function (response) {
                //alert(response);
                if (response) {
                    response = $.map(response, function (item) {
                        return { label: item, value: item };
                    });
                    callback(response);
                } else {
                    callback();
                }
            },
            error: function (e) {
                alert('error' + e);
            },
            contentType: 'application/json; charset=utf-8'


        });

コントローラーのアクションが JSONResult を返すことを確認してください

return new JsonResult {JsonRequestBehavior = JsonRequestBehavior.AllowGet, Data =    data };//new {result = data}

お役に立てれば。

于 2013-10-09T00:24:59.987 に答える