Time Zone Picker - for PHP values - Example using HTML5 <datalist> 'handler'



Enter Time Zone   Your selection will display here
So why use HTML5 <input list='tzones' id='tz_pick' name='tz_pick' placeholder='Europe/Warsaw' /> instead of a 'normal' input - select - option drop-down construct ?

It uses <datalist id='tzones'> which contains all the options. This <input> method is a self-filtering auto-complete solution even with a partial match to what is typed in. It is extremely well suited to large scale options.
This example is working with nearly five hundred possibilies !
- Imagine a user scrolling through a dropdown list for what they want !
It is a strange mix of text and dropdown selector without actually being either, but therein lies the problem -

In the usual <form> <input> <submit> construct everything is fine, but if you want it as a stand-alone 'execute' on selection the 'value' is NOT available until the user has clicked outside the selection area.

There are many, many, many code snippets out there, but none of them actually work ! - they usually 'fire' on any input thus passing incorrect / partial information instead of a unique final value.

the beteljuice has changed all that.

Note; Currently one small bug with HTML5 and FireFox - only first twenty matches are displayed, if you keep typing the available options WILL be displayed !

How It's Done

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<input list='tzones' id='tz_pick' name='tz_pick' placeholder='Europe/Warsaw' /> Enter Time Zone
  <span id="output">Your selection will display here</span>

<script>
$("input[name='tz_pick']").on('input', function(){ // everytime there is a change to 'input' text
   var test=false;
   var $input = $(this),
       val = $input.val();
       list = $input.attr('list'),
       match = $('#'+list + ' option').filter(function() {
// walking through the list
// optional: check for any PARTIAL match
           if ($(this).val().toLowerCase().search(val) > -1) {
              test=true;
           }
// end optional check

           return ($(this).val() === val);
       });

// using optional PARTIAL check   
    if(test === true){
// do something
         $("#output").html('Options Available');
    } else {
// do something else
       $("#output").html('<font color="red"><b>NO Options Available</font></b>');
    }
// END using optional PARTIAL check

// another option ;-) - they've deleted all the content of the 'input' text !
    if(val.length < 1) {
        $("#output").html('Try again !');
    }
// END option
  
    if(match.length > 0) {
// DO SOMETHING SERIOUS - this is the final OK		
        $("#output").html('<b>Option SELECTED </b>'+$(this).val());
    } else {
        // value is not in list - you could show some sort of advisory ?
    }
});
</script>
			
Another beteljuice plaything