草庐IT

javascript - 大型数据集的单个 <select multiple ="multiple"> 元素的替代方案

coder 2023-08-03 原文

我经常对如何在我的应用程序中解决这个问题感到矛盾。我使用了很多选项,包括:

  • 一个通用的多选 - 这是我最不喜欢和最很少使用的选项。我发现可用性非常糟糕,一个简单的误点击就会毁了你所有的辛勤工作。
  • “自动完成”解决方案 - 缺点:用户必须具备拼写能力才能找到他们需要的该死的值,不会接触到他们可能不记得的值,以及子字符串搜索的潜在后端性能。
  • 两个相邻的多选,带有一个添加/删除按钮 - 缺点:在我看来仍然“丑陋”
  • 任意数量的精美 javascript 解决方案(http://livepipe.net/control/selectmultiplehttp://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/ 等)

我还没有找到任何关于解决这个问题的最佳方法的可用性研究。当您从 <10>

你们用什么?你为什么使用它?你能指出可用性案例研究吗?是否有尚未被发现的“神奇”解决方案?

最佳答案

我的建议是不要使用通用的多选控件。在我的整个职业生涯中,我一直在进行用户体验研究,每次我用多个选择控件测试一个网站时,结果总是给最终用户带来问题。

我前一段时间发了一篇关于这个的帖子:Multiple Select Controls Must Evolve or Die

不过,听起来您无论如何都知道这一点。您真正的问题是“我该用什么代替?”那么,要回答这个问题,您必须确定用户的任务是倾向于记忆 还是识别

(i) 通过记忆,我的意思是用户在看到列表之前就知道他们想要选择什么。在这种情况下,如果您提供自动完成工具(例如在 facebook 上非常有效地使用),对他们来说可能是最简单的。 This solution is even better when the list of options is also impossibly long to present on a page (e.g. location names, etc).

(ii) 继续识别 - 我的意思是这样的任务涉及用户在看到选项列表之前不知道他们想要选择什么。在这种情况下,自动完成不会给他们任何提示。一组复选框会更有帮助。如果您可以一次显示它们,这对用户很有帮助。滚动 DIV 更紧凑,但它们会给用户带来内存负担——即,一旦他们向下滚动,他们就必须记住他们选择了哪些项目。当用户保存表单并稍后返回时,这一点尤为明显。

所以 - 想想你的问题,你需要一个召回或识别的解决方案吗?

关于javascript - 大型数据集的单个 <select multiple ="multiple"> 元素的替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1161013/

有关javascript - 大型数据集的单个 <select multiple ="multiple"> 元素的替代方案的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身,new.html.erb,有代码:当我运行rspec时,它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据,就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理?我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题;这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML,但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中,将我的XML代码修改为

  4. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本,我按照提供的说明安装了arubagem。它在我的Gemfile中,我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作,我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了,但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  5. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  6. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”,并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符,电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时,所有测试都通过了,但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  7. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据,该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中,我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤,而不是严格相等。然而,这是行不通的:scope:my_scope,->(que

  8. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常,除了该文件不是公开可用的,而且我无法获得它的公共(public)URL。但是当我登录到S3时,我可以正常查看我的文件。为了使其公开可用,我将最后一行更改为obj.upload_file(file

  9. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  10. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索,因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索?require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

随机推荐