Popup List in Alloy
Popup window with a search functionality for selecting an option.
Overview
The design is very simple. The widget looks like a simple dropdown field similar to an Android dropdown picker.
When clicked, it opens a popup window similar to a modal window. Background content is disabled and a gray overlay is placed between the background content of your app and the popup view.
A search functionality becomes available and the user is able to scroll through the available options.
Use it in your app!
Alloy
<Widget id="myPopupList" src="listPopup"/>
Controller
/* Params:
* an array with all available options
* default text to show on the field to be presented on the screen (the one similar to the picker)
* the current window
* callback function to be called when an option is selected (optional argument)
*/
$.myPopupList.initialize(optionsArray,dropdownDefaultText,$.currentWindow, function(selectedOption)
{
console.log(selectedOption);
});
The widget comes with many other functions such as setTop,setWidth,getSelectedValue,setSelectedValue, and setVisibility.
Some libraries from https://github.com/rafbel/titanium_libraries are required. This widget does not come with images like the "X" icon for example. They are required to run this widget (feel free to use any image you'd like).