How can i pass an AlloyUI variable into a AutoCompleteList function?

[Chris Maggiulli, modifié il y a 7 années.]

I have an autocomplete function attached to an text input node that displays customer information. Above that text input I have a radio button input that limits the autocomplete by customer country (it either shows our US customers or our CA customers). On the portlet we have a condition that limits the response based on that radio input. I cannot figure out how to send that dynamic country input to the portlet. Basically, I need to pass the value of a radio input to also be a datasource. Here's my code thus far :

	var datasource = new A.DataSource.IO({
		source : '<%=customerData%>'
	});
	
	var autoComplete = new A.AutoCompleteList({
		allowBrowserAutocomplete : false,
		activateFirstItem : true,
		inputNode : '#<portlet:namespace />&lt;%=Constants.LABEL_CUSTOMER_NAME%&gt;',
		maxResults : 10,
		on : {
			select : function(event) {
				var result = event.result.raw;
				A.one('#&lt;%=Constants.LABEL_CUSTOMER_NUMBER%&gt;').set('value', result.number);
				A.one('#&lt;%=Constants.LABEL_CUSTOMER_BRANCH%&gt;').set('value', result.branch);
			}
		},
		after : {
			select : function(event) {
				A.one('#<portlet:namespace />&lt;%=Constants.LABEL_CUSTOMER_NAME%&gt;').set('value', event.result.raw.name);
			}
		},
		render : true,
		zIndex : 1100,
		source : datasource,
		requestTemplate : '&amp;cmd=customer&amp;<portlet:namespace />name={query}',
		resultListLocator : function(response) {
			var responseData = A.JSON.parse(response[0].responseText);
			return responseData.response;
		},
		resultTextLocator : function(result) {
			return result.name+ " " + result.number+ " - " + result.branch;
		},
		width : 350
	});

	A.all('input[type=radio]').each(function() {
    	this.on('click', function(event) {
    		autoComplete.requestTemplate = "&amp;cmd=customer&amp;<portlet:namespace />name={query}&amp;country=" + this.val();
    		console.log(autoComplete);
    	});
	});

It doesn't work. Can someone show me how to use two inputs/data sources but only display one to the user.

[Kyle Joseph Stiemann, modifié il y a 6 années.]

Hi Chris,
Instead of setting the requestTemplate as an object property like this:

autoComplete.requestTemplate = "&cmd=customer&<portlet:namespace />name={query}&country=" + this.val();

Try using the AlloyUI attribute setter method:

autoComplete.set('requestTemplate', "&cmd=customer&<portlet:namespace />name={query}&country=" + this.val());

Let us know if that works for you.

- Kyle

[Chris Maggiulli, modifié il y a 6 années.]

Sorry for not responding sooner. Yes this worked. Thank you so much.