如何设置默认值时让浏览器显示所有数据列表选项？ [英] How can I make a browser display all datalist options when a default value is set?

问题描述

我有一个带有数据列表的HTML表单，其值是用PHP设置的，比如

 < input list = valuesvalue =<？php echo $ val;？>> 
< datalist id =values> 
< option value =orange> 
< option value =香蕉> 
< / datalist> 
  

我希望用户看到数据列表中的选项，以及PHP中的当前值。但是，自动完成操作会导致列表中的值与列表中的值不匹配（或开始），例如，如果 $ val ='apple'。有什么办法可以避免这种情况，或者这种行为是否被浏览器修复了？

<

例如，如果您将输入值设置为'o'，您会看到 em> orange 在datalist选项中。它从第一个字母检查单词。但是，如果你将输入值设置为'a'，那么你根本看不到选项。

所以如果你已经有了输入的值，那么datalist中就不会显示任何东西除了该值以外的选项。它的行为不像select。

解决方法是使用jquery，例如：

<$ （'click'，function（）{
$（this）.val（''）;
}）; $（$）$（$）$（$）$（$）$（$）$（$）$（$）$（$） val（'apple'）;
}
}）;

完整测试： https://jsfiddle.net/yw5wh4da/

或者您可以使用< select> 。对我来说，这是更好的解决方案。

I have an HTML form with a datalist and where the value is set with PHP, like

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

I want the user to see the options in the datalist, as well as the current value from the PHP. However, the "autocomplete" action causes values from the list that don't match (or start with) the current value to be hidden from the list, say if $val='apple'. Is there any way to avoid that, or is this behaviour fixed by the browser?

解决方案

<datalist> uses autocomplete functionality so this is normal behaviour.

For example if you set input value to be 'o' you will see just orange in datalist options. It checks word from first letter. But if you set input value to 'a' then you won't see options at all.

So if you already have value in input then nothing will be shown in datalist options except that value if it exists. It doesn't behave like select.

Workaround for this would be to use jquery like this for example:

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

Full test here: https://jsfiddle.net/yw5wh4da/

Or you could use <select>. To me it is better solution in this case.

这篇关于如何设置默认值时让浏览器显示所有数据列表选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！