web-dev-qa-db-ja.com

デフォルト値が設定されているときに、ブラウザにすべてのデータリストオプションを表示させるにはどうすればよいですか？

私はデータリストと値がPHPで設定されているHTMLフォームを持っています

<input list="values" value="<?php echo $val; ?>">
 <datalist id="values">
  <option value="orange">
  <option value="banana">
 </datalist>

ユーザーにデータリストのオプションとPHPの現在の値を表示してもらいたい。ただし、「オートコンプリート」アクションにより、リストの値が現在の値と一致しない（または開始しない）リストから非表示になります（例：$val='Apple'。それを回避する方法はありますか、またはこの動作はブラウザによって修正されていますか？

htmlhtml5browserdatalist
22
Dave W

<datalist>はオートコンプリート機能を使用するため、これは通常の動作です。

たとえば、入力値を「o」に設定すると、データリストオプションにorangeだけが表示されます。最初の文字からWordをチェックします。ただし、入力値を「a」に設定すると、オプションはまったく表示されません。

そのため、入力値が既にある場合、その値が存在する場合を除き、データリストオプションには何も表示されません。 selectのようには動作しません。

これを回避するには、たとえば次のようなjqueryを使用します。

$('input').on('click', function() {
  $(this).val('');
});
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val('Apple');
  }
});

ここでの完全なテスト： https://jsfiddle.net/yw5wh4da/

または、<select>を使用できます。私にとっては、この場合にはより良い解決策です。

5
jakob

HTML：

<input list="values" placeholder="select">
<datalist id="values">
  <option value="orange">
  <option value="banana">
  <option value="lemon">
  <option value="Apple">
</datalist>

JS：

$('input').on('click', function() {
    $(this).attr('placeholder',$(this).val());
  $(this).val('');
});
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val($(this).attr('placeholder'));
  }
});
3
user7553218

上記のソリューションは優れていますが、ユーザーが入力ボックス内のプレースホルダー値の隣で自然にクリックするだけで、それを保持して続行しようとすると、完全に消去されます。

そのため、上記のソリューションに基づいて、私は次のソリューションを実行しました。

HTML：

<input id="other" list="values" value="<?php echo $val; ?>">
 <datalist id="values">
  <option value="orange">
  <option value="banana">
 </datalist>

JS：

jQuery(document).ready(function ($) {
    function putValueBackFromPlaceholder() {
        var $this = $('#other');
        if ($this.val() === '') {
            $this.val($this.attr('placeholder'));
            $this.attr('placeholder','');
        }
    }

    $('#other')
        .on('click', function(e) {
            var $this = $(this);
            var inpLeft = $this.offset().left;
            var inpWidth = $this.width();
            var clickedLeft = e.clientX;
            var clickedInInpLeft = clickedLeft - inpLeft;
            var arrowBtnWidth = 12;
            if ((inpWidth - clickedInInpLeft) < arrowBtnWidth ) {
                $this.attr('placeholder',$this.val());
                $this.val('');
            }
            else {
                putValueBackFromPlaceholder();
            }
        })
        .on('mouseleave', putValueBackFromPlaceholder);
});

私にはページに多くの入力ボックスがあり、この1つだけにこの動作をさせたいので、idを操作して「個人用」にします。これをより汎用的な関数に変更する場合は、putValueBackFromPlaceholderを、クリックが発生した要素とイベント自体にバインドする必要があります。

1
Olga Farber

提案されたソリューションに基づいた、以前の値または選択された新しい値を保持する別のオプション。

// Global variable to store current value
var oldValue = '';
// Blank value when click to activate all options
$('input').on('click', function() {
  oldValue = $(this).val();
  $(this).val('');
});
// Restore current value after click
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val(oldValue);
  }
});

https://jsfiddle.net/jpussacq/7Ldbc013/

0
jpussacq

Inputタグに目的のデフォルト値を貼り付けるだけです。追加のJavaScriptコーディングは必要ありません！

        <input list="skills" value="DBA">

          <datalist name="skills" id="skills">

              <option value="PHP">Zend PHP</option>
              <option value="DBA">Oracle DBA</option>
              <option value="APEX">APEX 5.1</option>
              <option value="ANGULAR">ANGULAR JS</option>

          </datalist>
0
Sharfuddin Zishan