Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Felix J Christy
Autocomplete item selection in Alloy UI
November 20, 2012 6:32 AM
Answer

Felix J Christy

Rank: Regular Member

Posts: 111

Join Date: August 25, 2009

Recent Posts

I am working with Alloy UI auto-complete plugin that comes with Liferay. My auto complete part is working completely fine.

Now, what I want to do is that I want to capture the data which is selected from the auto complete auto suggest, and do the operation.

Let say, if I write ry in auto complete and then list comes up like this :

ryan
rynda
ryab

Now, if I click on any item or select via keyboard arrow key and press enter, it gets copied to autocomplete source input box. But I want is that I want to return back and do nothing when user selects a particular one item lets say ryab.

I found the event

autocomplete.on('itemSelect',function(event) {
};

which is fired when I select any item, but I don't know how to get the object which is selected and how to return false/do nothing by comparing the object.

Any help would be appreciated!
Pavel Savinov
RE: Autocomplete item selection in Alloy UI
November 21, 2012 12:47 AM
Answer

Pavel Savinov

Rank: Junior Member

Posts: 97

Join Date: September 24, 2012

Recent Posts

Hi Felix.

Here you go, some code working:
1autoComplete.on('itemSelect',function(event,data) {
2  /* get name of selected element */
3  var selectedItemName = data.name;
4  /* clear value, if needed */
5  A.one("#ac-demo input.aui-field-input-text").set("value","");
6});


full source of an example:
 1<span>US State:</span>
 2<div id="ac-demo"></div>
 3
 4<script>
 5AUI().ready('aui-autocomplete','node', 'selector-css3', function(A) { var states = [ ['AL', 'Alabama', 'The Heart of Dixie'], ['AK', 'Alaska', 'The Land of the Midnight Sun'], ['AZ', 'Arizona', 'The Grand Canyon State'], ['AR', 'Arkansas', 'The Natural State'], ['CA', 'California', 'The Golden State'], ['CO', 'Colorado', 'The Mountain State'], ['CT', 'Connecticut', 'The Constitution State'], ['DE', 'Delaware', 'The First State'], ['DC', 'District of Columbia', "The Nation's Capital"], ['FL', 'Florida', 'The Sunshine State'], ['GA', 'Georgia', 'The Peach State'], ['HI', 'Hawaii', 'The Aloha State'], ['ID', 'Idaho', 'Famous Potatoes'], ['IL', 'Illinois', 'The Prairie State'], ['IN', 'Indiana', 'The Hospitality State'], ['IA', 'Iowa', 'The Corn State'], ['KS', 'Kansas', 'The Sunflower State'], ['KY', 'Kentucky', 'The Bluegrass State'], ['LA', 'Louisiana', 'The Bayou State'], ['ME', 'Maine', 'The Pine Tree State'], ['MD', 'Maryland', 'Chesapeake State'], ['MA', 'Massachusetts', 'The Spirit of America'], ['MI', 'Michigan', 'Great Lakes State'], ['MN', 'Minnesota', 'North Star State'], ['MS', 'Mississippi', 'Magnolia State'], ['MO', 'Missouri', 'Show Me State'], ['MT', 'Montana', 'Big Sky Country'], ['NE', 'Nebraska', 'Beef State'], ['NV', 'Nevada', 'Silver State'], ['NH', 'New Hampshire', 'Granite State'], ['NJ', 'New Jersey', 'Garden State'], ['NM', 'New Mexico', 'Land of Enchantment'], ['NY', 'New York', 'Empire State'], ['NC', 'North Carolina', 'First in Freedom'], ['ND', 'North Dakota', 'Peace Garden State'], ['OH', 'Ohio', 'The Heart of it All'], ['OK', 'Oklahoma', 'Oklahoma is OK'], ['OR', 'Oregon', 'Pacific Wonderland'], ['PA', 'Pennsylvania', 'Keystone State'], ['RI', 'Rhode Island', 'Ocean State'], ['SC', 'South Carolina', 'Nothing Could be Finer'], ['SD', 'South Dakota', 'Great Faces, Great Places'], ['TN', 'Tennessee', 'Volunteer State'], ['TX', 'Texas', 'Lone Star State'], ['UT', 'Utah', 'Salt Lake State'], ['VT', 'Vermont', 'Green Mountain State'], ['VA', 'Virginia', 'Mother of States'], ['WA', 'Washington', 'Green Tree State'], ['WV', 'West Virginia', 'Mountain State'], ['WI', 'Wisconsin', "America's Dairyland"], ['WY', 'Wyoming', 'Like No Place on Earth'] ];  var autoComplete = new A.AutoComplete( { contentBox: '#ac-demo', dataSource: states, delimChar: ',', matchKey: 'name', typeAhead: true, schema: { resultFields: ['key', 'name', 'description'] } } );
 6
 7
 8autoComplete.on('itemSelect',function(event,data) {
 9  /* get name of selected element */
10  var selectedItemName = data.name;
11  /* clear value, if needed */
12  A.one("#ac-demo input.aui-field-input-text").set("value","");
13});
14
15autoComplete.render();
16});
17</script>
Felix J Christy
RE: Autocomplete item selection in Alloy UI
November 21, 2012 7:32 AM
Answer

Felix J Christy

Rank: Regular Member

Posts: 111

Join Date: August 25, 2009

Recent Posts

Thanks Pavel,

I got this one, but what happens is that when I click any item, the auto suggest list disappers, I want that list to stay there, as user will be able to select any other item instead of the clicked on.

basically, I have list of Users as an auto complete search result. Now, I have added a label "Users" as one of the LI. So, what I want is that when user clicks that label,I want to do nothing (return false kind of), so that user can select any other value from the list.

You have any other idea to implement this?

Thanks,
Felix
Pavel Savinov
RE: Autocomplete item selection in Alloy UI
November 22, 2012 12:59 AM
Answer

Pavel Savinov

Rank: Junior Member

Posts: 97

Join Date: September 24, 2012

Recent Posts

I've found one solution, maybe you'll find a way to do it better, but it works as is:

add one more configuration option to your autocomplete:
 1var autoComplete = new A.AutoComplete({ alwaysShowContainer:true,
 2   /* here all other options */ });
 3autoComplete.on('itemSelect',function(event,data) {
 4  var selectedItemName = data.name;
 5  A.one("#ac-demo input.aui-field-input-text").set("value","");
 6  if (selectedItemName == "Florida") { /* any your condition to hide an autocomplete container */
 7    A.one("div.aui-autocomplete-results-content").hide();
 8  }
 9});

It works fine but i didn't checked it on pages with more than one auto-complete.
Rob Silver
RE: Autocomplete item selection in Alloy UI
September 16, 2013 2:25 PM
Answer

Rob Silver

Rank: Junior Member

Posts: 42

Join Date: June 20, 2013

Recent Posts

What is 'somekey' ?

Here is a basic example. I am trying to get a handle on this Alloy and YUI so the following needs to be better explained.

Lets start with the Object parameter, A which appears to be the context of the document top level
Now in this example we are doing something I have never seen before whereby we use <div> tags to place input text boxes or textArea s which the aui-Autocomplete.js file seems to indicate is handle able. Anotherwards I could maybe create Inputs of TextArea(Memos) rather than a plain one line text box although I have not been able to do that.
It would appear that the AUI().use(... ) method is called once every time the web page loads and
your suggestion of adding the following:
autocomplete.on('itemSelect', function(item, fullItem) {
alert('item selected!! ' + states['somekey']);

would set up another call back function that pops up alerts when each input field is filled in or changes to a comboBox list item
Would that be a correct assessment?
Would I be able to then in this code use say document.getElementById("myState").value even though it was created within the aui-autocomplete call:
window.BC=new A.AutoComplete with the contentBox: '#myState' setting added to the call shown below

Another important thing that came out of this sample code I created was that It would appear I have created 3 separate fields and there should be a way to populate all three fields from one auto complete field. Also the new A.AutoComplete(..) calls must use the context A for each field to be rendered Also window.AC is no magic property associated
with Auto Complete - Rather it is just a Variable created within the window object I could have just as well called it window.myfield1 instead of window.AC although why did it even have to be a property of window?


given the following:
<!DOCTYPE html>

<html>
<head>
<script src="../../build/aui/aui.js" type="text/javascript"></script>

<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css"
type="text/css" media="screen" />
</head>
<style type="text/css" media="screen">
body {
font-size: 12px;
}

#wrapper {
padding: 10px;
}
.trydesc { width:1000px;}
</style>
<body>

<h1>Alloy AutoComplete</h1>
<h4>Start typing the name of a state (such as Alaska, California, or Maine)</h4>
<div id="myAutoComplete"></div>
<div id="myState"></div>
<div id="myStateDesc" class="trydesc"></div>

<script type="text/javascript" charset="utf-8">
AUI().use('aui-autocomplete', function(A) {

var states = [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State'],
['CO', 'Colorado', 'The Mountain State'],
['CT', 'Connecticut', 'The Constitution State'],
['DE', 'Delaware', 'The First State'],
['DC', 'District of Columbia', "The Nation's Capital"],
['FL', 'Florida', 'The Sunshine State'],
['GA', 'Georgia', 'The Peach State'],
['HI', 'Hawaii', 'The Aloha State'],
['ID', 'Idaho', 'Famous Potatoes'],
['IL', 'Illinois', 'The Prairie State'],
['IN', 'Indiana', 'The Hospitality State'],
['IA', 'Iowa', 'The Corn State'],
['KS', 'Kansas', 'The Sunflower State'],
['KY', 'Kentucky', 'The Bluegrass State'],
['LA', 'Louisiana', 'The Bayou State'],
['ME', 'Maine', 'The Pine Tree State'],
['MD', 'Maryland', 'Chesapeake State'],
['MA', 'Massachusetts', 'The Spirit of America'],
['MI', 'Michigan', 'Great Lakes State'],
['MN', 'Minnesota', 'North Star State'],
['MS', 'Mississippi', 'Magnolia State'],
['MO', 'Missouri', 'Show Me State'],
['MT', 'Montana', 'Big Sky Country'],
['NE', 'Nebraska', 'Beef State'],
['NV', 'Nevada', 'Silver State'],
['NH', 'New Hampshire', 'Granite State'],
['NJ', 'New Jersey', 'Garden State'],
['NM', 'New Mexico', 'Land of Enchantment'],
['NY', 'New York', 'Empire State'],
['NC', 'North Carolina', 'First in Freedom'],
['ND', 'North Dakota', 'Peace Garden State'],
['OH', 'Ohio', 'The Heart of it All'],
['OK', 'Oklahoma', 'Oklahoma is OK'],
['OR', 'Oregon', 'Pacific Wonderland'],
['PA', 'Pennsylvania', 'Keystone State'],
['RI', 'Rhode Island', 'Ocean State'],
['SC', 'South Carolina', 'Nothing Could be Finer'],
['SD', 'South Dakota', 'Great Faces, Great Places'],
['TN', 'Tennessee', 'Volunteer State'],
['TX', 'Texas', 'Lone Star State'],
['UT', 'Utah', 'Salt Lake State'],
['VT', 'Vermont', 'Green Mountain State'],
['VA', 'Virginia', 'Mother of States'],
['WA', 'Washington', 'Green Tree State'],
['WV', 'West Virginia', 'Mountain State'],
['WI', 'Wisconsin', "America's Dairyland"],
['WY', 'Wyoming', 'Like No Place on Earth']
];

window.AC = new A.AutoComplete(
{
dataSource: states,
schema: {
resultFields: ['key', 'name', 'description']
},
matchKey: 'name',
delimChar: ',',
typeAhead: true,
contentBox: '#myAutoComplete'
}
);

AC.render();
window.BC = new A.AutoComplete(
{
dataSource: states,
schema: {
resultFields: ['key', 'name', 'description']
},
matchKey: 'key',
delimChar: ',',
typeAhead: true,
contentBox: '#myState'
}
);

BC.render();

window.CC=new A.AutoComplete(
{
dataSource: states,
schema: {
resultFields: ['key', 'name', 'description']
},
matchKey: 'description',
delimChar: ',',
typeAhead: true,
contentBox: '#myStateDesc',
}
);
CC.render();
//window.status=states["CA"].name;

// autocomplete.on('itemSelect', function(item, fullItem) {
// alert('item selected!! ' + states['somekey']);
// };

autoComplete.on('itemSelect',function(event,data) {
A.one("#myState input.aui-field-input-text").set("value",data.key);
A.one("#myStateDesc input.aui-field-input-text").set("value",data.description);
});

});
</script>

</body>
</html>


..............
Would the above code work do you think?
Rob Silver
RE: Autocomplete item selection in Alloy UI
September 16, 2013 3:35 PM
Answer

Rob Silver

Rank: Junior Member

Posts: 42

Join Date: June 20, 2013

Recent Posts

Actually I got this one working but had some trouble spacing the textboxes any ideas on that I tried a style class and for some odd reason it would not work:
But I got the the autocomplete.on itemSelect to work: I have not yet tried to use multiple autocompletes e.g autocomplete_state, and autocomplete_stateDesc but
I imagine that would work also. I hope this helps others as well.
A much more useful example than the example they give because here we populate additional fields

see code below:
<!DOCTYPE html>

<html>
<head>
<script src="../../build/aui/aui.js" type="text/javascript"></script>

<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css"
type="text/css" media="screen" />
</head>
<style type="text/css" media="screen">
body {
font-size: 12px;
}

#wrapper {
padding: 10px;
}
.trydesc {
top: 5px;
left: 200px;
}
</style>
<body>

<h1>Alloy AutoComplete</h1>
<h4>Start typing the name of a state (such as Alaska, California, or Maine)</h4>
<div id="myAutoComplete"></div>

<span>US State:</span>
<div id="ac-demo"></div>
<span class="trydesc">State:</span><input type="text" id="myState"/>
<span>Desc:</span><input type="text" id="myStateDesc"/>
<script>
AUI().ready('aui-autocomplete','node', 'selector-css3', function(A) { var states = [ ['AL', 'Alabama', 'The Heart of Dixie'], ['AK', 'Alaska', 'The Land of the Midnight Sun'], ['AZ', 'Arizona', 'The Grand Canyon State'], ['AR', 'Arkansas', 'The Natural State'], ['CA', 'California', 'The Golden State'], ['CO', 'Colorado', 'The Mountain State'], ['CT', 'Connecticut', 'The Constitution State'], ['DE', 'Delaware', 'The First State'], ['DC', 'District of Columbia', "The Nation's Capital"], ['FL', 'Florida', 'The Sunshine State'], ['GA', 'Georgia', 'The Peach State'], ['HI', 'Hawaii', 'The Aloha State'], ['ID', 'Idaho', 'Famous Potatoes'], ['IL', 'Illinois', 'The Prairie State'], ['IN', 'Indiana', 'The Hospitality State'], ['IA', 'Iowa', 'The Corn State'], ['KS', 'Kansas', 'The Sunflower State'], ['KY', 'Kentucky', 'The Bluegrass State'], ['LA', 'Louisiana', 'The Bayou State'], ['ME', 'Maine', 'The Pine Tree State'], ['MD', 'Maryland', 'Chesapeake State'], ['MA', 'Massachusetts', 'The Spirit of America'], ['MI', 'Michigan', 'Great Lakes State'], ['MN', 'Minnesota', 'North Star State'], ['MS', 'Mississippi', 'Magnolia State'], ['MO', 'Missouri', 'Show Me State'], ['MT', 'Montana', 'Big Sky Country'], ['NE', 'Nebraska', 'Beef State'], ['NV', 'Nevada', 'Silver State'], ['NH', 'New Hampshire', 'Granite State'], ['NJ', 'New Jersey', 'Garden State'], ['NM', 'New Mexico', 'Land of Enchantment'], ['NY', 'New York', 'Empire State'], ['NC', 'North Carolina', 'First in Freedom'], ['ND', 'North Dakota', 'Peace Garden State'], ['OH', 'Ohio', 'The Heart of it All'], ['OK', 'Oklahoma', 'Oklahoma is OK'], ['OR', 'Oregon', 'Pacific Wonderland'], ['PA', 'Pennsylvania', 'Keystone State'], ['RI', 'Rhode Island', 'Ocean State'], ['SC', 'South Carolina', 'Nothing Could be Finer'], ['SD', 'South Dakota', 'Great Faces, Great Places'], ['TN', 'Tennessee', 'Volunteer State'], ['TX', 'Texas', 'Lone Star State'], ['UT', 'Utah', 'Salt Lake State'], ['VT', 'Vermont', 'Green Mountain State'], ['VA', 'Virginia', 'Mother of States'], ['WA', 'Washington', 'Green Tree State'], ['WV', 'West Virginia', 'Mountain State'], ['WI', 'Wisconsin', "America's Dairyland"], ['WY', 'Wyoming', 'Like No Place on Earth'] ];

var autoComplete = new A.AutoComplete( { contentBox: '#ac-demo',
dataSource: states,
delimChar: ',',
matchKey: 'name',
typeAhead: true,
schema: { resultFields: ['key', 'name', 'description'] }
} );


autoComplete.on('itemSelect',function(event,data) {
// alert(data.description);
/* get name of selected element */
var selectedItemName = data.name;
/* clear value, if needed */
var element = document.getElementById('myState');
element.value =data.key;
element = document.getElementById('myStateDesc');
element.value=data.description;
});

autoComplete.render();
});
</script>
</body>
</html>