Question

我几乎成功地在下拉列表中实现了Chosen.js。我的代码在这里：

$('#skills_chosen').on('change', function(){
    var items="";
    var typedOpt = $('#skills_chosen').val();
    $.getJSON("php/skillList.php", {term:typedOpt}, function(skillList){
    $.each(skillList,function(index,item) 
    {
      items+="<option value='"+item.skill+"'>"+item.skill+"</option>";
    });
    $("#skills").append(items); 
    $('.chzn-select').trigger("chosen:updated");
    });

});

我有一个小问题。只有在选择框失去焦点后，下拉才会触发ajax调用，并且在选择框重新获得焦点之前，这些选项才可用。这显然不是非常用户友好。

我试图将事件触发器更改为

$('#skills_chosen').on('keyup', function(){

以及keydown，按键。这些都是第一次工作，但它们清空文本区域，因此只能输入一个字符。它让我发疯了。

我还尝试包装ajax调用以填充页面加载时的选择框，预先填充选择选项。这会停止选择选项框的工作。如果我试图保留＆＃34;文本字段中保留的内容＆＃34;选择选项更新后，它没有什么区别。

我做错了什么，如何在第一次选择框获得焦点并且用户开始输入时让它工作？

Answer 1

点击事件怎么样？

    $('#skills_chosen').on('click change', function(){
        var items="";
        var typedOpt = $('#skills_chosen').val();
        $.getJSON("php/skillList.php", {term:typedOpt}, function(skillList){
        $.each(skillList,function(index,item) 
        {
          items+="<option value='"+item.skill+"'>"+item.skill+"</option>";
        });
        $("#skills").append(items); 
        $('.chzn-select').trigger("chosen:updated");
        });

    }) ;

Answer 2

 $('#skills_chosen').on('click change', function(){
    var items="";
    var typedOpt = $('#skills_chosen').val();
    $.getJSON("php/skillList.php", {term:typedOpt}, function(skillList){
    $.each(skillList,function(index,item) 
    {
      items+="<option value='"+item.skill+"'>"+item.skill+"</option>";
    });
    $("#skills").append(items); 
    $('.chzn-select').trigger("chosen:updated");
    });

}) ;

@madalin ivascu这是一种享受，谢谢你：）

Chosen.js动态填充keyup上的下拉列表

2 个答案: