HTML / Javascript输入类型=“文本” - 如何显示与值不同的文本？

Question

Actually i have a datalist:

<datalist id='modelsList'>
   <option value='1'>Dummy1</option>
   <option value='2'>Dummy2</option>
</datalist>

This is used in an input:

<input type='text' name='dummy' autocomplete='off' list='modelsList' value=''/>

If i start typing Dummy2 and then i click on the dropdown list result the textbox shows 2. I need to find a way to have 2 as value but Dummy2 as text.

I cannot use a drop-down list (select tag)

Answer 1

Here, my solution as per you want check it out... You can use input event for achieving such functionality,

HTML

<input type='text' id='dummy' list='modelsList'/>
<datalist id='modelsList'>
     <option value='1'>Dummy1</option>
     <option value='2'>Dummy2</option>
</datalist>

Jquery

$("#dummy").on('input', function () {
    var val = this.value;
    if($('#modelsList option').filter(function(){
        return this.value === val; 
    }).length) {
       var option = $('#modelsList').find('option[value="' + val + '"]');
       $(this).val(option.text());
    }
});

also check DEMO of the above code.