Блог

Этот проект находится в angular. Я использую jqwidgets autocomple select. вот мой 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 значений.вот почему это влияет на загрузку моей страницы time.my загрузка страницы занимает около 45 секунд.Существует ли какой-либо доступный метод для сокращения времени загрузки. или есть какая-либо альтернатива, которую можно использовать, которая является более эффективной.

PS: Я использовал удаленное автозаполнение в jqwidget, но он не работает, после ввода 2 слов он отключается.он загружает данные, но у него нет эффекта автозаполнения, плюс пользовательский интерфейс — катастрофа. для справки удаленный код автозаполнения

   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"}]});