微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

语义用户界面:无法通过可搜索的下拉菜单“标签”

如何解决语义用户界面:无法通过可搜索的下拉菜单“标签”

我在一行中有多个下拉列表,我希望允许用户使用制表键从一个字段移动到另一个字段。

下拉菜单与文本匹配,允许全文搜索并且可以清除。

制表符确实有效,但不幸的是,当制表符浏览下拉列表时,第一个值会被自动选择:

enter image description here

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="utf-8">
    <title>Semantic UI: tabbing through select Boxes</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
  </head>
  <body>
    <form>
      <select class="ui search dropdown">
        <option value="">choose one</option>
        <option value="1">abc</option>
        <option value="2">bcd</option>
        <option value="3">cde</option>
      </select>
      <select class="ui search dropdown">
        <option value="">choose one</option>
        <option value="1">ababa</option>
        <option value="2">cdcdcd</option>
        <option value="3">efefef</option>
      </select>
      <select class="ui search dropdown">
        <option value="">choose one</option>
        <option value="1">ababa</option>
        <option value="2">cdcdcd</option>
        <option value="3">efefef</option>
      </select>
    </form>
    <script>
      window.onload = () => {
        $('form .ui.dropdown').dropdown({
          match: 'text',clearable: true
        });
      }
    </script>
  </body>
</html>

我已经尝试了 Semantic UI 和 Fomantic UI 的多种设置组合,但我找不到任何允许可搜索下拉菜单的组合。

通过查看 action 的不同选项,我可以找到一个非常有希望的选项,但是,如果只有一个选项(左),则无法做出选择。

有没有人知道允许用户在没有选择第一个选项的情况下浏览下拉列表的配置?使用语义用户界面还是语义用户界面?

解决方法

这个 Fomantic-UI 问题让我走上了正确的道路:

[Dropdown] Search selection selects first item on close

解决方法是将forceSelection设置为false

        $('form .ui.dropdown').dropdown({
          match: 'text',clearable: true,forceSelection: false
        });

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?