33

这是一个例子：

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

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

4

3 回答 3

30

编辑，更新

跟随摄政王

尝试 (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/

于 2014-09-02T06:18:32.887 回答
4

在没有像 jQuery 这样的依赖项的情况下执行此操作的一种非常混乱的方法（编辑：我意识到 OP 正在使用 jQuery，但是无论有没有 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'事件侦听器更改为'keyup'，以获得实时反馈。而不是console.log('The value is:', _value )您可以简单地添加一个额外的hidden输入来存储值，从而允许您发送值和 id。

这使用现代 JavaScript 表示法，但要使其向后兼容，只需将'change', () => {调用'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">

于 2018-05-24T16:15:41.803 回答
1

我虽然会为这些答案添加一个较短的 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>
于 2020-05-01T13:27:37.250 回答