下拉选择实际上是一个文本输入框,就像在Google日历上一样?

时间:2022-08-25 19:30:01

I noticed Google calendar uses this instead of <select>

我注意到Google日历使用了这个而不是

<input class="text dr-time" id=":3r-st" size="7" title="From time" tabindex="0" dir="ltr" />

It let's the user type the time instead of selecting an option from the drop down list. Is there a plugin or nice widget someone wrote that does the same thing?

它让用户输入时间而不是从下拉列表中选择一个选项。是否有人写过的插件或好的小部件做同样的事情?

2 个解决方案

#1


1  

You might want to have a look at one of these JQuery plugins:

您可能想看看其中一个JQuery插件:

A more lightweight approach might be, assuming you only have text and not dates, using the data-list attribute:

假设您只有文本而不是日期,使用data-list属性可能会采用更轻量级的方法:

<div>Choose a browser from this list:</div>
<input list="browsers" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

I copied the above code from here: https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist

我从这里复制了上面的代码:https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist

#2


0  

Maybe Chosen is something for you. It's a JavaScript SELECT replacement, which adds multiple new opportunities:

也许Chosen适合你。这是一个JavaScript SELECT替代品,它增加了多个新机会:

http://harvesthq.github.io/chosen/

#1


1  

You might want to have a look at one of these JQuery plugins:

您可能想看看其中一个JQuery插件:

A more lightweight approach might be, assuming you only have text and not dates, using the data-list attribute:

假设您只有文本而不是日期,使用data-list属性可能会采用更轻量级的方法:

<div>Choose a browser from this list:</div>
<input list="browsers" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

I copied the above code from here: https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist

我从这里复制了上面的代码:https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist

#2


0  

Maybe Chosen is something for you. It's a JavaScript SELECT replacement, which adds multiple new opportunities:

也许Chosen适合你。这是一个JavaScript SELECT替代品,它增加了多个新机会:

http://harvesthq.github.io/chosen/