Combobox remote search

[jqWizardParticipant]

Hi!

I tried the demo for the combobox remote search and in my local development environment it is working fine. But in my case where I use datatype ‘json’ (not ‘jsonp’) I have a strange problem. Whenever the remote search is started on the combobox there is a problem with the added character & (ampersand) at the end of the REST url (marked by red color in the sample below; user entered ’55’). Why is the ampersand added automatically and how can I get rid of it?

Sample:
http://localhost:8081/SearchTestREST/search?text=&55

Code:

// source
var source = {
	datatype	: 'json',
	cache: true,
	datafields	: [
		{ name: 'desc' },
		{ name: 'code'}
	],
	url	: 'localhost:8081/SearchTestREST/search?text=' 
};
// data adapter
var dataAdapter = new jQuery.jqx.dataAdapter(source, {
	formatData: function (data) {
		if (jQuery('#inputTest').jqxComboBox('searchString') != undefined) {
			return jQuery('#inputTest').jqxComboBox('searchString');
		}
	}
});
// comboBox
jQuery('#inputTest').jqxComboBox({
	width	: 149,
	height	: 22,
	dropDownWidth		: 250,
	source	: dataAdapter,
	remoteAutoComplete	: true,
	selectedIndex		: 0,
	placeHolder	: 'Enter ...',
	displayMember	: 'desc',
	valueMember	: 'code',
	renderer: function (index, label, value) {
		var item = dataAdapter.records[index];
		if (item != null) {
			var label = item.code + ' - ' + item.desc;
			return label;
		}
		
		return '';
	},
	renderSelectedItem: function(index, item) {
		var item = dataAdapter.records[index];
		if (item != null) {
			var label = item.code + ' - ' + item.desc;
			return label;
		}
		
		return '';  
	},
	search: function (searchString) {
		dataAdapter.dataBind();
	}
});

[Peter StoevKeymaster]

Hi,

I suppose that your code should be:

	formatData: function (data) {
		if (jQuery('#inputTest').jqxComboBox('searchString') != undefined) {
			var text = jQuery('#inputTest').jqxComboBox('searchString');
		         return {text: text};
                }
	}

And change the URL to localhost:8081/SearchTestREST/search

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jqWizardParticipant]

Thank you Peter. Your solution has solved my problem with URL but I have one issue left. How can I include request header into the URL? Is it possible using source and data adapter or do I have to use “loadServerData” for creating custom ajax call?

[jqWizardParticipant]

I’ve solved it! For sending request headers I had to use custom AJAX call using “loadServerData”.

Here’s the code for source and data adapter:

var source = {
	datatype	: 'json',
	cache: true,
	datafields	: [
		{ name: 'desc' },
		{ name: 'code'}
	],
	url	: 'localhost:8081/SearchTestREST/search' 
};
var dataAdapter = new jQuery.jqx.dataAdapter(source, {
	loadServerData: function (serverdata, source, callback) {
		jQuery.ajax({
			type		: 'GET',
			url			: source.url,
			headers		: {
				token: 'advdf3434f23erwefd2332das'
			},
			data		: serverdata,
			dataType	: source.datatype,
			contentType	: 'application/json',
			success	: function (data) {
				// VERY IMPORTANT: send the loaded records to the jqxDataAdapter plug-in.
				// if you do not call function callback then your result list will be empty
				callback({
					records: data.myData
				});
			}
		});
	},
	formatData: function (data) {
		var inputTxt = jQuery('#inputTest').jqxComboBox('searchString');
		if (inputTxt != undefined) {
			return {
				text: inputTxt
			};
		}
	}
});

[Author]

Posts