留言板
AUI autocomplete
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>
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>
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.
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.
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:
My data source is seperate for reuse and I use the autocomplete events itemSelect() textboxChange() and so on...
My jsp has the following fields in use:
Hope that helps.
PS - The original code was shamelessly 'reused' from a federated search portlet...
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 && event.details !== null && event.details[1] != null && 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...