私は編集可能なドロップダウンリストに "オートリスト機能"が必要です

Question

私はを追加しますの内容は編集可能なドロップダウンリストにテキストを入力すると内容が表示されます。そのためのjsですか？

$(document).ready(function(){ 
 
    
 
    $(".editableBox").change(function(){   
 
     $(".timeTextBox").val($(".editableBox option:selected").html()); 
 
    }); 
 
});

.editableBox { 
 
    width: 75px; 
 
    height: 30px; 
 
} 
 

 
.timeTextBox { 
 
    width: 54px; 
 
    margin-left: -78px; 
 
    height: 25px; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <select class="editableBox">   
 
     <option value="1">First Option</option> 
 
     <option value="2">Second Option</option> 
 
     <option value="3">Third Option</option> 
 
     <option value="4">Fourth Option</option> 
 
     <option value="5">Fifth Option</option> 
 
     <option value="6">Sixth Option</option> 
 
     <option value="7">Seventh Option</option> 
 
    </select> 
 
    <input class="timeTextBox" name="timebox" maxlength="5"/> 
 
</div>

Answer 1

このようにしてみてください：私は、次のコードを使用している

を編集しvalue.The後

$(".timeTextBox").change()機能と同じインデックスを持つ値を置き換えるを

$(document).ready(function(){ 
 
    
 
    $(".editableBox").change(function(){   
 
     $(".timeTextBox").val($(".editableBox option:selected").html()); 
 
    }); 
 
    $(".timeTextBox").change(function() { 
 
     $(".editableBox option:selected").html($(this).val()); 
 
    console.log('content will replaced with new one') 
 
    }) 
 
});

.editableBox { 
 
    width: 75px; 
 
    height: 30px; 
 
} 
 

 
.timeTextBox { 
 
    width: 54px; 
 
    margin-left: -78px; 
 
    height: 25px; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <select class="editableBox">   
 
     <option value="1">First Option</option> 
 
     <option value="2">Second Option</option> 
 
     <option value="3">Third Option</option> 
 
     <option value="4">Fourth Option</option> 
 
     <option value="5">Fifth Option</option> 
 
     <option value="6">Sixth Option</option> 
 
     <option value="7">Seventh Option</option> 
 
    </select> 
 
    <input class="timeTextBox" name="timebox" /> 
 
</div>

Answer 2

あなたは.timeTextBox後div.listかspan.listラベルを必要とし、イベントが起こったeditableBox、上inputまたは​​を登録し、div.listの内容は正規表現でマッチさせることができるためにどの変更します。コードは次のよう：

HTML

<div class="wrapper"> 
<select class="editableBox">   
    <option value="1">First Option</option> 
    <option value="2">Second Option</option> 
    <option value="3">Third Option</option> 
    <option value="4">Fourth Option</option> 
    <option value="5">Fifth Option</option> 
    <option value="6">Sixth Option</option> 
    <option value="7">Seventh Option</option> 
</select> 
<input class="timeTextBox" name="timebox" maxlength="5" /> 
<div class="list"></div> <!-- NEW --> 
</div> 

CSS

.editableBox { 
    width: 75px; 
    height: 30px; 
} 

.timeTextBox { 
    width: 54px; 
    margin-left: -78px; 
    height: 25px; 
    border: none; 
} 

.list { // NEW 
    background: grey; 
    display: none; 
} 

jQueryのコード

$(function() { 
    $('.timeTextBox').on('keypress keydown change input', function() { 
    var typed = $('.timeTextBox').val(); 
    var re = new RegExp(typed); 
    var matches = []; 

    if (!typed) { 
     $('.list').css('display', 'none'); 
     return; 
    } 

    $('.editableBox').children().each(function(__, option) { 
     var content = $(option).text(); 

     if (re.test(content)) { 
     matches.push(content); 
     } 
    }); 

    if (matches.length > 0) { 
     $('.list').html(matches.join('<br>')).css('display', 'block'); 
    } else { 
     $('.list').css('display', 'none'); 
    } 
    }); 
}); 

私の英語は貧しいです。あなたが不適切な文法を指摘すれば、私は心地よくなります。