Javascript JQuery自动完成，单击时有建议，键入时有不同建议

我想在用户单击输入字段后建议他输入，但我也想在他输入字母时保留一个建议列表

例如，假设我有一个简单的代码：

<script>
$( "#autocomplete" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});
</script>

$（“#自动完成”）。自动完成({
来源：[“c++”、“java”、“php”、“coldfusion”、“javascript”、“asp”、“ruby”]
});

我想添加一个特性，让用户在点击表单输入时有另一个建议，比如说“Python”。 例如，在此图像中，单击输入字段后，我们会有一个建议（“灵活”）：

当我们开始输入字母时，我们可以得到一个建议列表：

---

谢谢你的帮助。

我从你的问题中得到了两个理解，我想从两个角度回答：

1） 单击时默认自动完成，并查看有关键入的进一步建议

小提琴：

代码：

您需要触发文本框的点击事件自动完成，并将自动完成的最小长度设置为0。

2） 单击第一个“自动完成”中的任何建议，您需要另一个“自动完成”：

小提琴：

代码：

$(document).ready(function() {

    var first = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];
    var second = {
    "ask" : ["to","two","three","too"],
    "one" : ["great","game","gone","going"],
    "tweet" : ["tweeter","twitter","tweety","true"]
    }

    $( "#firstHint" ).autocomplete({
        source: first,
        select : function(event, ui){
         if(ui.item && ui.item.value){
          autoSecond(second[ui.item.value]);
          $(this).addClass("hide");
          $("#secondHint").removeClass("hide").focus();
         }
        }
    });

    function autoSecond(val){
     $("#secondHint").autocomplete({
        source: val,
        select : function(event, ui){
         if(ui.item && ui.item.value){
           alert(ui.item.value);
         }
        }
    });   
    }

});

需要在选择第一个建议时隐藏第一个字段，并显示将显示新建议的第二个字段

如果需要任何其他更改，请告诉我。我将根据需要修改我的答案

根据您的要求进行新的更改：

---

您的

minlength

设置为什么？嘿……您是否希望用户从第一个自动完成中选择一些建议，然后根据他的选择，他应该看到另一个自动完成，并且建议仅链接到第一个自动完成选择？如果是这种情况，我制作了一个JSFIDLE：请检查您是否需要。我将如果你更新了你的确切要求，我会更新我的答案。谢谢你的回答，但不幸的是你没有抓住重点，我想要的是1）当我点击输入时出现“Python”一词2）有一个除“Python”之外的其他词的列表“当我开始输入一些单词时出现。我想我解释的不对，我的错。太好了！非常感谢

$(document).ready(function() {

    var first = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];
    var second = {
    "ask" : ["to","two","three","too"],
    "one" : ["great","game","gone","going"],
    "tweet" : ["tweeter","twitter","tweety","true"]
    }

    $( "#firstHint" ).autocomplete({
        source: first,
        select : function(event, ui){
         if(ui.item && ui.item.value){
          autoSecond(second[ui.item.value]);
          $(this).addClass("hide");
          $("#secondHint").removeClass("hide").focus();
         }
        }
    });

    function autoSecond(val){
     $("#secondHint").autocomplete({
        source: val,
        select : function(event, ui){
         if(ui.item && ui.item.value){
           alert(ui.item.value);
         }
        }
    });   
    }

});