Terry Gilliver
Posts: 0
Joined: Fri Apr 18, 2014 8:45 pm

populate select via javascript based on an input component

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?

Jeffry Reed
Posts: 0
Joined: Sun Aug 14, 2016 3:59 pm

populate select via javascript based on an input component

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

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

populate select via javascript based on an input component

... and / or - can you show us graphically what you are trying to accomplish on your UI ?

Jeffry Reed
Posts: 0
Joined: Sun Aug 14, 2016 3:59 pm

populate select via javascript based on an input component

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.

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

populate select via javascript based on an input component

Jeff,

thanks... my question really was to Terry..... :-) Terry - what does your UI look like and what are you trying to accomplish?

Best,

Bruce

Terry Gilliver
Posts: 0
Joined: Fri Apr 18, 2014 8:45 pm

populate select via javascript based on an input component

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:

Image

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)".

Terry Gilliver
Posts: 0
Joined: Fri Apr 18, 2014 8:45 pm

populate select via javascript based on an input component

I came up with a better way:
I created a Generic Service and used that to populate the list component,

preAppery&#46;areas = Appery&#46;createClass(null, {

Code: Select all

 init : function(requestOptions) { 
     this&#46;__requestOptions = $&#46;extend({}, requestOptions); 
     console&#46;log("request options: ",this&#46;__requestOptions); 
 }, 

 process : function(settings) { 
     settings&#46;beforeSend(settings); 
     if (this&#46;__requestOptions&#46;echo) { 
         settings&#46;success(this&#46;__requestOptions&#46;echo); 
     } else { 

         var areas = [ 
             "AB (Aberdeen)", 
             "AL (St&#46; 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 = '['; 

         &#47;&#47;lines separated by a comma 
         for (var i = 0; i < areas&#46;length - 1; i++) { 
             responseData += '{"area" : "' + areas[i] + '"},'; 
         } 
         &#47;&#47;last line no comma 
         responseData += '{"area" : "' + areas[areas&#46;length -1] + '"}'; 
         &#47;&#47;add array close 
         responseData += ']'; 

         settings&#46;success( 
             JSON&#46;parse(responseData) 
         ); 
     } 
     settings&#46;complete('success'); 
 } 

});/pre

Sample Output:

Image

Return to “Issues”