JQuery 自动完成 - 在焦点上显示完整菜单（来自 WP 简码）

Question

我有一个有效的自动完成表单。我希望它无需键入即可在单击时显示下拉列表中的所有标签。

Stack exchange 对这个问题有很多很好的答案，我都试过了，但都没有成功。我怀疑问题是整个事情都是从 Wordpress 简码中加载的。如果可能的话，希望保持这种状态。有帮助吗？

我有两个使用自动完成的输入。

    //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');

Answer 1

那是不可能的，因为 jquery 自动完成只有在文本块内的任何值发生变化时才会触发，但显示所有标签是可能的

看看这个，但源代码中的解决方法会给你想要的结果

Answer 2

感谢您的帮助，我确实找到了解决方法，它就像绑定焦点事件以触发空的自动完成搜索一样简单。只需将 #yourid 替换为您输入的 ID 即可。

$("#yourid").bind("focus", function(){
  if($(this).val()==""){ 
     $(this).autocomplete("search");
  } 
});

Answer 3

使用选项 minLength 设置为 0

minLength: 0

希望对您有所帮助

JQuery 自动完成 - 在焦点上显示完整菜单（来自 WP 简码）

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

javascript

wordpress

jquery

autocomplete