Html国家列表与标志 [英] Html Country List with flags

问题描述

我正在寻找一种方法来选择和显示国家列表，最好是带有标志。任何建议？

我开始通过尝试这个jQuery插件 http://www.graphicpush.com/website-language-dropdown-with-jquery ，但由于我拥有的国家名单相当大，事实证明，性能非常糟糕（太多的http请求图像）。

解决方案

未来的注意事项： jQuery UI自动完成现在默认支持自定义
渲染，请参阅
http：/ /api.jqueryui.com/autocomplete/#method-_renderItem 。

这很简单。你需要的东西：

1. jQuery UI自动完成


2. UI自动完成html扩展 国家名称/代码列表


3. 包含所有标志的 CSS精灵

ol>



请记住，Google是你的朋友。

  var countries = [[ 阿根廷，阿尔]，...]; 
 
 var countryNames = countries.map（function（country）{
 return {
 label：'< div class =flag'+ country [1] .toLowerCase（） +'>'+ country [0] +'< / div>'，
 value：country [0] 
} 
}）; 
 
 $（'＃country'）。autocomplete（{
 source：countryNames，
 html：true 
））; 
  

这是这个代码的作用




I am looking for a way to select and display a list of countries, preferably with flags. Any suggestions?

I started of by trying this jQuery plugin http://www.graphicpush.com/website-language-dropdown-with-jquery, but as the list of countries I have is quite large it turned out that the performance was really bad (too many http requests to images). Also the list is bulky when it is larger than 50 elements.

解决方案

Note from the future: jQuery UI autocomplete now supports custom rendering by default, see http://api.jqueryui.com/autocomplete/#method-_renderItem.

It's pretty easy. Things you need:

1. jQuery UI auto-complete
2. UI auto-complete html extension
3. A list of country names/codes
4. A CSS sprite with all flags

Remember, Google is your friend. Blend the ingredients well, carefully whisk some javascript in, and it's done - in 7 lines of code:

var countries = [["Argentina", "ar"], ...];

var countryNames = countries.map(function(country){
  return {
      label: '<div class="flag '+country[1].toLowerCase()+'">'+country[0]+'</div>',
      value: country[0]
  }
});

$('#country').autocomplete({
  source: countryNames,
  html: true
});

Here's this code in action

这篇关于Html国家列表与标志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！