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

Question

私はデータリストでHTMLフォームを持っており、値がPHPを設定した場合、

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

ように私は、ユーザーがデータリスト内のオプションと同様に、PHPから現在の値を見てみたいです。しかし、 "autocomplete"アクションは、現在の値と一致しない（または開始する）リストの値をリストから隠すようにします。たとえば、$val='apple'の場合です。それを回避する方法はありますか、またはこの動作はブラウザによって修正されていますか？

Answer 1

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

たとえば、入力値を 'o'に設定すると、データリストオプションではオレンジと表示されます。最初の文字から単語をチェックします。しかし、入力値を 'a'に設定すると、オプションは表示されません。

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

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

完全なテスト：このため

回避策は、例えば、次のようにjQueryを使用することですhttps://jsfiddle.net/yw5wh4da/

それとも、<select>を使用することができます。私にはこの場合、より良い解決策です。

Answer 2

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')); 
    } 
}); 

Answer 3

上記の解決策は素晴らしいですが、ユーザーが自然にちょうど維持しようとすると、入力ボックス内に、次のプレースホルダ値をクリックした場合と、それを続けると、それは完全に消去されます。

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); 
}); 

多くの入力ボックスがオンにそこにいる

は、したがって、上記のソリューションに基づいて、私は私のために、以下のソリューションをしましたページだけで、私はこの動作だけを持ってほしいので、私はIDで作業し、それを "個人的"にしてください。より一般的な関数に変更する場合は、クリックが発生した要素とイベント自体をputValueBackFromPlaceholderにバインドする必要があります。

Answer 4

入力タグに目的のデフォルト値を貼り付けてください。余分な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>