Print Page - Combobox or combogrid with intelli sense

Title: Combobox or combogrid with intelli sense
Post by: thecyberzone on February 21, 2015, 10:36:47 AM

Generally in any ComboBox or in any ComboGrid if I type 'A', all option values starting with 'A' appears in dropdown, similarly if press 'AB', option values starting with 'AB' appears in dropdown and so on.

Is there any way that after type 1 or more character, instead of displaying all option values starting with given keys, all values CONTAINING the typed keys will appear in the dropdown, not only the option values starting with.

Title: Re: Combobox or combogrid with intelli sense
Post by: stworthy on February 22, 2015, 02:32:25 AM

You can override the $.fn.combobox.defaults.filter function to define the filtering rule.

Code:

$.extend($.fn.combobox.defaults, {
  filter: function(q, row){
    var opts = $(this).combobox('options');
    return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0;
  }
});

Title: Re: Combobox or combogrid with intelli sense
Post by: thecyberzone on February 22, 2015, 04:53:42 AM

Wow! It really works like a charm. :D

Title: Re: Combobox or combogrid with intelli sense
Post by: thecyberzone on February 22, 2015, 04:58:32 AM

By the way, If I want to implement the same for ComboGrid what I have to do ? Directly if use the same code for ComboGrid it does not work.

Title: Re: Combobox or combogrid with intelli sense
Post by: stworthy on February 22, 2015, 05:49:20 AM

For the combogrid, you can also override the $.fn.combogrid.defaults.filter function.

Code:

$.extend($.fn.combogrid.defaults, {
	filter: function(q, row){
		var opts = $(this).combogrid('options');
		return row[opts.textField].indexOf(q) >= 0;
	}
})

Title: Re: Combobox or combogrid with intelli sense
Post by: thecyberzone on February 22, 2015, 08:25:43 AM

I have tried with same code.

See the code below :

Code:

		<select id="cg" name="cg" class="easyui-combogrid" style="width:250px; padding-right:10px;" 
			data-options="panelWidth: 500,
			idField: 'secode2', textField: 'section',
			url: 'getSection.php',
			columns: [[
				{field:'secode2',title:'SeCode',width:60,align:'right'},
				{field:'secode',width:0,hidden:true},
				{field:'section2',width:0, hidden:true},
				{field:'section',title:'Section',width:260},
				{field:'deptname',title:'Department',width:200}
			]],
			required:true,

and here is the code for filtering :

Code:

$.extend($.fn.combogrid.defaults, {
  filter: function(q, row){
    var opts = $(this).combogrid('options');
    return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0;
  }
});

But it does not filter as in case of combobox works, it shows all the rows, only it highlights the first occurence of the keypressed string.

Title: Re: Combobox or combogrid with intelli sense
Post by: thecyberzone on February 22, 2015, 10:07:13 AM

Problem solved, tricks were in 2 places.
1. mode:'remote' in combogrid data-options section and
2. in backend php file a $q parameter is send for selection query, but GOD knows how this parameter q is sent from combogrid, but it works.

Code:

$q = isset($_POST['q']) ? strval($_POST['q']) : '';

if($user_cat=='A') {
	$sql = "select * from section where section like '%$q%' ORDER BY section";
} 
else {
	$sql = "select * from access where tno2='$user_tno2' and section like '%$q%' ORDER BY section";
}

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: thecyberzone on February 21, 2015, 10:36:47 AM