AUI autocomplete

[Rui Maciel, modificado 11 Anos atrás.]

Hi, i'm using the autocomplete widget but i have a question.
How can i get the "key" and the "name" from the resultFields? I want to grab the key to use in other function.

And is there any way to get the input value without calling 5(!) firstChild?

<span>UEPA:</span> <div id="demo"></div>
<input type="button" value="Procurar" onClick="seeIcon();" />
<aui:input id="zei" name="zei" type="text"/>

<SCRIPT LANGUAGE="JavaScript">
AUI().ready('aui-autocomplete', function(A) {
var ocurrenceType = [
[0, 'Jogada Perigosa'],
[1, 'Informação Complementar'],
[2, 'Descontos'],
[3, 'Fim da primeira parte'],
[4, 'Início da primeira parte'],
[5, 'Golo'],
[6, 'Informação Extra'],
[7, 'Lesão'],
[8, '11 Inicial'],
[9, 'Auto-Golo'],
[10, 'Penalty'],
[11, 'Golo de Penalty'],
[12, 'Expulsão'],
[13, 'Fim da segunda parte'],
[14, 'Início da segunda parte'],
[15, 'Melhor Jogador'],
[16, 'Estatística'],
[17, 'Substituição'],
[18, 'Cartão Amarelo']
];
var autoComplete = new A.AutoComplete(
{
contentBox: '#demo',
dataSource: ocurrenceType,
delimChar: '',
matchKey: 'name',
typeAhead: true,
schema: {
resultFields: ['key', 'name']
}
}
)
.render();
});

function seeIcon(){
var ze = document.getElementById("demo").firstChild.firstChild.firstChild.firstChild.firstChild;
alert(ze.value);
document.getElementById('<portlet:namespace/>zei').value= ze;
};
</SCRIPT>

[Jacques Traore, modificado 11 Anos atrás.]

Hi Rui Maciel,
Did you find a solution for retrieving the "key" value?
I need to make a process action when user selects an item (name). But in my process action only the "key" is important for me.

thanks by advance.

[Brian Jamieson, modificado 11 Anos atrás.]

Here's what I have used:

The autocomplete data schema allows you to specify the shape of your data - a key and name for simplicity. I'm matching on the name, but it is easy to use the key like so:

thekey = event.details[1].key;

My data source is seperate for reuse and I use the autocomplete events itemSelect() textboxChange() and so on...

var settlementsDataSource = 
		new A.DataSource.Local({
			source:[ 
				<%for (int i = 0; i < settlementsList.size(); i++) {%>
					["<%=settlementsList.get(i).getSettlementId() %>", 
					"<%=settlementsList.get(i).getSettlementName() %>"],
	                <% } %>
	                ["", ""]
	        ]});

/* Town autocomplete - use settlements data*/
	var ac1 = new A.AutoComplete({
        dataSource: settlementsDataSource,
        schema: {
            resultFields: ['key', 'name']
        },
        matchKey: 'name',
        typeAhead: true ,
        maxResultsDisplayed: 25,
        queryDelay: 0.5 ,
        contentBox: '#<portlet:namespace />_town_field',
        input: '#<portlet:namespace />_town_input',
        on: {
	        itemSelect: function(event) {
	            if (event !== null &amp;&amp; event.details !== null &amp;&amp; event.details[1] != null &amp;&amp; event.details[1].key != null) {
    	            document.getElementById("<portlet:namespace />town").value = event.details[1].name;
        	    }
        	},
            unmatchedItemSelect: function(event) {
                if (document.getElementById("<portlet:namespace />_town_input").value != "") {
                    document.getElementById("<portlet:namespace />town").value = 
                    	document.getElementById("<portlet:namespace />_town_input").value;
                }
            },
            textboxChange: function(event) {
                if (document.getElementById("<portlet:namespace />_town_input").value == "") {
                    document.getElementById("<portlet:namespace />town").value = "";
                }
            }
        }
    }).render();

My jsp has the following fields in use:

<div id="<portlet:namespace />_town_field"><aui:field-wrapper>
						<aui:input type="text" name="town_input" id="_town_input" label="Settlement/Town" size="40" value="<%=customer.getTown() %>" helpMessage="Type in the Settlement or Town name." />
					</aui:field-wrapper> <aui:input type="hidden" name="town" id="town" value="<%=customer.getTown() %>" /></div>

Hope that helps.

PS - The original code was shamelessly 'reused' from a federated search portlet...