CODEWITHSUNDEEP
javascriptjqueryhtml
Vipul Singh
Vipul Singh

Reputation: 393

Data list how to get the selected name instead of value

I am using Datalist for showing the autocomplete values of select option.

<input type="text" class="form-control input-sm" name="referralName" id="referralName" list="referralNameList">
<datalist id="referralNameList">
 <option value="one">Name 1</option>
 <option value="two">Name 2</option>
 <option value="three">Name 3</option>
</datalist>

Now using javascript i am able to get the value of selected option, My concern is how can I get the corresponding name, like when I select option "one" I should get the value as "Name 1"

$("#referralName").on('blur',function(){
                 var value=$("#referralName").val();                     
                 console.log("value od selected referral "+value)
              });

How to get the selected Names.

Upvotes: 0

Views: 2215

Answers (4)

Rahul
Rahul

Reputation: 710

Easy and fast solution:

Append data-name attribute in <option> like below

<datalist id="referralNameList">
 <option data-name="Name 1" value="one">Name 1</option>
 <option data-name="Name 2" value="two">Name 2</option>
 <option data-name="Name 3" value="three">Name 3</option>
</datalist>

and then get the selected text using below code

$("#referralNameList :selected").data('name');

which will give you the name, the fastest way.

by the way did you tried

$("#referralNameList :selected").text();

Upvotes: 0

Satpal
Satpal

Reputation: 133423

You need to get the option based on selected value then you can set text

$("#referralName").on('input', function() {
  var value = $(this).val();

  //Persist selected value in a hidden input
  $('#referralNameValue').val(value);

  //For debugging
  console.clear();
  console.log("value of selected referral " + value)

  //update value
  if (!!value.length) {
    var text = $("#referralNameList option[value=" + value + "]").text();
    $(this).val(text);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control input-sm" name="referralName" id="referralName" list="referralNameList">
<input type="hidden" id="referralNameValue" list="referralNameList">
<datalist id="referralNameList">
 <option value="one">Name 1</option>
 <option value="two">Name 2</option>
 <option value="three">Name 3</option>
</datalist>

Upvotes: 3

Christian
Christian

Reputation: 7429

Easy..

    $('#referralName').change(function(e){
        var val = e.target.value
        console.log($("#referralNameList option[value='" + val + "']").text());
    });

Upvotes: 0

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14614

You can get the text using text() of selected option like this

$(document).ready(function () {
  $("#referralName").on('change', function () {
    var value = $("#referralName").val();
    var text = $("#referralNameList").find('option[value=' + value + ']').text();
    console.log("Text of selected referral " + text )
   });
});

Upvotes: 0

Related Questions