Autocomplete retrieve value?

[Ken Driscoll, modificado 11 Anos atrás.]

Hi everyone. I have successfully created an aui-autocomplete box. The only problem is that there doesn't appear to be any easy way to retrieve the value of that box... I read on another thread that I would need to create a hidden aui:input and when I click submit, call a javascript function that copies the value of my autocomplete into that hidden input field. Could any one provide me with an example of how to go about this?

Here's my code:

<script type="text/javascript">
	AUI().use('aui-autocomplete', function(A) {
		var results = new Array(<%=lastATKOffices.size()%>);
		<% for(int i=0; i<lastATKOffices.size(); i++){ %>
			results[<%=i%>] = ["<%=lastATKOffices.get(i).getCode()%>","<%=lastATKOffices.get(i).getDescription()%>"];
		<% } %>
	    
	    window.AC = new A.AutoComplete(
	        {
	            dataSource: results,
	            schema: {
	                resultFields: ['key', 'name']
	            },
	            matchKey: 'name',
	            typeAhead: true,
	            contentBox: '#lastATKOffice',
   	            maxResultsDisplayed: <%=lastATKOffices.size()%>
	        }
	    );
	       AC.render();
	});

</script>

<div id="lastATKOffice" class="long-type"></div>     <aui:input name="hiddenATKOfficeValue" label="" hidden="true" />

Any help on how to pass the value of the autocomplete box with the aui form (not shown in the above code) would be greatly appreciated.

[Hitoshi Ozawa, modificado 11 Anos atrás.]

It's the problem with the namespace. Not very difficult, but another option is to use jQuery instead of AlloyUI. This is probably quicker and the code will look better.

[Ken Driscoll, modificado 11 Anos atrás.]

Hitoshi Ozawa:

Another option is not to use AlloyUI but use jQuery.

I've looked into this option, but because I've already implemented a ton of these alloy autocomplete boxes, I'd rather receive some assistance writing a javascript function to copy the value of the alloy autocomplete box into the hidden aui input please.

[Ken Driscoll, modificado 11 Anos atrás.]

Ok I got it working. It's action a lot less complicated then it needed to be.

Here's an example of how to properly create an aui-autocomplete box so it passes the selected value with the form:

<script type="text/javascript">
	AUI().use('aui-autocomplete', function(A) {
		var results = new Array(<%=lastATKOffices.size()%>);
		<% for(int i=0; i<lastATKOffices.size(); i++){ %>
			results[<%=i%>] = ["<%=lastATKOffices.get(i).getCode()%>","<%=lastATKOffices.get(i).getDescription()%>"];
		<% } %>
	    
	    window.AC = new A.AutoComplete(
	        {
	            dataSource: results,
	            schema: {
	                resultFields: ['key', 'name']
	            },
	            matchKey: 'name',
	            typeAhead: true,
	            contentBox: '#lastATKOffice',
	            input: '#<portlet:namespace />lastATKInput',
   	            maxResultsDisplayed: <%=lastATKOffices.size()%>
	        }
	    );
	       AC.render();
	});
	
	function submit() {
		alert("here");
	}
</script>

<div id="lastATKOffice" class="long-type"><aui:input type="text" id="lastATKInput" name="lastATKInput" label="" /></div>

Now assuming that div is inside an aui:form, you should be able to retrieve it's value like any other aui:input.

Let me know if anyone reading this has any further questions.