Sencha Touch 2 Search List

Question

am having issue designing and getting a search field to work, i don't know how to get this working, i can see any documentation or sample code on Sencha Touch 2. any help will be appreciated. this my current stage:

`Ext.define('ikhlas.view.SearchProfile', {
extend: 'Ext.Panel',
xtype: 'searchpanel',

    config:{
            title: 'Search',
                iconCls: 'search',
                scrollable: true,
                styleHtmlContent: true,

    items: [
        {
            xtype: 'fieldset',
                title:'Search Profile',
                iconCls:'add',

    items: [

            {

            xtype: 'searchfield',
                name:'searchfield',
                placeHolder:'Search',
            },

           ]    

        },

           ]

        }

});`

And my controller looks like this (Noting has been done, i don't know how to start help pls):

Ext.define('ikhlas.controller.SearchField',{
extend: 'Ext.app.Controller',

config:{
    refs:{
        submitpanel:'loginpanel'
    },

control:{

    }
},

  });

And here are the list of Data's i want to Auto search:

data: [
            {firstName: 'Tommy',   lastName: 'Maintz'},
            {firstName: 'Rob',     lastName: 'Dougan'},
            {firstName: 'Ed',      lastName: 'Spencer'},
            {firstName: 'Jamie',   lastName: 'Avins'},
            {firstName: 'Aaron',   lastName: 'Conran'},
            {firstName: 'Dave',    lastName: 'Kaneda'},
            {firstName: 'Michael', lastName: 'Mullany'}

i want the search field to work in such a way that as the user is typing in character, it will auto pop suggestion just like: http://docs.sencha.com/touch/2-0/#!/example/search-list

Answer 1

In your controller you should listen for two events, clearicontap and keyup for the searchfield.

...
control: {
    'searchfield': {
        keyup: 'onSearchQueryChanged',
        clearicontap: 'onSearchReset'
    }
},

onSearchQueryChanged: function(field) {
    // as in sample
    //get the store and the value of the field
        var value = field.getValue(),
            store = this.getStore(); //you should actually point to the real store

        //first clear any current filters on thes tore
        store.clearFilter();

        //check if a value is set first, as if it isnt we dont have to do anything
        if (value) {
            //the user could have entered spaces, so we must split them so we can loop through them all
            var searches = value.split(' '),
                regexps = [],
                i;

            //loop them all
            for (i = 0; i < searches.length; i++) {
                //if it is nothing, continue
                if (!searches[i]) continue;

                //if found, create a new regular expression which is case insenstive
                regexps.push(new RegExp(searches[i], 'i'));
            }

            //now filter the store by passing a method
            //the passed method will be called for each record in the store
            store.filter(function(record) {
                var matched = [];

                //loop through each of the regular expressions
                for (i = 0; i < regexps.length; i++) {
                    var search = regexps[i],
                        didMatch = record.get('firstName').match(search) || record.get('lastName').match(search);

                    //if it matched the first or last name, push it into the matches array
                    matched.push(didMatch);
                }

                //if nothing was found, return false (dont so in the store)
                if (regexps.length > 1 && matched.indexOf(false) != -1) {
                    return false;
                } else {
                    //else true true (show in the store)
                    return matched[0];
                }
            });
        }
},

onSearchReset: function(field) {
    this.getStore().clearFilter();
}

...

This example will emulate the same behavior as in ST2 SDK, that is filtering a store of Ext.List. Naturally, you will probably end up implementing your own logic for filtering.

Note that searchfield is nothing more but a styled textfield, usually with clear button to the right (depends on browser/os), as defined in HTML5.