PDA

View Full Version : Local version of the Live Search Combo box example



Jangla
27 May 2010, 5:59 AM
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):



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 "Château 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 :)

Jangla
28 May 2010, 12:16 AM
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:




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);
}
}
});
});";

Jangla
28 May 2010, 7:41 AM
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".

Jangla
1 Jun 2010, 12:11 AM
Anyone able to help with the remaining issue?