ts.suggestionfield

An Alloy Widget to create an search field with suggestion box like Google Maps application. Furthermore, it is easy to add auto complete a form function as well.

• Source code: https://github.com/bduyng/ts.suggestionfield/tree/master
• Test app: https://github.com/bduyng/ts.suggestionfield/tree/test

Preview

How to use

Feel free to modify if need.

index.xml

<Alloy>
    ...
    <Widget id="searchbox" hintText="Search Google Maps" src="ts.suggestionfield" onChange="handleChange" onExportData="handleExportData"></Widget>
    ...
</Alloy>

index.js

// SEND REQUEST TO GET NEW DATA
function handleChange(e) {}

// HANDLE RETURNED DATA WHEN USER CLICKED ON A SUGGESTION ROW
function handleExportData(data) {}

// IN YOUR XHR CLIENT
...
onload : function(e) {
    if (this.responseText) {
        try {
            var data = JSON.parse(this.responseText);
            $.searchbox.setSuggestions(transformData(data));
        } catch(e) {
            Ti.API.info(this.responseText);
            Ti.API.error(e);

        }
    }
}
...

index.tss

'#searchbox' : {
    height : 50,
    top : 25,
    borderRadius : 3,
    backgroundColor : '#FFFFFF',
    hintText : 'Search',
    clearButtonMode : Titanium.UI.INPUT_BUTTONMODE_ONFOCUS,
    returnKeyType: Titanium.UI.RETURNKEY_SEARCH,
    color : '#000',
    zIndex: 1,
    width: '85%',
    paddingLeft: 15,
    suggestions: {
        bottom : 15,
        height: Ti.UI.SIZE,
        visible : false,
        opacity : 0,
        footerTitle : null,
        backgroundColor : '#FFFFFF',
        zIndex: 10
    }
}

Changelog

• 1.0.0 Initial version