如何仅显示数据列表 HTML5 中的文本而不显示值？

Question

下面是一个例子：

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">1</option>
    <option value="Firefox">2</option>
    <option value="Chrome">3</option>
    <option value="Opera">4</option>
    <option value="Safari">5</option>
</datalist>

http://jsfiddle.net/j7ehtqjd/1/

我想要实现的是，当我单击输入元素时，不会显示值，而只会显示文本（即 1、2、3、4、5）。 即该值应该像普通下拉菜单（ <select>元素）一样隐藏。

这个自动完成功能是必要的，否则我会选择正常的下拉菜单。

Answer 1

编辑，更新

跟随摄政

尝试 (v3)

html

<input id="selected" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="InternetExplorer" value="1"></option>
    <option data-value="Firefox" value="2"></option>
    <option data-value="Chrome" value="3"></option>
    <option data-value="Opera" value="4"></option>
    <option data-value="Safari" value="5"></option>
</datalist>
<input id="submit" type="submit">

js

$(document).ready(function() {

var data = {}; 
$("#browsers option").each(function(i,el) {  
   data[$(el).data("value")] = $(el).val();
});
// `data` : object of `data-value` : `value`
console.log(data, $("#browsers option").val());


    $('#submit').click(function()
    {
        var value = $('#selected').val();
        alert($('#browsers [value="' + value + '"]').data('value'));
    });
});

jsfiddle http://jsfiddle.net/guest271314/j7ehtqjd/13/

Answer 2

一个非常混乱的方法，没有像 jQuery 这样的依赖项（编辑：我意识到 jQuery 正在被 OP 使用，但是无论有没有 jQuery，这个方法都可以很好地集成，所以可能会帮助其他人）。

首先，交换您的值和文本节点，如下所示：

<input list="browsers" name="browser" id="my_input">
  <datalist id="browsers">
    <option value="Internet Explorer">1</option>
    <option value="Firefox">2</option>
    <option value="Chrome">3</option>
    <option value="Opera">4</option>
    <option value="Safari">5</option>
  </datalist>
  <input type="submit">

这确保输入始终为用户显示正确的值。 然后添加一些 JavaScript 来检查对应值的文本节点，如下所示：

let $input = document.getElementById('my_input');
let $datalist = document.getElementById('browsers');

$input.addEventListener('change', () => {
  let _value = null;

  let input_value = $input.value;
  let options = $datalist.children;
  let i = options.length;

  while(i--) {
    let option = options[i];

    if(option.value == input_value) {
      _value = option.textContent;
      break;
    }
  }

  if(_value == null) {
    console.warn('Value does not exist');
    return false;
  }

  console.log('The value is:', _value );
});

您也可以将'change'事件侦听器'change'为'keyup' ，以获得实时反馈。 而不是console.log('The value is:', _value )你可以简单地添加一个额外的hidden输入来存储值，从而允许你发送值和 id。

这使用现代 JavaScript 表示法，但要使其向后兼容，只需更改'change', () => { call to 'change', function() {并将let更改为var 。

更新：使用 ES6

一个比上面稍微更新的答案

 const input = document.getElementById('my_input'); const list = document.getElementById('browsers'); input.addEventListener('change', () => { const {value: inputVal} = input const children = Array.from(list.children) // Fetch matched elem const [matchedElem] = children.filter(({value}) => value === inputVal) // If element doesn't exist, no matches if(!matchedElem) { console.log('No matches found') return } // Do whatever console.log('Matched value for', matchedElem.value, 'is', matchedElem.textContent) });

 <input type="search" list="browsers" name="browser" id="my_input"> <datalist id="browsers"> <option value="Internet Explorer">1</option> <option value="Firefox">2</option> <option value="Chrome">3</option> <option value="Opera">4</option> <option value="Safari">5</option> </datalist> <input type="submit">

Answer 3

我虽然会添加这些答案的较短的 Vanilla JS 版本。 这将隐藏真实值，但是当提交项目时，它将替换为您在表单上所需的值。

<input id="selected" list="browsers" name="browser" >
<datalist id="browsers">
    <option data-value="InternetExplorer" value="1"></option>
    <option data-value="Firefox" value="2"></option>
    <option data-value="Chrome" value="3"></option>
    <option data-value="Opera" value="4"></option>
    <option data-value="Safari" value="5"></option>
</datalist>
<input id="submit" type="submit">```

<script>
function getRealValue(ele){
  var dl=ele.list.options;
  for (var x=0;x<dl.length;x++){
    if (dl[x].value==ele.value){
      ele.value=dl[x].dataset.value;
      return dl[x].dataset.value;
    }
  }
}
</script>