im和音视频开发哪个更好_开发更好的国家选择器

im和音视频开发哪个更好

在每个Web开发人员的生活中，都有一个需要国家/地区选择器的地步-可能需要注册表格或送货地址。 因此，我们找到了所有249个国家/地区的列表，在我们HTML代码中插入了一个select框，并认为这项工作做得很好。

不是。

国家选择框是可怕的。 问题包括：

1.选择太多
在249个项目中定位您的国家/地区是可用性的噩梦。

2.尴尬的界面
选择框控件在设备，操作系统和浏览器之间有所不同，但可以肯定的是，用户将需要滚动查看自己的国家。 这通常意味着从键盘切换为鼠标，或者在手机上进行大量滑动。

3.排序问题
如果您的网站主要是由美国用户访问的，则字母列表将首先显示“阿拉伯联合酋长国”和“英国”。 一些开发人员通过将最可能的国家/地区放在首位来解决此问题，但这会使期望按字母顺序排列的列表的用户感到困惑。

4.不考虑其他国名
国家列表很少考虑替代名称。 我居住在英国，但开发商可以定义英国，英国，英国，GB，英国或英国中的任何一个。

5.内部化不佳
如果西班牙用户尝试在您的英语列表中找到“España”怎么办？ 充其量，他们会找到爱沙尼亚。 另外，列表很少考虑国际国家代码，例如ES或US。

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框。 它也不限于国家，您可以使用任何类型的数据。 推荐的。

翻译自: https://www.sitepoint.com/better-country-selector/

im和音视频开发哪个更好