Description
- list of country with search block, type a country will show a dropdown, click country in dropdown will open new page/new url
- view demo – password: abc
- buy me a coffee
#1. Install Code
#1.1. First, add a Text Block with text: #country-search
#1.2. Hover on Page where you use Text Block > Click Gear icon
#1.3. Click Advanced > Paste this code
<!-- 08.26c30v10 List of Country with Search Block -->
<script>
window.CountrySearchConfig = {
marker: "#country-search",
placeholder: "Search country...",
noResultsText: "No results",
openInNewTab: true,
searchPadding: "12px 16px",
searchPaddingLeft: "16px",
borderStyle: "1px solid #cccccc",
placeholderColor: "#999999",
placeholderSize: "16px",
dropdownTextSize: "15px",
dropdownTextColor: "#333333",
dropdownBorderStyle: "1px solid #cccccc",
dropdownDivider: "1px solid #eeeeee",
dropdownItemBackground: "#ffffff",
dropdownItemPadding: "10px 16px",
countries: [
{ name: "Argentina", url: "https://example.com/argentina" },
{ name: "Australia", url: "https://example.com/australia" },
{ name: "Austria", url: "https://example.com/austria" },
{ name: "Belgium", url: "https://example.com/belgium" },
{ name: "Brazil", url: "https://example.com/brazil" },
{ name: "Canada", url: "https://example.com/canada" },
{ name: "Chile", url: "https://example.com/chile" },
{ name: "China", url: "https://example.com/china" },
{ name: "Colombia", url: "https://example.com/colombia" },
{ name: "Denmark", url: "https://example.com/denmark" },
{ name: "Egypt", url: "https://example.com/egypt" },
{ name: "Finland", url: "https://example.com/finland" },
{ name: "France", url: "https://example.com/france" },
{ name: "Germany", url: "https://example.com/germany" },
{ name: "Greece", url: "https://example.com/greece" },
{ name: "India", url: "https://example.com/india" },
{ name: "Indonesia", url: "https://example.com/indonesia" },
{ name: "Ireland", url: "https://example.com/ireland" },
{ name: "Italy", url: "https://example.com/italy" },
{ name: "Japan", url: "https://example.com/japan" },
{ name: "Malaysia", url: "https://example.com/malaysia" },
{ name: "Mexico", url: "https://example.com/mexico" },
{ name: "Netherlands", url: "https://example.com/netherlands" },
{ name: "New Zealand", url: "https://example.com/new-zealand" },
{ name: "Norway", url: "https://example.com/norway" },
{ name: "Philippines", url: "https://example.com/philippines" },
{ name: "Poland", url: "https://example.com/poland" },
{ name: "Portugal", url: "https://example.com/portugal" },
{ name: "Russia", url: "https://example.com/russia" },
{ name: "Saudi Arabia", url: "https://example.com/saudi-arabia" },
{ name: "Singapore", url: "https://example.com/singapore" },
{ name: "South Africa", url: "https://example.com/south-africa" },
{ name: "South Korea", url: "https://example.com/south-korea" },
{ name: "Spain", url: "https://example.com/spain" },
{ name: "Sweden", url: "https://example.com/sweden" },
{ name: "Switzerland", url: "https://example.com/switzerland" },
{ name: "Thailand", url: "https://example.com/thailand" },
{ name: "Turkey", url: "https://example.com/turkey" },
{ name: "United Kingdom", url: "https://example.com/united-kingdom" },
{ name: "United States", url: "https://example.com/united-states" }
]
};
</script>
<script src="https://code.beaverhero.com/textblock/0826c30v10listcountrysearch.js"></script>
#1.4. You can update Country Name – URL here
countries: [
{ name: "Argentina", url: "https://example.com/argentina" },
{ name: "Australia", url: "https://example.com/australia" },
{ name: "Austria", url: "https://example.com/austria" },
{ name: "Belgium", url: "https://example.com/belgium" },
{ name: "Brazil", url: "https://example.com/brazil" },
{ name: "Canada", url: "https://example.com/canada" },
{ name: "Chile", url: "https://example.com/chile" },
{ name: "China", url: "https://example.com/china" },
{ name: "Colombia", url: "https://example.com/colombia" },
{ name: "Denmark", url: "https://example.com/denmark" },
{ name: "Egypt", url: "https://example.com/egypt" },
{ name: "Finland", url: "https://example.com/finland" },
{ name: "France", url: "https://example.com/france" },
{ name: "Germany", url: "https://example.com/germany" },
{ name: "Greece", url: "https://example.com/greece" },
{ name: "India", url: "https://example.com/india" },
{ name: "Indonesia", url: "https://example.com/indonesia" },
{ name: "Ireland", url: "https://example.com/ireland" },
{ name: "Italy", url: "https://example.com/italy" },
{ name: "Japan", url: "https://example.com/japan" },
{ name: "Malaysia", url: "https://example.com/malaysia" },
{ name: "Mexico", url: "https://example.com/mexico" },
{ name: "Netherlands", url: "https://example.com/netherlands" },
{ name: "New Zealand", url: "https://example.com/new-zealand" },
{ name: "Norway", url: "https://example.com/norway" },
{ name: "Philippines", url: "https://example.com/philippines" },
{ name: "Poland", url: "https://example.com/poland" },
{ name: "Portugal", url: "https://example.com/portugal" },
{ name: "Russia", url: "https://example.com/russia" },
{ name: "Saudi Arabia", url: "https://example.com/saudi-arabia" },
{ name: "Singapore", url: "https://example.com/singapore" },
{ name: "South Africa", url: "https://example.com/south-africa" },
{ name: "South Korea", url: "https://example.com/south-korea" },
{ name: "Spain", url: "https://example.com/spain" },
{ name: "Sweden", url: "https://example.com/sweden" },
{ name: "Switzerland", url: "https://example.com/switzerland" },
{ name: "Thailand", url: "https://example.com/thailand" },
{ name: "Turkey", url: "https://example.com/turkey" },
{ name: "United Kingdom", url: "https://example.com/united-kingdom" },
{ name: "United States", url: "https://example.com/united-states" }
]
#2. Customize
#2.1. To change search/dropdown style, change line 09 – 20
searchPadding: "12px 16px", searchPaddingLeft: "16px", borderStyle: "1px solid #cccccc", placeholderColor: "#999999", placeholderSize: "16px", dropdownTextSize: "15px", dropdownTextColor: "#333333", dropdownBorderStyle: "1px solid #cccccc", dropdownDivider: "1px solid #eeeeee", dropdownItemBackground: "#ffffff", dropdownItemPadding: "10px 16px",