2

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>
vishnu
  • 2,848
  • 3
  • 30
  • 55

2 Answers2

1

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>
prasanth
  • 22,145
  • 4
  • 29
  • 53
  • Its only add typing contents as the first option. Actually i need automatically list content when we type in it. Eg: if we start typig "six", "Sixth Option" to be display in the list. – vishnu Nov 23 '16 at 08:05
  • you need matching the string or match the index – prasanth Nov 23 '16 at 08:06
  • 1
    I thing its like search box .See the link http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist. and http://stackoverflow.com/questions/40458669/jquery-search-using-real-time-input-like-filter-option-in-angular-js/40458846#40458846 – prasanth Nov 23 '16 at 08:08
  • Thanks @prasad its working.. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist – vishnu Nov 23 '16 at 10:36
1

you need a div.list or span.list label after .timeTextBox, and register a input or keydown on editableBox, when events happened, change the div.list's content to which can be matched by regular expression. code as follows:

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 Code

$(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');
    }
  });
});

My english is poor, I will be pleasant if you point out inproper grammar.

catssay
  • 106
  • 5