我需要「Autolisting」功能編輯下拉列表

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

嘗試這樣的：

編輯的價值。經過與

$(".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

你需要一個div.list或span.list標籤.timeTextBox後，並註冊於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'); 
    } 
    }); 
}); 

我的英語很差，如果你指出正確的語法，我會很愉快。