html选择国家,（原创）vue选择检索国家页面模板

login

content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover"/>

class="country_input" id="country_name" @click="showcountryfn($event)" readonly/>

@click="showList($event)"

class="search_input" style="text-align: left;" v-model="searchValue"/>

• @click="selcountry(item.county,item.classname,item.phoneCo,$event)">

  {{item.county}}

  {{item.phoneCo}}

{{languageData.nextbtn}}

var demo = new Vue({

el: '#app',

data: {

getDataUrl: './static/countryJson.json',  //存数据接口

languageUrl: './static/language.json',  //多语言数据接口,

language: '',

languageData: '',

countryData: '',

telplaceholder: '',

isShowSelect: false,

showcountry: false,

phoneCo: '',

countryDataList: [],

searchValue: '',

county: '',

inputVal: ''

},

created() {

this.getData(),//定义方法

this.getLanguage(),//定义

this.language = this.getBrowserLanguage();

this.getphone();

},

methods: {

getData() {

let that = this;

that.$http({      //调用接口

method: 'GET',

url: this.getDataUrl //this指data

}).then(function (response) { //接口返回数据

this.countryData = response.body[this.language]

}, function (error) {

})

},

//获取多语言

getLanguage() {

let that = this;

that.$http({      //调用接口

method: 'GET',

url: this.languageUrl //this指data

}).then(function (response) { //接口返回数据

this.languageData = response.body[this.language];

let inputval = document.getElementById("country_name");

inputval.value = this.languageData.county

}, function (error) {

})

},

//获取浏览器语言类型

getBrowserLanguage() {

let language;

let result = "";

let l_language = localStorage.getItem("language");

if (!l_language || l_language == '') {

if (navigator.language) {

language = navigator.language;

} else {

language = navigator.browserLanguage;

}

if (language.indexOf("zh-") >= 0) {

//中文

result = "cn";

} else if (language.indexOf("en-") >= 0) {

//英文

result = "en-us";

} else if (language.indexOf("ja-") >= 0) {

//日语

result = "ja";

} else {

result = "en-us";

}

} else {

result = l_language;

}

return result;

},

showcountryfn($event) {

let ele_datalist = document.getElementById("country_list");

ele_datalist.style.display = "block";

let element = window.document.getElementById('flag');

element.focus();

this.showcountry = !this.showcountry;

this.isShowSelect = !this.isShowSelect;

$event.stopPropagation();

},

showList($event) {

$event.stopPropagation();

},

selcountry(county, classname, phoneCo, $event) {

let inputval = document.getElementById("country_name");

inputval.value = county

let ele_class = document.getElementById("flag_iti");

ele_class.setAttribute("class", "iti-flag " + classname + "");

country_code = phoneCo;

this.showcountry = false;

this.isShowSelect = false;

$event.stopPropagation();

},

getphone() {

let that = this;

that.$http({      //调用接口

method: 'GET',

url: this.getDataUrl //this指data

}).then(function (v) {

if (this.language == 'cn') {

this.countryDataList = v.body.cn;

this.phoneCo = '+86'

} else if (this.language == 'en-us') {

this.countryDataList = v.body.en;

this.phoneCo = '+1'

} else if (this.language == 'ja') {

this.countryDataList = v.body.ja;

this.phoneCo = '+81'

} else if (this.language == 'ko') {

this.countryDataList = v.body.ko;

this.phoneCo = '+82'

} else if (this.language == 'vi') {

this.countryDataList = v.body.vi;

this.phoneCo = '+84'

}

}, function (v) {

});

},

// var ele_key = document.getElementById("flag")

searchList() {

this.showcountry = true;

let val = this.searchValue;

//获取输入框里匹配的数据

let srdata = [];

for (let i = 0; i < this.countryDataList.length; i++) {

if (val.trim().length > 0 && this.countryDataList[i].county.indexOf(val) > -1 || val.trim().length > 0 && this.countryDataList[i].phoneCo.indexOf(val) > -1) {

let ele_datalist = document.getElementById("country_list");

ele_datalist.style.display = "block";

this.showcountry = true;

srdata.push(this.countryDataList[i]);

}

}

//获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表,如果获取到的数据为空,则不显示

let ele_datalist = document.getElementById("country_list");

ele_datalist.style.display = "block";

let ele_ullist = document.getElementById("country_ul");

ele_ullist.style.display = "block";

ele_ullist.innerHTML = "";

if (srdata.length == 0) {

ele_datalist.style.display = "block";

let htm = ""

for (let i = 0; i < this.countryDataList.length; i++) {

htm += '

' +

'

' +

'

'

' +

'' + this.countryDataList[i].county + '' +

'' + this.countryDataList[i].phoneCo + ''

}

ele_ullist.innerHTML = htm;

let list = document.getElementById("country_ul").getElementsByTagName("li");

let inputval = document.getElementById("country_name");

let flag_iti = document.getElementById("flag_iti");

for (let i = 0; i < list.length; i++) {

list[i].index = i;

list[i].onclick = function () {

this.isShowSelect = false;

c_code = this.attributes["data-code"].nodeValue;

country_code = c_code.split('+')[1];

inputval.value = this.children[1].innerHTML

flag_iti.className = this.children[0].children[0].className;

ele_datalist.style.display = "none";

}

}

}

//将搜索到的数据追加到显示数据列表, 然后每一行加入点击事件, 点击后将数据放入搜索框内, 数据列表隐藏

let self = document.getElementById("country_name");

for (let i = 0; i < srdata.length; i++) {

this.showcountry = true;

let ele_li = document.createElement("li");

let ele_div = document.createElement("div");

let ele_flag = document.createElement("div");

let ele_span = document.createElement("span");

let ele_span1 = document.createElement("span");

ele_li.setAttribute("class", "country");

ele_li.setAttribute("class", "preferred");

ele_li.setAttribute("class", "country");

ele_div.setAttribute("class", "flag-box");

ele_flag.setAttribute("class", "iti-flag " + srdata[i].classname + "");

ele_span.setAttribute("class", "country-name")

ele_span1.setAttribute("class", "dial-code");

ele_span.textContent = srdata[i].county;

ele_span1.textContent = srdata[i].phoneCo;

ele_li.onclick = function () {

this.isShowSelect = false;

// this.inputVal = this.getElementsByClassName('country-name')[0].innerHTML;

self.value = this.getElementsByClassName('country-name')[0].innerHTML;

var ele_class = document.getElementById("flag_iti");

ele_class.setAttribute("class", this.children[0].children[0].className);

ele_datalist.style.display = "none";

}

ele_li.appendChild(ele_div);

ele_li.appendChild(ele_span);

ele_li.appendChild(ele_span1);

ele_div.appendChild(ele_flag);

ele_ullist.appendChild(ele_li);

}

}

}

})

/*

* *github地址是https://github.com/jiuyuetian007/vueSelectInput

*/