web-dev-qa-db-ja.com

値ではなくデータリストHTML5のテキストのみを表示する方法は？

以下に例を示します。

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

私が達成したいのは、入力要素をクリックすると、valueは表示されないが、のみtext（つまり、1、2、3、4、5）。つまり値はhiddenで、一般的なドロップダウン（<select>要素）。

このオートコンプリート機能が必要です。それ以外の場合は、通常のドロップダウンを使用していました。

jqueryhtml5drop-down-menuhtml-datalist
23
Cerebus1504

編集、更新

フォロー中

試す（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/

24
guest271314

JQuery（edit）のような依存関係なしでこれを行う非常に厄介な方法：私はjQueryがOPによって使用されていることを理解していますが、この方法はjQueryの有無にかかわらずうまく統合されますので、 not）。

まず、次のように値ノードとテキストノードを入れ替えます：

_<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に変更するだけです。

1
Oliver