[html5] Large Datalist

[Doug Hardie]

On 4 May 2012, at 03:44, Simon Pieters wrote:

> On Fri, 04 May 2012 09:10:07 +0200, Doug Hardie <bc979 at lafn.org> wrote:
> 
>> That certainly eliminates the error and now I see that script in the browser.  I am unable to figure out how to reference a variable in a HTML element.  I tried the following but it doesn't work (I didn't think it would):
>> 
>> <INPUT NAME=place SIZE=48 MAXLENGTH=64 VALUE='xxx' LIST=datalist>.
>> 
>> It kept facilities as a string rather than using the var.
>> 
>> The following attempt to just check the var also failed:
>> 
>> <script>alert (datalist)</script>
>> 
>> That gives an alert dialog with [object Object].
>> 
>> I suspect I will need something like "<script>document.write (datalist)</script in the right place in the datalist html.  But I think I need to get the variable working first.
> 
> Fetch the JSON file with XHR and use JSON.parse, then populate a <datalist> with the data.
> 
> http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1509
> 
> 
>> 
>> On 3 May 2012, at 23:29, Tatham Oddie wrote:
>> 
>>> You'll need to put it in a variable to access it later.
>>> 
>>>   var datalist = {
>>>       "ID": "facilities",
>>>       "OPTION": [
>>>           {"LABEL": "St. Johns Hospital, Oxnard", "VALUE": "St. Johns"},
>>>           {"LABEL": "Pleasant Valley, Camarillo", "VALUE": "Pleasant Valley"},
>>>           {"LABEL": "Los Robles Hospital, Thousand Oaks", "VALUE": "Los Robles"}
>>>       ]
>>>   };
> 
> I wouldn't recommend doing this since it executes it as code, which is a potential risk.

Now that the school year is over, all the finals graded and grades entered, I can get back to this.

I found what appears to be a simpler approach.  In the js file is:

var DATALIST = "<DATALIST ID=facilities>" +
        "<OPTION LABEL='St. Johns Hospital, Oxnard' VALUE='St. Johns'>" +
        "<OPTION LABEL='Pleasant Valley, Camarillo' VALUE='Pleasant Valley'>" +
        "<OPTION LABEL='Los Robles Hospital, Thousand Oaks' VALUE='Los Robles'>" +
        "</DATALIST>";

then in the HTML is:
	<SCRIPT>document.write (DATALIST)</SCRIPT>
	<INPUT NAME=of SIZE=64 MAXLENGTH=64 VALUE='LIST=facilities'> 

This approach seems quite simple and works well with 3 entries.  However, when there are several hundred entries is it going to have scaling issues?