JQuery Autocomplete - show full menu on focus (from within WP shortcode)

I have a working autocomplete form. I would love it to show all the labels in the dropdown on a single click without having to type.

Stack exchange is full of great answers to this question and I have tried them all without success. I suspect the problem is that the whole thing is being loaded from within a Wordpress Shortcode. Would like to keep it that way if possible. Any help?

I have two inputs that use Autocomplete.

    //create autocomplete compare box shortcode
function autocomparebox( $atts, $content = null ) {
   return '
   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
   <script>
  $(function() {
    var blenders = [
      {
        value: "optimum-9400",
        label: "Optimum 9400",
        icon: "2015/02/optimum-9400-blender-60x60.jpg"
      },
      {
        value: "optimum-9200",
        label: "Optimum 9200",
        icon: "2015/02/optimum-9200-60x60.jpg"
      },
      {
        value: "optimum-8200",
        label: "Optimum 8200",
        icon: "2015/02/optimum-8200-60x60.jpg"
      }
    ];

//autocomplete Input 1

    $( "#blender" ).autocomplete({
      minLength: 0,
      source: blenders,
      focus: function( event, ui ) {

        $( "#blender" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#blender" ).val( ui.item.label );
        $( "#blender-id" ).val( ui.item.value );
        $( "#blender-icon" ).attr( "src", "http://ift.tt/1H9QrFG" + ui.item.icon );

        return false;
      }
    })

//Autocomplete Input 2

    $( "#blender2" ).autocomplete({
      minLength: 0,
      source: blenders,
      focus: function( event, ui ) {
        $( "#blender2" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#blender2" ).val( ui.item.label );
        $( "#blender-id2" ).val( ui.item.value );
        $( "#blender-icon2" ).attr( "src", "http://ift.tt/1H9QrFG" + ui.item.icon );

        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.label + "<br></a>" )
        .appendTo( ul );
    };
  });

// Focus on Input 1 on page load, focus on Input 2 after Input 1 option is selected
$(document).ready(function(){
    $("#blender").focus();
    $("#blender-icon").click(function(){
        $("#blender").focus();
    });
    $("#blender-icon2").click(function(){
        $("#blender2").focus();
    });
    $("#ui-id-1 li, #ui-id-1").click(function(){
        /* if ($("#blender2").val().length > 0) {
        $( "#compareform" ).submit();
        } else { */
        $("#blender2").focus();
        // }

    });
    $("#ui-id-2 li, #ui-id-2").click(function(){
        $("#blender").focus();
    });
});

//Values of selected items are passed to URL

function compareurl(){
    var url="http://ift.tt/1B9L6q3" + document.getElementById("blender-id").value + "-vs-" + document.getElementById("blender-id2").value;
    location.href=url;
    return false;
    }

//Make sure both inputs are filled before submission

function validateForm() {
    var errorWarning = document.querySelector("#error-warning");
    var successLoading = document.querySelector("#success-loading");
    var x = document.forms["compareform"]["blender"].value;
    var y = document.forms["compareform"]["blender2"].value;
    if (x == null || x == ""|| y == null || y == "" || x == y) {
        errorWarning.style.display = "block";
        return false;
    } else {
    errorWarning.style.display = "none";
    successLoading.style.display = "block";
    return compareurl();
    }
}

  </script>
  <form id="compareform" onSubmit="return validateForm();">
   <div class="blender-compare-wrapper">
   <div id="blender-label"></div>
<img id="blender-icon" src="http://ift.tt/1H9QrFI" class="ui-state-default" alt="">
<input name="blendera" id="blender" placeholder="Type a blender..." onfocus="this.placeholder = """>
<input type="hidden" id="blender-id">
<span class="versus"> VS. </span>
<img id="blender-icon2" src="http://ift.tt/1H9QrFI" class="ui-state-default" alt="">
<input name="blenderb" id="blender2" placeholder="Type a blender..." onfocus="this.placeholder = """>
<input type="hidden" id="blender-id2">
<input type="submit" id="comparesubmit" value="Compare">
<p id="error-warning">Please choose two different blenders.</p>
<p id="success-loading">Loading results...</p>
</form>

</div>
   ';}

//Add the shortcode
add_shortcode('autocomparebox', 'autocomparebox');