问JQuery自动完成-显示焦点上的完整菜单(来自WP短代码)

EN

    //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://bestblenderaustralia.com.au/wp-content/uploads/" + 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://bestblenderaustralia.com.au/wp-content/uploads/" + 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://bestblenderaustralia.com.au/" + 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://bestblenderaustralia.com.au/wp-content/themes/x-child-icon/img/blender-thumb-placeholder.png" 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://bestblenderaustralia.com.au/wp-content/themes/x-child-icon/img/blender-thumb-placeholder.png" 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');