Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Rui Maciel
AUI autocomplete
August 17, 2012 2:53 AM
Answer

Rui Maciel

Rank: Junior Member

Posts: 36

Join Date: July 23, 2012

Recent Posts

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
RE: AUI autocomplete
February 15, 2013 12:35 PM
Answer

Jacques Traore

Rank: Junior Member

Posts: 46

Join Date: January 21, 2013

Recent Posts

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
RE: AUI autocomplete
March 12, 2013 7:25 AM
Answer

Brian Jamieson

Rank: Junior Member

Posts: 51

Join Date: October 15, 2010

Recent Posts

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:

1thekey = event.details[1].key;


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

 1var settlementsDataSource =
 2        new A.DataSource.Local({
 3            source:[
 4                <%for (int i = 0; i < settlementsList.size(); i++) {%>
 5                    ["<%=settlementsList.get(i).getSettlementId() %>",
 6                    "<%=settlementsList.get(i).getSettlementName() %>"],
 7                    <% } %>
 8                    ["", ""]
 9            ]});
10
11/* Town autocomplete - use settlements data*/
12    var ac1 = new A.AutoComplete({
13        dataSource: settlementsDataSource,
14        schema: {
15            resultFields: ['key', 'name']
16        },
17        matchKey: 'name',
18        typeAhead: true ,
19        maxResultsDisplayed: 25,
20        queryDelay: 0.5 ,
21        contentBox: '#<portlet:namespace />_town_field',
22        input: '#<portlet:namespace />_town_input',
23        on: {
24            itemSelect: function(event) {
25                if (event !== null && event.details !== null && event.details[1] != null && event.details[1].key != null) {
26                    document.getElementById("<portlet:namespace />town").value = event.details[1].name;
27                }
28            },
29            unmatchedItemSelect: function(event) {
30                if (document.getElementById("<portlet:namespace />_town_input").value != "") {
31                    document.getElementById("<portlet:namespace />town").value =
32                        document.getElementById("<portlet:namespace />_town_input").value;
33                }
34            },
35            textboxChange: function(event) {
36                if (document.getElementById("<portlet:namespace />_town_input").value == "") {
37                    document.getElementById("<portlet:namespace />town").value = "";
38                }
39            }
40        }
41    }).render();


My jsp has the following fields in use:

1<div id="<portlet:namespace />_town_field"><aui:field-wrapper>
2                        <aui:input type="text" name="town_input" id="_town_input"
3                            label="Settlement/Town" size="40" value="<%=customer.getTown() %>"
4                            helpMessage="Type in the Settlement or Town name." />
5                    </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...