在数据列表选项中显示其他文本

Question

我想显示的文字与中的值不同datalist option。我datalist的如下：

<input type="text" list="result">

<datalist id="result"> 
    <option data-text="text1" value="1"/>
    <option data-text="text2" value="2"/>
    <option data-text="text3" value="3"/>
</datalist>

我只想显示带有options的下拉列表text1, text2, text3，然后将值插入输入中。

我认为这是不可能的，但我想确定。

Answer 1

listbox您可以简单地添加您想要出现在中间的文本<option>。在点击列表上，这是替换的值。请尝试

列表框中的文本和插入输入的数字（值）的示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" list="result">

<datalist id="result"> 
    <option value="1">text1</option>
    <option value="2">text2</option>
    <option value="3">text3</option>
</datalist>

列表框中包含数字（值）且文本插入到输入中的示例：

$("#myInput").bind("select",function(){
    if($('#result').find('option').length) {
        if($('option[value='+this.value+']').length > 0){
          $("#myInput").val($('option[value='+this.value+']').data("text"));
        }
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myInput" type="text" list="result">

<datalist id="result"> 
    <option data-text="text1" value="1"/>
    <option data-text="text2" value="2"/>
    <option data-text="text3" value="3"/>
</datalist>

更新

$("#myInput").bind("select",function(){
    if($('#result').find('option').length) {
        if($('option[value='+this.value+']').length > 0){
          $("#myInput").val($('option[value='+this.value+']').data("text"));
        }
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myInput" type="text" list="result">

<datalist id="result"> 
    <option data-text="Playstation" value="1">Text1</option>
    <option data-text="Xbox" value="2">Text2</option>
    <option data-text="Nintendo" value="3">Text2</option>
</datalist>