Question

这个项目是有角度的。我正在使用jqwidgets autocomple select.here是我的js代码。

  var source =
    {
        datatype: "json",
        localdata: Employees,
        datafields: [
                    { name: 'EmployeeID' },
                    { name: 'EmployeeName' }
                ]
    };

var dataAdapter = new $.jqx.dataAdapter(source);

//if (document.getElementById("#jqxEmployee") != undefined) {
try {
    $("#jqxEmployeeid").jqxComboBox({ source: dataAdapter, displayMember: "EmployeeName", valueMember: "EmployeeID", multiSelect: false, width: '100%', height: 30 });
    // trigger selection changes.

    $("#jqxEmployeeid").on('change', function (event) {
        var items = $("#jqxEmployeeid").jqxComboBox('getSelectedItems');
        var selectedItems = "Selected Items: ";
        $.each(items, function (index) {
            //////debugger;
            selectedItems += this.label;
            if (items.length - 1 != index) {
                selectedItems += ", ";
            }
        });
        //$("#log").text(selectedItems);
    });
}
catch (exce) {

}

我的csttml代码是

<div id='jqxEmployeeid' onkeypress="javascript:return isAlphabet(event)" ng-paste='preventPaste($event)'
                                    ng-keyup="clearvalue()">
                                </div>

它工作正常。但是本地数据员工有大约4000个值。这就是为什么它影响我的页面加载时间。我的页面加载大约需要45秒。是否有任何方法可用于减少加载时间。或者有任何方法可以使用的替代方案更有效。

PS：我在jqwidget中使用了远程自动完成功能，但在键入2个单词后它无效。它正在加载数据但它没有自动完成效果加上UI是灾难。参考远程自动完成代码是

  var source =
    {
        datatype: "json",
        localdata: Employees,
        datafields: [
                    { name: 'EmployeeID' },
                    { name: 'EmployeeName' }
                ]
    };
var dataAdapter = new $.jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    if ($("#jqxEmployeeid").jqxComboBox('searchString') != undefined) {
                        data.name_startsWith = $("#jqxEmployeeid").jqxComboBox('searchString');
                        return data;
                    }
                }
            }
        );

//  var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxEmployeeid").jqxComboBox(
        {

            width: '100%',
            height: 30,
            source: dataAdapter,
            remoteAutoComplete: true,
            autoDropDownHeight: true,
            selectedIndex: 0,
            displayMember: "EmployeeName",
            valueMember: "EmployeeID",
            renderer: function (index, label, value) {

                var item = dataAdapter.records[index];
                if (item != null) {
                    var label = item.EmployeeName;
                    return label;
                }
                return "";
            },
            renderSelectedItem: function (index, item) {
                var item = dataAdapter.records[index];
                if (item != null) {
                    var label = item.name;
                    return label;
                }
                return "";
            },
            search: function (searchString) {
                dataAdapter.dataBind();
            }
        });

我的json数据

{"FetchEmployeeResult":[{"Email":"Ahfdgdfg.com","EmployeeID":"36","EmployeeName":" dfsdfdsfdd"},{"Email":"dfgfdghdf.com","EmployeeID":"37","EmployeeName":"ghdfghdfhdf"}]});

减少加载时间jqwidgets自动填充选择

0 个答案: