在每个Web开发人员的生活中,都有一个需要国家/地区选择器的地步-也许是注册表格或送货地址。 因此,我们找到了所有249个国家/地区的列表,在我们的HTML代码中插入了一个select
框,并认为这项工作做得很好。
不是。
国家选择框令人恐惧。 问题包括:
1.选择太多
在249个项目中定位您的国家/地区是可用性的噩梦。
2.尴尬的界面
选择框控件在设备,操作系统和浏览器之间有所不同,但可以肯定的是,用户将需要滚动查看自己的国家。 这通常意味着从键盘切换到鼠标,或者在手机上进行大量滑动。
3.排序问题
如果您的网站主要是由美国用户访问的,则字母列表将首先显示“阿拉伯联合酋长国”和“英国”。 一些开发人员通过将最可能的国家/地区放在首位来解决此问题,但这会使期望按字母顺序排列的列表的用户感到困惑。
4.不考虑其他国名
国家列表很少考虑替代名称。 我住在英国,但开发人员可以定义英国,英国,英国,GB,英国或英国中的任何一个。
5.内部化不佳
如果西班牙用户尝试在您的英语列表中找到“España”怎么办? 充其量,他们会找到爱沙尼亚。 另外,列表很少考虑国际国家代码,例如ES或美国。
6.不考虑缩写或输入错误
如果用户输入诸如“ nitted”,“ States”或“ America”之类的术语,则他们不太可能找到美国。
幸运的是, Baymard Institute的 Christian Holst开发了一种解决方案,可以为我们解决这些问题:请参阅重新设计国家/地区选择器 。
这是一个jQuery插件,可将标准HTML select
框替换为自动完成控件。 提供了jQuery UI Autocomplete插件,但如有必要,您可以使用自己的实现。
HTML中可以定义几个属性:
<select name="Country" id="country-selector" autofocus="autofocus">
<option value="Austria" data-alternative-spellings="AT Österreich Osterreich Oesterreich ">Austria</option>
<option value="Spain" data-alternative-spellings="ES España">Spain</option>
<option value="United Arab Emirates" data-alternative-spellings="AE UAE Emirates">United Arab Emirates</option>
<option value="United Kingdom" data-priority="2" data-alternative-spellings="GB Great Britain England UK Wales Scotland">United Kingdom</option>
<option value="United States" data-priority="1" data-alternative-spellings="US USA United States of America">United States</option>
</select>
该代码段与大多数国家/地区select
代码相同,除了:
- 如果定义了
data-priority
代码,则假定其优先级高于没有代码的国家/地区。 优先级数字越低,它将在自动完成列表中显示的越高。 - 可以在
data-alternative-spellings
属性中定义以空格分隔的替代代码和拼写列表。
要将select
转换为自动完成框,您只需要调用jQuery插件方法:
$("#country-selector").selectToAutocomplete();
还有更多选项,因此我建议您尝试演示并在baymard.com/labs/country-selector上查看文档。 开源代码根据MIT许可证发布,可在GitHub上获得 。
该插件远远优于我见过的其他实现,包括我自己的。 请注意,它在IE6或7中不起作用,但那些浏览器仍会显示标准select
框。 它也不限于国家,您可以使用任何类型的数据。 推荐的。