原生Js汉语拼音首字母匹配城市名/自动提示列表
根据城市的汉语名称首字母把城市排序，基本思路：
1.处理数据，按照需要的格式分别添加{HOT:{hot:[],ABCDEFG:{a:[1,2,3],b:[1,2,3]},HIGHLMN:{},OPQRSTU:{},VWXYZ:{}}
2.解析数据 创建数据div 给需要功能的input分别添加事件
效果预览：http://jsfiddle.net/dtdxrk/xdftL/embedded/result/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生Js汉语拼音首字母匹配城市名</title>
<style type="text/css">
*{margin: 0;padding: 0} /*弹出城市列表*/
div#popCity{ visibility: hidden; font: 13px Arial;position: absolute;top: 0;left: 0;background-color: #fff; box-shadow: 2px 2px 3px rgba(0,0,0,0.3);border: 1px solid #85BEE5;width: 400px;}
div#popCity h1{font-size: 14px;background-color:#85BEE5;padding: 5px;color: #fff; }
ul#popMenu{margin-top: 5px;overflow: hidden;zoom:1;}
ul#popMenu li{display: block;float:left;margin-left:5px; cursor: pointer; font: 13px Arial;border: 1px solid #85BEE5;background-color: #e1effe;padding: 2px 5px;height: 16px;}
ul#popMenu li.active{background-color: #fff;border-bottom: 1px solid #fff;position: relative;}
div#popCityCon{border-top: 1px solid #85BEE5;margin-top: -1px;padding: 5px 0;}
div#popCityCon div{display: none;}
div#popCityCon div.active{display: block;}
div#popCityCon dl{overflow: hidden;margin:2px 0;overflow: hidden;}
div#popCityCon dt{float: left;width: 50px;text-align: center;color: #666;}
div#popCityCon dd{float: left;width: 350px;}
div#popCityCon a{ cursor: pointer;padding: 2px 5px;color: #3b5998;display: inline-block;}
div#popCityCon a:hover{background-color: orange;color: #fff;}
div#popCityCon a.active{background-color: orange;color: #fff;}
div#popCityCon div.active{display: block;} /*搜索提示框*/
#popList{ visibility: visible;border: 1px solid #ccc;font: 14px Arial;background-color: #fff;position: absolute;}
#popList ul{width: 100%;list-style-type: none;}
#popList ul li{padding: 5px;}
#popList ul li:hover{background-color: #ececec;cursor:default; }
#popList ul li.active{background-color: #ececec;cursor:default; }
</style>
</head>
<body> <input type="text" class="cityinput" id="city1" value="城市名">
<br/> <select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="text" class="cityinput" id="city2" value="城市名">
<select name="IE6" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<script type="text/javascript">
var _CalF = {
$ : function(object){//选择器
if(object === undefined ) return;
var getArr = function(name,tagName,attr){
var tagName = tagName || '*',
eles = document.getElementsByTagName(tagName),
clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
attr = attr || clas,
Arr = [];
for(var i=0;i<eles.length;i++){
if(eles[i].getAttribute(attr)==name){
Arr.push(eles[i]);
}
}
return Arr;
}; if(object.indexOf('#') === 0){ //#id
return document.getElementById(object.substring(1));
}else if(object.indexOf('.') === 0){ //.class
return getArr(object.substring(1));
}else if(object.match(/=/g)){ //attr=name
return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
}else if(object.match(/./g)){ //tagName.className
return getArr(object.split('.')[1],object.split('.')[0]);
}
},
addHandler:function(node, type, handler){
node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);
},
removeHandler: function (node, type, handler) {
node.removeEventListener ? node.removeEventListener(type, handler, false) : node.detachEvent("on" + type, handler);
},
getPosition : function(obj) { //获取元素在页面里的位置和宽高
var top = 0,
left = 0,
width = obj.offsetWidth,
height = obj.offsetHeight; while(obj.offsetParent){
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
} return {"top":top,"left":left,"width":width,"height":height};
},
addClass:function(c,node){ // 添加样式名
node.className = node.className + ' ' + c;
},
removeClass:function(c,node){ // 移除样式名
var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)","g");
node.className = node.className.replace(reg, '');
},
stopPropagation:function(event){ // 阻止冒泡
var event = event || window.event;
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
},
getStyle : function(obj, attr){ //获取css属性
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
},
ie6 : function(){
return !!window.ActiveXObject && !window.XMLHttpRequest;
} }; var cityData = ['北京|beijing|bj','上海|shanghai|sh', '重庆|chongqing|cq', '深圳|shenzhen|sz', '广州|guangzhou|gz', '杭州|hangzhou|hz',
'南京|nanjing|nj', '苏州|shuzhou|sz', '天津|tianjin|tj', '成都|chengdu|cd', '南昌|nanchang|nc', '三亚|sanya|sy','青岛|qingdao|qd',
'厦门|xiamen|xm', '西安|xian|xa','长沙|changsha|cs','合肥|hefei|hf','西藏|xizang|xz', '内蒙古|neimenggu|nmg', '安庆|anqing|aq', '阿泰勒|ataile|atl', '安康|ankang|ak',
'阿克苏|akesu|aks', '包头|baotou|bt', '北海|beihai|bh', '百色|baise|bs','保山|baoshan|bs', '长治|changzhi|cz', '长春|changchun|cc', '常州|changzhou|cz', '昌都|changdu|cd',
'朝阳|chaoyang|cy', '常德|changde|cd', '长白山|changbaishan|cbs', '赤峰|chifeng|cf', '大同|datong|dt', '大连|dalian|dl', '达县|daxian|dx', '东营|dongying|dy', '大庆|daqing|dq', '丹东|dandong|dd',
'大理|dali|dl', '敦煌|dunhuang|dh', '鄂尔多斯|eerduosi|eeds', '恩施|enshi|es', '福州|fuzhou|fz', '阜阳|fuyang|fy', '贵阳|guiyang|gy',
'桂林|guilin|gl', '广元|guangyuan|gy', '格尔木|geermu|gem', '呼和浩特|huhehaote|hhht', '哈密|hami|hm',
'黑河|heihe|hh', '海拉尔|hailaer|hle', '哈尔滨|haerbin|heb', '海口|haikou|hk', '黄山|huangshan|hs', '邯郸|handan|hd',
'汉中|hanzhong|hz', '和田|hetian|ht', '晋江|jinjiang|jj', '锦州|jinzhou|jz', '景德镇|jingdezhen|jdz',
'嘉峪关|jiayuguan|jyg', '井冈山|jinggangshan|jgs', '济宁|jining|jn', '九江|jiujiang|jj', '佳木斯|jiamusi|jms', '济南|jinan|jn',
'喀什|kashi|ks', '昆明|kunming|km', '康定|kangding|kd', '克拉玛依|kelamayi|klmy', '库尔勒|kuerle|kel', '库车|kuche|kc', '兰州|lanzhou|lz',
'洛阳|luoyang|ly', '丽江|lijiang|lj', '林芝|linzhi|lz', '柳州|liuzhou|lz', '泸州|luzhou|lz', '连云港|lianyungang|lyg', '黎平|liping|lp',
'连成|liancheng|lc', '拉萨|lasa|ls', '临沧|lincang|lc', '临沂|linyi|ly', '芒市|mangshi|ms', '牡丹江|mudanjiang|mdj', '满洲里|manzhouli|mzl', '绵阳|mianyang|my',
'梅县|meixian|mx', '漠河|mohe|mh', '南充|nanchong|nc', '南宁|nanning|nn', '南阳|nanyang|ny', '南通|nantong|nt', '那拉提|nalati|nlt',
'宁波|ningbo|nb', '攀枝花|panzhihua|pzh', '衢州|quzhou|qz', '秦皇岛|qinhuangdao|qhd', '庆阳|qingyang|qy', '齐齐哈尔|qiqihaer|qqhe',
'石家庄|shijiazhuang|sjz', '沈阳|shenyang|sy', '思茅|simao|sm', '铜仁|tongren|tr', '塔城|tacheng|tc', '腾冲|tengchong|tc', '台州|taizhou|tz',
'通辽|tongliao|tl', '太原|taiyuan|ty', '威海|weihai|wh', '梧州|wuzhou|wz', '文山|wenshan|ws', '无锡|wuxi|wx', '潍坊|weifang|wf', '武夷山|wuyishan|wys', '乌兰浩特|wulanhaote|wlht',
'温州|wenzhou|wz', '乌鲁木齐|wulumuqi|wlmq', '万州|wanzhou|wz', '乌海|wuhai|wh', '兴义|xingyi|xy', '西昌|xichang|xc', '襄樊|xiangfan|xf',
'西宁|xining|xn', '锡林浩特|xilinhaote|xlht', '西双版纳|xishuangbanna|xsbn', '徐州|xuzhou|xz', '义乌|yiwu|yw', '永州|yongzhou|yz', '榆林|yulin|yl', '延安|yanan|ya', '运城|yuncheng|yc',
'烟台|yantai|yt', '银川|yinchuan|yc', '宜昌|yichang|yc', '宜宾|yibin|yb', '盐城|yancheng|yc', '延吉|yanji|yj', '玉树|yushu|ys', '伊宁|yining|yn', '珠海|zhuhai|zh', '昭通|zhaotong|zt',
'张家界|zhangjiajie|zjj', '舟山|zhoushan|zs', '郑州|zhengzhou|zz', '中卫|zhongwei|zw', '芷江|zhijiang|zj', '湛江|zhanjiang|zj']; var iCity = {
inputSelector : function(id){ //input添加点击事件
var input =document.getElementById(id);
_CalF.addHandler(input,'click',function(){
iCity.input = input;
popList.style.visibility = "hidden";
iCity.outClick();
iCity.aClick();
iCity.getPosition();
});
_CalF.addHandler(input,'keyup',function(event){
var event = event || window.event,
keycode = event.keyCode;
popCity.style.visibility = "hidden";
iCity.createUL();
});
},
_temp : [
"<h1>选择城市(支持汉字/拼音/拼音缩写)</h1>",
"<ul id='popMenu'>",
"<li class='active'>热门城市</li>",
"<li>ABCDEFG</li>",
"<li>HIGHLMN</li>",
"<li>OPQRSTU</li>",
"<li>VWXYZ</li>",
"</ul>",
"<div id='popCityCon'></div>"
],
cityClass : function(){ //城市分类
if(!this.citys){
//{HOT:{hot:[],ABCDEFG:{a:[1,2,3],b:[1,2,3]},HIGHLMN:{},OPQRSTU:{},VWXYZ:{}}
this.citys = {"hotCity":[],"ABCDEFG":{},"HIGHLMN":{},"OPQRSTU":{},"VWXYZ":{}};
var make,fn,name,
reg1 = /^[a-g]$/i, reg2 = /^[h-n]$/i, reg3 = /^[o-u]$/i,reg4 = /^[v-z]$/i; for(i in cityData){
make = cityData[i].split("|"); //分割成数组
fn = make[2].substring(0,1).toUpperCase(); //获取英文第一个字母转换成大写
name = make[0];
if(reg1.test(fn)){
if(!this.citys.ABCDEFG[fn]) this.citys.ABCDEFG[fn]=[];
this.citys.ABCDEFG[fn].push(name)
}else if(reg2.test(fn)){
if(!this.citys.HIGHLMN[fn]) this.citys.HIGHLMN[fn]=[];
this.citys.HIGHLMN[fn].push(name)
}else if(reg3.test(fn)){
if(!this.citys.OPQRSTU[fn]) this.citys.OPQRSTU[fn]=[];
this.citys.OPQRSTU[fn].push(name)
}else if(reg4.test(fn)){
if(!this.citys.VWXYZ[fn]) this.citys.VWXYZ[fn]=[];
this.citys.VWXYZ[fn].push(name)
} if(i<20){
if(!this.citys.hotCity["HOT"]) this.citys.hotCity["HOT"]=[];
this.citys.hotCity["HOT"].push(name);
}
} }
},
creatDiv : function(){
var popCity = document.createElement("div"); //城市div
popCity.id = "popCity";
popCity.innerHTML = this._temp.join("");
_CalF.addHandler(popCity,"click", _CalF.stopPropagation); //阻止事件冒泡 var popList = document.createElement("div"); //输入提示div
_CalF.addHandler(popList,"click", _CalF.stopPropagation); //阻止事件冒泡
popList.id="popList"; document.body.appendChild(popCity);
document.body.appendChild(popList);
this.popCity = popCity;
this.popList = popList;
},
getData :function(){
this.creatDiv();
this.cityClass();
var i,div,arr,dl,dt,dd,_tempDD,
popCityCon = _CalF.$("#popCityCon"),
data = this.citys; for(var i in data){
div = document.createElement("div");
div.id = i;
if(div.id=="hotCity") div.className ="active";
arr=[]; for(var b in data[i]){
arr.push(b);
arr.sort();
} for(var c in arr){
dl = document.createElement("dl");
dt = document.createElement("dt");
dd = document.createElement("dd");
dt.innerHTML = arr[c]; _tempDD = [];
for(var d in data[i][arr[c]]){
_tempDD.push("<a>"+data[i][arr[c]][d]+"</a>");
}
dd.innerHTML = _tempDD.join(""); dl.appendChild(dt);
dl.appendChild(dd);
div.appendChild(dl);
} popCityCon.appendChild(div);
}
if(_CalF.ie6()){
popCityCon.appendChild(this.createIframe());
this.aHover();
}
this.tabClick();
},
tabClick : function(){
var index,
popMenu = _CalF.$("#popMenu"),
popCityCon = _CalF.$("#popCityCon"),
myIframe = _CalF.$("#myIframe"),
popCity = _CalF.$("#popCity"),
lis = popMenu.getElementsByTagName("li"),
divs = popCityCon.getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
lis[i].index = i;
lis[i].onclick = function(){
for(var j=0;j<i;j++){
_CalF.removeClass("active",lis[j]);
_CalF.removeClass("active",divs[j]);
}
_CalF.addClass("active",this);
_CalF.addClass("active",divs[this.index]);
if(_CalF.ie6()){myIframe.style.height = popCity.offsetHeight + 'px';};
}
}
},
aClick : function(){
var that = this,
popCityCon = _CalF.$("#popCityCon"),
links = popCityCon.getElementsByTagName("a");
for(var i in links){
links[i].onclick = function(){
that.input.value = this.innerHTML;
that.popCity.style.visibility = "hidden";
}
}
},
aHover : function(){
var that = this,
popCityCon = _CalF.$("#popCityCon"),
links = popCityCon.getElementsByTagName("a");
for(var i in links){
links[i].onmouseover = function(){_CalF.addClass("active",this)}
links[i].onmouseout = function(){_CalF.removeClass("active",this)}
}
},
liClick :function(){
var that = this,
popList = that.popList,
lis = popList.getElementsByTagName("li");
for(var i=0, len = lis.length; i<len; i++){
lis[i].onclick = function(){
that.input.value = this.innerHTML;
that.popList.style.visibility = "hidden";
}
}
},
liHover :function(){
var that = this,
popList = that.popList,
lis = popList.getElementsByTagName("li");
for(var i=0, len = lis.length; i<len; i++){
lis[i].onmouseover = function(){_CalF.addClass("active",this)}
lis[i].onmouseout = function(){_CalF.removeClass("active",this)}
}
},
getPosition : function(){
var Pos = _CalF.getPosition(iCity.input);
popCity.style.top = Pos.top + Pos.height + "px";
popCity.style.left = Pos.left + "px";
popCity.style.visibility = "visible"; popList.style.top = Pos.top + Pos.height + "px";
popList.style.left = Pos.left + "px";
popList.style.width = Pos.width + "px";
},
createIframe : function(){ //ie6创建iframe遮罩
var myIframe = document.createElement('iframe');
myIframe.id = 'myIframe';
myIframe.style.position = 'absolute';
myIframe.style.zIndex = '-1';
myIframe.style.left = '-1px';
myIframe.style.top = 0;
myIframe.style.border = 0;
myIframe.style.filter = 'alpha(opacity= 0 )';
myIframe.style.width = this.popCity.offsetWidth + 'px';
myIframe.style.height = this.popCity.offsetHeight + 'px';
this.myIframe = myIframe;
return myIframe;
},
createIframe2 : function(){ //ie6创建iframe遮罩
var myIframe2 = document.createElement('iframe');
myIframe2.id = 'myIframe2';
myIframe2.style.position = 'absolute';
myIframe2.style.zIndex = '-1';
myIframe2.style.left = '-1px';
myIframe2.style.top = 0;
myIframe2.style.border = 0;
myIframe2.style.filter = 'alpha(opacity= 0 )';
myIframe2.style.width = this.popList.offsetWidth + 'px';
myIframe2.style.height = this.popList.offsetHeight + 'px';
return myIframe2;
},
createUL : function(){
var value = this.input.value,
popList = this.popList;
if(value !==""){
var ul = document.createElement('ul'),
searchResult = [],
reg = new RegExp("^" + value + "|\\|" + value, 'gi'),
make,str;
searchResult.push("<ul>");
for(var i in cityData){
if(reg.test(cityData[i])){ //含有字符串
make = cityData[i].split("|"); //分割成数组
str = "<li>"+make[0]+"</li>";
searchResult.push(str);
}
}
searchResult.push("</ul>"); if(searchResult.length>2){
popList.innerHTML = searchResult.join("");
if(_CalF.ie6()){
popList.appendChild(this.createIframe2());
this.liHover();
};
this.liClick();
popList.style.visibility = "visible";
} }else{
popList.style.visibility = "hidden";
}
},
outClick:function(){ //鼠标在对象区域外点击隐藏
var that = this;
_CalF.addHandler(document, 'click',function(event){
var event = event || window.event,
target = event.target || event.srcElement;
if(target == that.input || target==that.popCity || target==that.popList) return;
that.popCity.style.visibility = "hidden";
that.popList.style.visibility = "hidden";
});
} }; iCity.getData();
var input1 = iCity.inputSelector("city1");
var input2 = iCity.inputSelector("city2");
</script>
</body>
</html>
原生Js汉语拼音首字母匹配城市名/自动提示列表的更多相关文章
- js中文首字母数组排序
js中文首字母数组排序 数组的排序js算法: var Pinyin = (function() { var Pinyin = function(ops) { this.initialize(ops); ...
- 微信小程序实现按首字母检索城市列表
不说废话,上效果图 因为我有多处要用到,所以我这里是写成自定义组件的,你也可以直接改成在page页面编写: 布局左边一个scroll-view,显示城市列表,右边一个view显示字母列表,城市列表这边 ...
- re正则匹配城市名
匹配城市名称,只要第一次出现之后的数据 import re a='巴州区白云县台公交乡公司对面区海蜃楼6楼' b=re.search(r'(^\w+?区)|(^\w+?县)|(^\w+?镇)',a). ...
- JS获取首字母
function pySegSort(arr, empty) { if (!String.prototype.localeCompare) return null; var letters = &qu ...
- JS设置首字母大写算法
返回一个字符串,确保字符串的每个单词首字母都大写,其余部分小写. 像'the'和'of'这样的连接符同理. function titleCase(str) { //把字符串所有的字母变为小写,并根据空 ...
- js字符串首字母大写的不同写法
写法一: let name = 'hello' name.charAt(0).toUpperCase() + name.slice(1) 写法二: let name = 'hello' name.sl ...
- mysql按汉语拼音首字母排序
如果数据表table的某字段name的字符编码是utf8_general_ci : SELECT * FROM `table` ORDER BY convert(name USING gbk ...
- SQL按汉语拼音首字母排序
以常用到的省的数据表(province)为例,其中name字段为省的名称,SQL语句如下: ))) as py ,a.name from province a left outer join ( se ...
- js字符串首字母转为大写
function initialsLetterUpperCase(arr){ if(Array.isArray(arr)){ return arr.map(function(val,index,arr ...
随机推荐
- [think in java] 第8章 多态
多态 "封装"通过合并特征和行为来创建新的数据类型. "多态"的作用则是消除类型之间的耦合关系. 方法调用绑定 定义:将一个方法调用同一个方法主题关联起来被称为 ...
- VS2017 安装过程
2017 安装过程 工欲善其事必先利其器 Visual Studio 2017 正式版官方下载地址:https://www.visualstudio.com/downloads/ 安装vs2017的时 ...
- 存储用es，消息队列用redis
自动化确实方便,做微服务再合适不过了,单一jar包部署和管理都非常方便.只要系统架构设计合理,大型项目也能用.最近做的项目,统计中心和推荐系统,collector.calculator.recomme ...
- docker入门1: Dockerfile介绍
Dockerfile是为快速构建docker image而设计的,当你使用dockerbuild 命令的时候,docker 会读取当前目录下的命名为Dockerfile(首字母大写)的纯文本文件并执行 ...
- TCP/UDP 报头格式
参考:https://www.cnblogs.com/MRRAOBX/articles/4540228.html TCP: 源端口号 以及 目的端口号 32位 序列号 seq 确认号 ACK ...
- c语言学习笔记（6）——for和while循环
for和while等价替换 -------------------------- int i = 1; for (i; i<=100; i++){ sum = sum + 1; } ------ ...
- 外部进程嵌入到Qt进程界面（使用QWindow::fromWinId）
有时候需要做框架集成的东西,需要把其他客户端像组件一样集成到一个客户端中,类似于一个软件集成的平台客户端,统一用一个中心管理的客户端做类似于控制面板一样的东西去调用不同的软件.此时就必须相应不同的点击 ...
- 对于ado.net dataProvider的介绍
学习刘皓的 ADO.NET入门教程(二)了解.NET数据提供程序 而来 这篇文章很一般,主要是对dataProvider做了个简单的介绍.因为在该系列文章中提到,ado.net主要有两部分 dataP ...
- WPF 定时器DispatcherTimer+GetCursorPos 的使用,动态查看屏幕上任一点坐标
原文:WPF 定时器DispatcherTimer+GetCursorPos 的使用,动态查看屏幕上任一点坐标 ); dTimer.Start(); ...
- 在Eclipse安装ADT
Eclipse 3.4 (Ganymede) 启动 Eclipse,然后选择 Help > Software Updates….在出现的对话框中.单击 Available Software 选项 ...