下拉选择'它实际上是一个文本输入框，就像谷歌日历一样

A drop down select that's actually a text input box, like on Google Calendar?

本文关键字：输入 一样 日历 谷歌 文本 选择 实际上 一个      更新时间：2023-09-26

我注意到谷歌日历使用了这个而不是<选择>

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

它让用户键入时间，而不是从下拉列表中选择一个选项。有没有人写的插件或漂亮的小部件可以做同样的事情？

您可能需要了解以下JQuery插件之一：

  • http://ivaynberg.github.io/select2/
  • http://brianreavis.github.io/selectize.js/
  • http://harvesthq.github.io/chosen/

一种更轻量级的方法可能是，假设您只有文本而没有日期，使用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>

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

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

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

相关文章：