Print Page - Browsing a combobox with thousands of records

I have a combobox that selects from a table with many thousand records.

The user needs to be able to either browse the records, or enter text into the combo to filter the records before selecting the desired value.

While I know that the entering of filter text can be sent server-side for the matching records to be returned, how can the browse list be updated dynamically as the user scrolls down the list ?

It would not be practical to load all records into the screen, so how can it use a pagination method that automatically appends and removes combo items that are outside of the viewable records in the drop down panel ?

When the combo loads, it creates the panel and loads all of the rows into the panel, and since the drop down panel can only show around 10 records at a time, in many cases 90% of the records are invisible. This leads me to think that maybe the combo could only load the panel partially with enough records to fill the drop down a few times, and then add more to it as the user scrolls down. For large datasets, this would make the system faster to load ?

So lets say the user is scrolling a list of items and can see items 100 to 120 in the drop down panel, we need to dynamically add a buffer before 100 and after 120 so that as they scroll the list contects change automatically.

Not sure if I have explained that clearly ?

These are the extensions that can append and delete an item, but how can these be called to dynamically add and remove items to and from the top and bottom of the list ?

Code:


$.extend($.fn.combobox.methods, {
	
  append: function(jq, item){
		return jq.each(function(){
			var state = $.data(this, 'combobox');
			var opts = state.options;
			var items = $(this).combobox('getData');
			items.push(item);
			$(this).combobox('panel').append(
				'<div id="' + state.itemIdPrefix+'_'+(items.length-1) + '"  class="combobox-item">' +
				(opts.formatter ? opts.formatter.call(this, item) : item[opts.textField]) +
				'</div>'
			)
		})
	},

  delete: function(jq, item){
		return jq.each(function(){
			var state = $.data(this, 'combobox');
			var opts = state.options;
			var items = $(this).combobox('getData');
			var idx = items.map(function(e) {return e.value;}).indexOf(item.value);
			var id = state.itemIdPrefix+'_'+idx;
			items.splice(idx,1);
			$('#'+id).remove();
		})
	}
}

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on April 01, 2016, 07:10:29 PM