Search-as-you-type Combobox

Question

I'm completely new to php coding, with a basic knowledge of html.

Nonetheless, I was given simple tasks of improving a form page of our website company. It is written in php, as you may realized.

One of these tasks consists of adding a 'search-as-you-type' function to a text input combobox containing a list of suppliers. From my code analysis, I believe the trick should be implemented in this code snippet:

 var storeSupplier = new Ext.data.JsonStore({
     url: 'php/selectSupplier.php',
     root: 'results',
     fields: ['idSupplier', 'nameSupplier']
 });

 selectSupplier = new Ext.form.ComboBox({
     width: 250,
     xtype: 'combo',
     mode: 'remote',
     triggerAction: 'all',
     editable: false,

     fieldLabel: 'Supplier',
     name: 'nameSupplier',
     displayField: 'nameSupplier',
     valueField: 'idSupplier',
     hiddenName: 'idSupplier',
     store: storeSupplier
 });

I've looked into some php documentation and other solutions, but I couldn't understand nor adapt it to my situation. The closest I got was this Q&A, which seems like my coding but they are not talking about searching and matching values; this example which shows what I am trying to achieve (just the "Starting With" option would be perfect) and this documentation, which gives me some interesting methods like FindRecordByValue(value), but I have no idea how to use it properly.

Any help would be appreciated. Cheers,

--UPDATE--:

I noticed that some other fields of my form have already have this sort of filter function. The reason why I can't just do the same for the above situation is because of the mode:remotestatus. The ones that are working are stated asmode: local.

When I tried the following approach, I got no values showing up at all:

listeners: {
    'keyup': function() {
        this.store.filter('nameSupplier', this.getRawValue(), true, false);
    },
    'beforequery': function(queryEvent) {
        queryEvent.combo.onLoad();
        queryEvent.combo.expand();
        // prevent doQuery from firing and clearing out my filter.
        return false;
    }
}

Do you really need to use ExtJs or jQuery would be also good? — Linesofcode
Well, I'm just following up a previous coding from another person. As php or javascript or any oh this languages are my area of expertise, I'm trying to figure out the easiest way of solving the issue. — lucas.mdo
Did you check the official "kitchen sink" examples? Like these: Remote query mode and Remote loaded, local query mode — Greendrake
Nice examples, the first one is exactly what I've been looking for. But, again, I was unable to implement it, as my query is lost when the store is reloaded, which seems to happen everytime I press a new key. Interesting fact, if I type my query, and press DELETE, it magically shows the results I expect. — lucas.mdo

lucas.mdo lucas.mdo · Accepted Answer · 2015-07-13T19:18:23

Honestly, I'm still wondering why it worked, but nonetheless, I've managed to solve the question by simply adding the following line of code inside the declaration of the store I was using.:

var storeSupplier = new Ext.data.JsonStore({
        url: 'php/selectSupplier.php', 
        autoLoad: true, // <<<<<<<<<<<<<<<<<<<ADDED THIS LINE
        root: 'results', 
        fields: ['idSupplier','nameSupplier']
});

selectSupplier = new Ext.form.ComboBox({
        width:          250,
        xtype:          'combo',
        mode:           'remote',
        triggerAction:  'all',
        editable:       true, // <<<<<<<<<<<<<<<<<<CHANGED THIS ONE

        fieldLabel:     'Supplier',
        name:           'nameSupplier',
        displayField:   'nameSupplier',
        valueField:     'idSupplier',
        hiddenName:     'idSupplier',
        store:  storeSupplier

});

Search-as-you-type Combobox

1 Answers