Results 1 to 4 of 4

Thread: Local version of the Live Search Combo box example

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487

    Default Local version of the Live Search Combo box example

    For reasons I won't go into, I can't implement a php-based live search combo box as in the examples page.

    I'm therefore trying to create a version that loads data into a local ArrayStore and duplicates the same kind of functionality. Primarily things like the ability to search for any string in the tagetted field are very important.

    I have a test page set up here: http://www.holiday-chateau.com/index.php?id=10790

    This test page used a combo box without the trigger control to give the same look as the Live Search example and uses the following code to set it up (I've truncated the store records as there are hundreds of them in the test page):

    Code:
                Ext.onReady(function(){
    
                    var propertyData = [["England  & Wales","Cotswolds, Peak District, Heartlands","Somersditch Castle  (23)"],["England & Wales","Cotswolds, Peak District,  Heartlands","The River House (10)"],["England & Wales","Cumbria,  Lake District, North","Castle Pearson (22 to 28)"]]; 
      
    
    
                    // create the data store
                    var store = new Ext.data.ArrayStore({
                        fields: [
                           {name: 'country'},
                           {name: 'region'},
                           {name: 'propertyname'}
                        ],
                        data: propertyData
                    });
                    
                    // manually load local data
                    store.loadData(propertyData);
    
                    var search = new Ext.form.ComboBox({
                        store: store,
                        displayField:'propertyname',
                        typeAhead: false,
                        mode: 'local',
                        width: 300,
                        hideTrigger:true,
                        selectOnFocus:true,
                        applyTo: 'search'
                    });
                });";
    The most obvious limitation of this test page is that "wildcard" searches are impossible i.e. if I were to begin typing "Castle", I would not get the record for "Somersditch Castle" in the "results". Also, it would need to return results if someone were to begin typing "Chateau", even if the property name were actually "Chteau SomethingOrOther".

    So, I guess my first question is whether this is possible at all. My second question would be to ask for some direction as to how I can make this work as intended.

    Thanks

  2. #2
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487

    Default

    A little update as I've had some success in sorting this out but I'm still not quite there.

    On the test page linked to above, I've managed to get the combo to "kind of" work. At the moment, for example, if I type "Castle" I only get one result dropping down - the only one with the word "Castle" as the first word in the name. If, however, I then move focus away from the drop down, click back into it and then hit the down arrow button, all the records with "Castle" anywhere in the name drop down. This last bit is the desireed result but I'm stuggling to work out why it doesn't work before I lose and then regain focus on the control.

    Here's my code so far:

    Code:
    Ext.onReady(function(){
        var propertyData = [["England  & Wales","Cotswolds, Peak District, Heartlands","Somersditch Castle  (23)"],["England & Wales","Cotswolds, Peak District,  Heartlands","The River House (10)"],["England & Wales","Cumbria,  Lake District, North","Castle Pearson (22 to 28)"]];
        
          var store = new Ext.data.ArrayStore({
            fields: [
                {name: 'country'},
                {name: 'region'},
                {name: 'propertyname'}
            ],
            data            : propertyData,
            anyMatch        : true,
            caseSensitive    : false
        });
            
        // manually load local data
        store.loadData(propertyData);
            
        var search = new Ext.form.ComboBox({
            id                : 'combo',
            store            : store,
            enableKeyEvents    : true,
            displayField    : 'propertyname',
            typeAhead        : false,
            triggerAction    : 'all',
            mode            : 'local',
            width            : 300,
            hideTrigger        : true,
            selectOnFocus    : true,
            applyTo            : 'search',
            listeners         : {
                keyup : function(el, type){
                    store.filter('propertyname', el.getValue(), true, false, false);
                }
            }
        });
    });";

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487

    Default

    Further update - I've now realised that with my code the records are being correctly filtered, but the drop down isn't dropping down far enough to show anything more than the first record.

    So I guess my only remaining question is how can I programmatically control the height of the drop down list to ensure all records are displayed? I stumbled across this realisation by accident as it seems to work 1% of the time but refreshing the page and trying again resulted in "failure".

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487

    Default

    Anyone able to help with the remaining issue?

Similar Threads

  1. Live Search Combo Box - Results Not Displaying
    By scblue in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 14 Jul 2010, 12:19 AM
  2. Local HTTP Paging Proxy used for Combobox live search and grid
    By richarpw in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 13 Jul 2010, 6:04 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •