如何记录在select2输入字段上键入的内容并最终更新另一个输入字段？

Question

I'm having trouble logging in real time what's being typed on the select2 input field

My goal is to update another input field while the user in typing on the select2 search box

I tried many things but it's not working: nothing is appearing in my console

$('.mySelect2').on("change",function(e){
  console.log("mySelect2 text", e.target.value)
  console.log("mySelect2 text $(this).val()", $(this).val())

  // #location is my other field that I want to update 
  $("#location").text(e.target.value);
});

Answer 1

According to the documentation , you need to use different event:

$('#mySelect2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

---

Update: the following method allows to capture everything that the user types into the select2 input

 // In your Javascript (external .js resource or <script> tag) $(document).ready(function() { var $select2 = $('.js-example-basic-single') $select2.select2(); $('body').on('input', '.select2-search__field', function() { console.log(this.value); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script> <select class="js-example-basic-single" name="state"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select>