Vishnu Vishnu - 14 days ago 8
CSS Question

I Need "Autolisting" function to Editable dropdown list

I want to add Auto listing contents when we type text into the editable dropdown list. Is any js for that? I have used the following code:



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

Try like this:

After edited value.The replace the value with same index with

$(".timeTextBox").change() function

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