<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?
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