Autocomplete Tabindex

by Rational Rabbit

HTML

<script src="http://www.rationalrabbit.com/js/jquery-1.10.2.min.js"></script>
<script src="http://www.rationalrabbit.com/js/jquery-ui-1.10.4.custom.min.js"></script>
<link rel="stylesheet" href="http://www.rationalrabbit.com/css/smoothness/jquery-ui-1.10.4.custom.css">
   <div style="width:500px;">
      <form action="#" method="post" id="TranTime" name="TranTime">
         <div id="FormHead">
            <div style="width:40%; vertical-align:middle;"><div class="HeadRoom">Origin<div id="OriNF"></div></div></div>
            <div style="width:40%; vertical-align:middle;"><div class="HeadRoom">Destination<div id="DesNF"></div></div></div>
            <div style="width:15%;">Pickup<br />Date</div>
         </div>
         <div id="FormBody">
            <div style="width:40%;" id="OriCell1">
               <input tabIndex="0" class="SelectList" id="OriZip" type="text" style="width:97%" name="OriZip" value="90008" autocomplete="off" />
            </div>
            <div style="width:40%; margin-right:0;" id="DesCell1">
               <input tabIndex="1" class="TextBox2 SelectList" id="DesZip" type="text" style="width:97%" name="DesZip" value="99206" autocomplete="off" />
            </div>
            <div style="width:15%;"><input tabindex="2" class="TextBox2" id="PUDate" name="ShipDate" type="text" maxlength="10" style="width:94%" value="" /></div>
            <div style="clear:both; width:100%;">
               <div style="width:80%; text-align:center;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input tabIndex="4" id="ClearButton" type="button" value="Clear" /></div>
            </div>
         </div>
         <div style="clear:both; text-align:center; padding-top:30px;">
            <input type="hidden" id="OriMatch" value="" />
            <input tabIndex="3" type="submit" name="Submit" value="Submit" />
         </div>
      </form>
   </div>

CSS

body {font-size:11px; font-family:verdana;}
      #FormHead div {float:left; text-align:center; margin-right:4px; margin-bottom:2px; height:30px;}
      #FormHead .HeadRoom {width:100%; text-align:center;}
      #FormBody {clear:both;}
      #FormBody div {float:left; margin-right:4px;}
      #OriNF, #DesNF {width:100%; color:#800000; text-align:center;}
      .fakewindowcontain .ui-widget-overlay {position: absolute;}
      .ui-autocomplete {max-height:300px; width:144px; overflow-y:hidden; overflow-x:hidden; font-size:10px; line-height:100%;}
      .ui-autocomplete-loading {background: white url('http://www.rationalrabbit.com/images/ui-anim_basic_16x16.gif') right center no-repeat;}

JavaScript

$(document).ready(function()
      {
         $("#ClearButton").on("click", function()
         {
             ClearZipFields(this.form,'Both');
             $("#OriZip").focus();
         });
         $("#OriZip").on("focus", function()
         {
            console.info("ORI Recognized on focus");
         });
         $("#OriZip").on("blur keydown", function(e)
         {
            if (e.keyCode == 9)
            {
               // if Tab is pressed, return focus (prevents premature loss of focus)
               // Timeout is necessary to return focus and trigger event
               // Trigger is necessary to force autocomplete
               setTimeout(function() { $("#OriZip").focus(); }, 50);
               var ev = jQuery.Event("keydown", {keyCode:40});
               setTimeout(function() {jQuery("#OriZip").trigger(ev);}, 50); // Trigger a down arrow to instigate autocomplete
            }
         });
         $("#DesZip").on("blur keydown", function(e)
         {
            if (e.keyCode == 9)
            {
               setTimeout(function() { $("#DesZip").focus(); }, 50);
               var ev = jQuery.Event("keydown", {keyCode:40});
               setTimeout(function() {jQuery("#DesZip").trigger(ev);}, 50);
            }
         });

        $("#OriZip").autocomplete(
         {
            source: Origins,
            delay: 500,
            select: function(e, ui)
            {
               if(e.keyCode === 9)
               {
                  // In browsers other than IE, when tab key (9) is used to exit a previous list and there is a dropdown under DesZip, the Des list will disappear.
                  // This resolves the issue.
                  e.stopImmediatePropagation();
                  e.preventDefault();
               }
            }
         });
         $("#DesZip").autocomplete(
         {
            source: Destinations,
            delay: 500
         });
         // Highlights first selection in list
        ...