Skip to content

Provide autocomplete feature for your testfields with external data source

Notifications You must be signed in to change notification settings

TheSmiths-Widgets/ts.suggestionfield

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Titanium Alloy License

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.

Preview

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

wearesmiths

About

Provide autocomplete feature for your testfields with external data source

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published