I have a select component which could have a hundred or more entries.
Any idea how I can use an input component as a partial search to narrow down my list length?
I have a select component which could have a hundred or more entries.
Any idea how I can use an input component as a partial search to narrow down my list length?
Hi Terry,
if you are populating the component via JavaScript, possibly lodash may suite your needs. Here are a couple examples of how I am using it, suite to your needs.
So lets say I have a array of objects, ordersArray, which has a field StatusId
// Return the number of pending orders
var data = JSON.parse(localStorage.getItem("ordersArray"));
var pendingOrders = _.filter(data, function(o) {
return o.StatusId == '1';
}).length;
// Return orders based on order status
var data = Apperyio.storage.ordersArray.get();
var dataFiltered = _.filter(data, function(o) {
return o.StatusId == selectedOrderStatus;
});
... and / or - can you show us graphically what you are trying to accomplish on your UI ?
in what i was presenting the UI could be anything. Your question was how to 'partial search to narrow down my list length"
Tomorrow I will try to start to put together some applicable examples. Using lodash syntax what is going on is not clear, but the results are.
This would be a good starter thread about UI component performance.
Jeff,
thanks... my question really was to Terry..... Terry - what does your UI look like and what are you trying to accomplish?
Best,
Bruce
Ok Thanks guys for your answers, but I think I have a solution:
Checking out jquery mobile documentation, I have found that I can filter using something like this:
pre<form class="ui-filterable">
<input id="filterBasic-input" data-type="search">
</form>
<!-- listitems -->
<ul data-role="listview" id="test_mobilelist_9" class="test_mobilelist_9 ui-group-theme-f ui-listview ui-listview-inset ui-corner-all ui-shadow" name="mobilelist_9" dsid="mobilelist_9" data-inset="true" data-theme="f" data-divider-theme="b" data-count-theme="b" style="" data-filter="true" data-input="#filterBasic-input" data-split-icon="carat-r">
Code: Select all
<li class="ui-first-child">
<a id="test_mobilelistitem_10" name="mobilelistitem_10" dsid="mobilelistitem_10" tabindex="5" class="test_mobilelistitem_10 ui-btn ui-btn-icon-right ui-icon-carat-r">
<h3>Item 1</h3>
</a>
</li>
<!-- mobilelistitem_12 -->
<li class="test_mobilelistitem_12" data-icon="carat-r">
<a id="test_mobilelistitem_12" name="mobilelistitem_12" dsid="mobilelistitem_12" tabindex="5" class="test_mobilelistitem_12 ui-btn ui-btn-icon-right ui-icon-carat-r">
<h3>Item 2</h3>
</a>
</li>
<!-- mobilelistitem_14 -->
<li class="test_mobilelistitem_14 ui-last-child" data-icon="carat-r">
<a id="test_mobilelistitem_14" name="mobilelistitem_14" dsid="mobilelistitem_14" tabindex="5" class="test_mobilelistitem_14 ui-btn ui-btn-icon-right ui-icon-carat-r">
<h3>Item 3</h3>
</a>
</li>
</ul>/pre
I tried it on the select component, but that doesn't work to well as it doesn't immediately update the list, but on a listview (as above) the response is instantaneous. I have implemented this as a "html component"
As I have a large list, I will modify the javascript to load the items from a javascript array, to reduce the code as much as possible.
But all is looking good, Thanks again guys for your input.
The out put is something like this, where the input box is the filter:
As for what I am accomplishing, is a list of partial postcodes (zipcodes) from which someone can select an area. For instance one entry might be "DE (Derbyshire)".
I came up with a better way:
I created a Generic Service and used that to populate the list component,
preAppery.areas = Appery.createClass(null, {
Code: Select all
init : function(requestOptions) {
this.__requestOptions = $.extend({}, requestOptions);
console.log("request options: ",this.__requestOptions);
},
process : function(settings) {
settings.beforeSend(settings);
if (this.__requestOptions.echo) {
settings.success(this.__requestOptions.echo);
} else {
var areas = [
"AB (Aberdeen)",
"AL (St. Albans)",
"B (Birmingham)",
"BA (Bath)",
"BB (Blackburn)",
"BD (Bradford)",
"BH (Bournemouth)",
"BL (Bolton)",
"BN (Brighton)",
"BR (Bromley)",
"BS (Bristol)",
"CA (Carlisle)",
"CB (Cambridge)",
"CF (Cardiff)",
"CH (Chester)",
"CM (Chelmsford)",
"CO (Colchester)",
"CR (Croydon)",
"CT (Canterbury)",
"CV (Coventry)",
"CW (Crewe)",
"DA (Dartford)",
"DD (Dundee)",
"DE (Derby)",
"DH (Durham)",
"DG (Dumfries)",
"DL (Darlington)",
"DN (Doncaster)",
"DT (Dorchester)",
"DY (Dudley)",
"E (East London)",
"EC (East Central London)",
"EH (Edinburgh)",
"EN (Enfield)",
"EX (Exeter)",
"FK (Falkirk)",
"FY (Blackpool)",
"G (Glasgow)",
"GL (Gloucester)",
"GU (Guildford)",
"HA (Harrow)",
"HD (Huddersfield)",
"HG (Harrogate)",
"HP (Hemel Hempstead)",
"HR (Hereford)",
"HU (Hull)",
"HX (Halifax)",
"IG (Ilford)",
"IP (Ipswich)",
"IV (Inverness)",
"KA (Kilmarnock)",
"KT (Kingston upon Thames)",
"KY (Kirkcaldy)",
"GU (Guildford)",
"L (Liverpool)",
"LA (Lancaster)",
"LD (Llandrindod)",
"LE (Leicester)",
"LL (Wales postcodes)",
"LN (Lincoln)",
"LS (Leeds)",
"LU (Luton)",
"M (Manchester)",
"ME (Medway)",
"ML (Motherwell)",
"MK (Milton Keynes)",
"N (North London)",
"NE (Newcastle)",
"NG (Nottingham)",
"NN (Northampton)",
"NP (Newport)",
"NR (Norwich)",
"NW (North West London)",
"OL (Oldham)",
"OX (Oxford)",
"PA (Paisley)",
"PE (Peterborough)",
"PH (Perth)",
"PL (Plymouth)",
"PO (Portsmouth)",
"PR (Preston)",
"RG (Reading)",
"RH (Redhill)",
"RM (Romford)",
"S (Sheffield)",
"SA (Swansea)",
"SE (South East London)",
"SG (Stevenage)",
"SK (Stockport)",
"SL (Slough)",
"SM (Sutton)",
"SN (Swindon)",
"SO (Southampton)",
"SP (Salisbury)",
"SR (Sunderland)",
"SS (Southend on Sea)",
"ST (Stoke-on-Trent)",
"SW (South West London)",
"SY (Shrewsbury)",
"TA (Taunton)",
"TD (Galasheils)",
"TF (Telford)",
"TN (Tonbridge)",
"TQ (Torquay)",
"TR (Truro)",
"TS (Cleveland)",
"TW (Twickenham)",
"UB (Southall)",
"WA (Warrington)",
"W (West London)",
"WC (West Central London)",
"WD (Watford)",
"WF (Wakefield)",
"WN (Wigan)",
"WR (Worcester)",
"WS (Walsall)",
"WV (Wolverhampton)",
"YO (York)"
];
var responseData = '[';
//lines separated by a comma
for (var i = 0; i < areas.length - 1; i++) {
responseData += '{"area" : "' + areas[i] + '"},';
}
//last line no comma
responseData += '{"area" : "' + areas[areas.length -1] + '"}';
//add array close
responseData += ']';
settings.success(
JSON.parse(responseData)
);
}
settings.complete('success');
}
});/pre
Sample Output: