Observable Array with thousands of records

Question

 <tbody data-bind='foreach: $root.icdCodes'>
        <tr>
            <td>
                <input type="text" list="icdcodes" data-bind="value: DiagnosisCd, event: {focusout: $root.dxCodeLostFocus }">
                <datalist id="icdcodes" data-bind="foreach: $root.icdCodesDropdown">
                <option data-bind="text: $data.DiagnosisCd">

                </option>
                </datalist>   

            </td>

        </tr>
    </tbody>

vm.dxCodeLostFocus = function () {
   vm.icdCodes.push({ ID: '', DiagnosisCd: '' });
};

I am adding a html5 datalist control dynamically in the UI. The observable array icdCodesDropdown contains more than 10,000 records. Every time I tab out of the input text control associated with the datalist, it takes 10 sec to add another input control.

Can something be done for faster response?

Answer 1

The link below helped me solve the problem. Instead of filling the datalist all at once, I am filling it dynamically when user types something in the input control.

http://www.raymondcamden.com/index.cfm/2012/6/14/Example-of-a-dynamic-HTML5-datalist-control

Answer 2

Have a look at https://github.com/mbest/knockout-repeat We use it for large collections instead of foreach.