Datenliste, wie der ausgewählte Name anstelle des Werts

Question

abgerufen wird Ich verwende Datalist zum Anzeigen der Autocomplete-Werte der ausgewählten 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> 

Jetzt javascript mit i bin in der Lage, den Wert der gewählten Option zu bekommen, ist mein Anliegen, wie kann ich den entsprechenden Namen bekommen, wie wenn ich wählen Option „ein“ Ich sollte den Wert als „Name 1“ erhalten

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

So erhalten Sie die ausgewählten Namen.

Answer 1

Sie müssen sich auf ausgewählte Wert der option Basis erhalten, dann können Sie 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>

Answer 2

Sie können einstellen, den Text erhalten mit text() ausgewählter Option wie diese

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

Answer 3

Einfach ..

Answer 4

Einfache und schnelle Lösung:

Anfügen data-name Attribut in <option> wie unten

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

und dann den markierten Text, erhält mit folgendem Code

$ ("# referralNameList : ausgewählt "). data ('name');

was Ihnen den Namen geben wird, der schnellste Weg.

durch die Art und Weise haben Sie

versucht

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