在ie8上js实现简单的combobox功能(支持拼音检索)
2016-05-22 21:23
756 查看
最近在ie8碰到一个js问题，需要实现(ie8)使用拼音或者拼音首字母来检索select中的内容，原来的combobox只能支持汉字输入检索，现在需要进行改进，现在我将一步一步的实现方法记录下来，功能简单，也可能有bug和不足，供学习参考。(本文只是提供思路学习和备份，实际情况需要在ie8或者ie兼容模式上使用，所以没有考虑到别的浏览器)
目录结构：
test
|--js
|--index.html
在index页面中添加
index.html
[html] view
plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/autoComplete.js" ></script>
<script type="text/javascript">
</script>
</head>
<body>
<input type="text" id="txtDisplay" />
<select id="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
<option value="5">重庆</option>
<option value="6">天津</option>
<option value="7">沈阳</option>
<option value="8">南京</option>
<option value="9">武汉</option>
<option value="10">长春</option>
<option value="11">成都</option>
<option value="12">大连</option>
<option value="13">杭州</option>
<option value="14">青岛</option>
<option value="15">a济南</option>
<option value="16">厦门</option>
<option value="17">福州</option>
<option value="18">西安</option>
<option value="19">长沙</option>
<option value="20">哈尔滨</option>
</select>
</body>
</html>
效果：开始将select 的下拉列表框隐藏，当点击input文本框的时候显示到input框的下面，选择完成后再将select隐藏。
js实现：
如果一个页面有多个地方需要实现这样的功能，这个时候就要使用面向对象的思维，尽可能代码重用，我们需要自定义一个ap这样的集合。
autoComplete.js
[javascript] view
plain copy
function Map() {
/** 存放键的数组(遍历用到) */
this.keys = new Array();
/** 存放数据 */
this.data = new Object();
/**
* 放入一个键值对
* @param {String} key
* @param {Object} value
*/
this.put = function(key, value) {
if(this.data[key] == null){
this.keys.push(key);
}
this.data[key] = value;
};
/**
* 获取某键对应的值
* @param {String} key
* @return {Object} value
*/
this.get = function(key) {
return this.data[key];
};
/**
* 删除一个键值对
* @param {String} key
*/
this.remove = function(key) {
this.keys.remove(key);
this.data[key] = null;
};
/**
* 遍历Map,执行处理函数
*
* @param {Function} 回调函数 function(key,value,index){..}
*/
this.each = function(fn){
if(typeof fn != 'function'){
return;
}
var len = this.keys.length;
for(var i=0;i<len;i++){
var k = this.keys[i];
fn(k,this.data[k],i);
}
};
/**
* 获取键值数组(类似Java的entrySet())
* @return 键值对象{key,value}的数组
*/
this.entrys = function() {
var len = this.keys.length;
var entrys = new Array(len);
for (var i = 0; i < len; i++) {
entrys[i] = {
key : this.keys[i],
value : this.data[i]
};
}
return entrys;
};
/**
* 判断Map是否为空
*/
this.isEmpty = function() {
return this.keys.length == 0;
};
/**
* 获取键值对数量
*/
this.size = function(){
return this.keys.length;
};
/**
* 重写toString
*/
this.toString = function(){
var s = "{";
for(var i=0;i<this.keys.length;i++,s+=','){
var k = this.keys[i];
s += k+"="+this.data[k];
}
s+="}";
return s;
};
}
Array.prototype.remove = function(s) {
for (var i = 0; i < this.length; i++) {
if (s == this[i])
this.splice(i, 1);
}
}
现在我们要写一个程序加载入口文件，用来将input和select的对象传入，然后进行事件绑定等等一系列的操作。
[javascript] view
plain copy
var autoCompleteMap = new Map(); //组件容器，便于组件事件驱动时调用，同时支持多组件管理
var splitFleg = "_"; //分隔符
/**
* 文本框，下拉框组合成自动补全组件
* @param {Object} txtObj 文本框对象
* @param {Object} selectObj 下拉框对象
* @param {int} selectSize 显示下拉框的数量
* @param {int} selectLength 下拉框的长度
*/
function AutoComplete(txtObj, selectObj, selectSize, selectLength) {
this.cacheContainer = new Array(); //缓存容器，用来在页面刚刚加载的时候将option中的内容缓存到cacheContainer中
this.init = function() {
this.initCache(); //缓存数据，将option的数据缓存到cacheContainer
this.initCSS(); //初始化css 将select隐藏
this.registerEvent(); //注册事件
this.setSelectIdPosition(); //设置select的位置
// 缓存当前组件，便于组件事件驱动时调用，同时支持多组件管理
autoCompleteMap.put(txtObj.id + selectObj.id, this);
// 界面刷新后,将直属机构下拉框text值,写入文本框
var selectIndex = selectObj.selectedIndex;
if (selectIndex > 0) //第一个内容一般是 【请选择】，如果没有则将>0改为>=0
txtObj.value = selectObj.options[selectIndex].text;
}
//缓存数据，将option的数据缓存到cacheContainer
this.initCache = function() {
var select_options = selectObj.options;
if (select_options == null || select_options.length == 0) {
return;
}
this.cacheContainer = [];
for (var i = 0; i < select_options.length; i++) {
this.cacheContainer[i] = select_options[i].text + splitFleg + select_options[i].value;
}
}
this.initCSS = function() {
selectObj.style.display = "none";
selectObj.style.position = "absolute";
selectObj.style.zIndex = 2;
selectObj.style.width = selectLength + "px";
selectObj.multiple = "multiple";
txtObj.style.width = selectLength - 5 + "px";
}
this.registerEvent = function() {
// 下拉框事件
selectObj.ondblclick = this.doubleClickEvent;
selectObj.onkeyup = this.keyupEvent;
selectObj.onblur = this.OnblurEvent;
selectObj.onfocus = this.OnfocusEvent;
// 文本框事件
txtObj.onfocus = this.OnfocusEvent;
txtObj.onblur = this.OnblurEvent;
txtObj.onkeyup = this.txtObjKeyupEvent;
}
this.setSelectIdPosition = function() {
var position = this.findPosition(txtObj);
selectObj.style.left = position[0] + "px";
selectObj.style.top = position[3] + 3 + "px";
}
this.findPosition = function(oElement) {
var x2 = 0;
var y2 = 0;
var width = oElement.offsetWidth;
var height = oElement.offsetHeight;
if (typeof(oElement.offsetParent) != 'undefined') {
for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
x2 = posX + width;
y2 = posY + height;
return [posX, posY, x2, y2];
} else {
x2 = oElement.x + width;
y2 = oElement.y + height;
return [oElement.x, oElement.y, x2, y2];
}
}
//-----------------绑定的事件------------------------
/**
* select下拉列表框双击事件
*/
this.doubleClickEvent = function() {
selectObj.style.display = "none";
var selectIndex = selectObj.selectedIndex;
txtObj.value = selectObj.options[selectIndex].text;
}
/**
* 鼠标点击松开事件
*/
this.keyupEvent = function() {
var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);
if (event.keyCode == 13) {
event.returnValue = false;
var srcElem = document.activeElement; //获取当前聚焦的对象
var testval = srcElem.id;
if (testval == selectObj.id) {
autocomplete.doubleClickEvent();
}
}
}
/**
* 聚焦事件
*/
this.OnblurEvent = function() {
var srcElem = document.activeElement;
var testval = srcElem.id;
if (testval != selectObj.id && testval != txtObj.id) { //如果没有聚焦到当前input框或者select列表
selectObj.style.display = "none"; //将select列表隐藏
}
}
/**
* 聚焦事件
*/
this.OnfocusEvent = function() {
var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);
autocomplete.setSelectIdPosition();
var srcElem = document.activeElement;
var testval = srcElem.id;
if (testval == selectObj.id || testval == txtObj.id) { //聚焦在当前对象
if (txtObj.value.length != 0) { //当input框中存在字符，则不进行任何操作
return;
}
var selectIdLength = selectObj.options.length;
if (selectIdLength > selectSize) {
selectObj.size = selectSize;
} else {
selectObj.size = selectIdLength;
}
selectObj.style.display = "block";
}
}
var myTimeout = null;
/**
* 文本框鼠标聚焦松开事件 ，设置一个定时器，每个特定的时间执行函数，查询和input框中匹配到的select列表数据并显示
*/
this.txtObjKeyupEvent = function() {
var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);
if (event.keyCode == 40) { //input框中点击键盘方向键下，这个时候不需要进行检索，只有在输入的时候触发检索事件
var srcElem = document.activeElement;
var testval = srcElem.id;
if (testval == txtObj.id) {
selectObj.focus();
if (selectObj.options.length >= 1)
selectObj.options[0].selected = true;
}
return;
}
if (autocomplete.myTimeout != null) { //清空设置的定时执行事件
clearTimeout(autocomplete.myTimeout);
}
autocomplete.myTimeout = setTimeout(autocomplete.doAJAX, 200);
}
//----------------------------检索显示匹配数据-----------------------------
/**
* 做主要的查询匹配操作
*/
this.doAJAX = function() {
var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);
//清空原来的OPTIONS
autocomplete.clearAllOptions();
autocomplete.setSelectIdPosition();
var inputStr = txtObj.value;
var arrays = autocomplete.compareInput(inputStr); //匹配符合查询条件的数据
if (arrays == null || arrays.length == 0) {
selectObj.style.display = "none";
return;
}
selectObj.style.display = "block";
for (var i = 0; i < arrays.length; i++) {
var optionParams = arrays[i].split(splitFleg);
var opt = new Option();
opt.text = optionParams[0];
opt.value = optionParams[1];
selectObj.add(opt);
}
if (arrays.length > selectSize) {
selectObj.size = selectSize;
} else {
selectObj.size = arrays.length;
}
}
/**
* 清空原来的OPTIONS
*/
this.clearAllOptions = function() {
//清空原来的OPTIONS
var nL = selectObj.options.length;
while (nL > 0) {
selectObj.remove(selectObj.options.length - 1);
nL = selectObj.options.length;
}
}
//--------------------------数据检索规则---------------------
/**
* 数据检索规则
* @param {String} inputStr input框中需要进行匹配的条件
*/
this.compareInput = function(inputStr) {
if (this.cacheContainer.length == 0) {
return;
}
inputStr = inputStr.replace(/(^[\s]*)/g, ""); //去前边空白字符串
inputStr = this.deleteSpecialSpace(inputStr); //去除特殊空白字符串
if (inputStr == null || inputStr.length == 0) {
return this.cacheContainer;
}
inputStr = disableSpecialCharacter(inputStr); //特殊字符处理
var resultArray = new Array();
var k = 0;
var selectText = "";
for (var i = 0; i < this.cacheContainer.length; i++) {
selectText = (this.cacheContainer[i].split(splitFleg)[0]).replace(/(^[\s]*)/g, "");
selectText = this.deleteSpecialSpace(selectText);
if (compareRules(inputStr, selectText)) { //匹配规则
resultArray[k] = this.cacheContainer[i];
k++;
}
}
return uniqueArray(resultArray);
}
/**
* 去除特殊空白字符串
*/
this.deleteSpecialSpace = function(srcStr) {
var temp = "";
for (var i = 0; i < srcStr.length; i++) {
var charStr = srcStr.charAt(i);
// 界面特殊空格Unicode=160，此空格既不是全角，也非半角
if (charStr.charCodeAt(0) == 160) {
continue;
}
temp += charStr;
}
return temp;
}
}
/**
* @param {String} inputStr 需要进行过滤的字符
* 特殊字符处理
*/
function disableSpecialCharacter(inputStr) {
inputStr = inputStr.replace(new RegExp("\\\\", 'g'), "\\\\");
inputStr = inputStr.replace(new RegExp("\\.", 'g'), "\\.");
inputStr = inputStr.replace(new RegExp("\\^", 'g'), "\\^");
inputStr = inputStr.replace(new RegExp("\\{", 'g'), "\\{");
inputStr = inputStr.replace(new RegExp("\\[", 'g'), "\\[");
inputStr = inputStr.replace(new RegExp("\\(", 'g'), "\\(");
inputStr = inputStr.replace(new RegExp("\\|", 'g'), "\\|");
inputStr = inputStr.replace(new RegExp("\\]", 'g'), "\\]");
inputStr = inputStr.replace(new RegExp("\\)", 'g'), "\\)");
inputStr = inputStr.replace(new RegExp("\\*", 'g'), "\\*");
inputStr = inputStr.replace(new RegExp("\\+", 'g'), "\\+");
inputStr = inputStr.replace(new RegExp("\\?", 'g'), "\\?");
return inputStr;
}
/**
* 匹配规则
* @param {String} inputStr input框字符，匹配条件
* @param {String} selectText 被匹配文字
*/
function compareRules(inputStr, selectText) {
//匹配汉字
return selectText.indexOf(inputStr) != -1 ;
}
/**
* 过滤重复数据
* @param {Object} arr 结果数组
*/
function uniqueArray(arr) {
if(arr == null || arr.length == 0){
return arr;
}
return arr.reverse().join(",").match( /([^,]+)(?!.*\1)/ig).reverse();
}
/**
* 在原来onload的基础上加上自定义要执行的函数
* @param {Object} func 加载函数
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
引入将汉字转换成拼音的工具js
pinYinHanZi.js
[javascript] view
plain copy
/**
* 汉子转换成拼音工具js
*/
var key2code = {
65: "a",
66: "b",
67: "c",
68: "d",
69: "e",
70: "f",
71: "g",
72: "h",
73: "i",
74: "j",
75: "k",
76: "l",
77: "m",
78: "n",
79: "o",
80: "p",
81: "q",
82: "r",
83: "s",
84: "t",
85: "u",
86: "v",
87: "w",
88: "x",
89: "y",
90: "z",
49: "1",
50: "2",
51: "3",
52: "4",
53: "5",
54: "6",
55: "7",
56: "8",
57: "9",
48: "0"
};
var spell = {
0xB0A1: "a",
0xB0A3: "ai",
0xB0B0: "an",
0xB0B9: "ang",
0xB0BC: "ao",
0xB0C5: "ba",
0xB0D7: "bai",
0xB0DF: "ban",
0xB0EE: "bang",
0xB0FA: "bao",
0xB1AD: "bei",
0xB1BC: "ben",
0xB1C0: "beng",
0xB1C6: "bi",
0xB1DE: "bian",
0xB1EA: "biao",
0xB1EE: "bie",
0xB1F2: "bin",
0xB1F8: "bing",
0xB2A3: "bo",
0xB2B8: "bu",
0xB2C1: "ca",
0xB2C2: "cai",
0xB2CD: "can",
0xB2D4: "cang",
0xB2D9: "cao",
0xB2DE: "ce",
0xB2E3: "ceng",
0xB2E5: "cha",
0xB2F0: "chai",
0xB2F3: "chan",
0xB2FD: "chang",
0xB3AC: "chao",
0xB3B5: "che",
0xB3BB: "chen",
0xB3C5: "cheng",
0xB3D4: "chi",
0xB3E4: "chong",
0xB3E9: "chou",
0xB3F5: "chu",
0xB4A7: "chuai",
0xB4A8: "chuan",
0xB4AF: "chuang",
0xB4B5: "chui",
0xB4BA: "chun",
0xB4C1: "chuo",
0xB4C3: "ci",
0xB4CF: "cong",
0xB4D5: "cou",
0xB4D6: "cu",
0xB4DA: "cuan",
0xB4DD: "cui",
0xB4E5: "cun",
0xB4E8: "cuo",
0xB4EE: "da",
0xB4F4: "dai",
0xB5A2: "dan",
0xB5B1: "dang",
0xB5B6: "dao",
0xB5C2: "de",
0xB5C5: "deng",
0xB5CC: "di",
0xB5DF: "dian",
0xB5EF: "diao",
0xB5F8: "die",
0xB6A1: "ding",
0xB6AA: "diu",
0xB6AB: "dong",
0xB6B5: "dou",
0xB6BC: "du",
0xB6CB: "duan",
0xB6D1: "dui",
0xB6D5: "dun",
0xB6DE: "duo",
0xB6EA: "e",
0xB6F7: "en",
0xB6F8: "er",
0xB7A2: "fa",
0xB7AA: "fan",
0xB7BB: "fang",
0xB7C6: "fei",
0xB7D2: "fen",
0xB7E1: "feng",
0xB7F0: "fo",
0xB7F1: "fou",
0xB7F2: "fu",
0xB8C1: "ga",
0xB8C3: "gai",
0xB8C9: "gan",
0xB8D4: "gang",
0xB8DD: "gao",
0xB8E7: "ge",
0xB8F8: "gei",
0xB8F9: "gen",
0xB8FB: "geng",
0xB9A4: "gong",
0xB9B3: "gou",
0xB9BC: "gu",
0xB9CE: "gua",
0xB9D4: "guai",
0xB9D7: "guan",
0xB9E2: "guang",
0xB9E5: "gui",
0xB9F5: "gun",
0xB9F8: "guo",
0xB9FE: "ha",
0xBAA1: "hai",
0xBAA8: "han",
0xBABB: "hang",
0xBABE: "hao",
0xBAC7: "he",
0xBAD9: "hei",
0xBADB: "hen",
0xBADF: "heng",
0xBAE4: "hong",
0xBAED: "hou",
0xBAF4: "hu",
0xBBA8: "hua",
0xBBB1: "huai",
0xBBB6: "huan",
0xBBC4: "huang",
0xBBD2: "hui",
0xBBE7: "hun",
0xBBED: "huo",
0xBBF7: "ji",
0xBCCE: "jia",
0xBCDF: "jian",
0xBDA9: "jiang",
0xBDB6: "jiao",
0xBDD2: "jie",
0xBDED: "jin",
0xBEA3: "jing",
0xBEBC: "jiong",
0xBEBE: "jiu",
0xBECF: "ju",
0xBEE8: "juan",
0xBEEF: "jue",
0xBEF9: "jun",
0xBFA6: "ka",
0xBFAA: "kai",
0xBFAF: "kan",
0xBFB5: "kang",
0xBFBC: "kao",
0xBFC0: "ke",
0xBFCF: "ken",
0xBFD3: "keng",
0xBFD5: "kong",
0xBFD9: "kou",
0xBFDD: "ku",
0xBFE4: "kua",
0xBFE9: "kuai",
0xBFED: "kuan",
0xBFEF: "kuang",
0xBFF7: "kui",
0xC0A4: "kun",
0xC0A8: "kuo",
0xC0AC: "la",
0xC0B3: "lai",
0xC0B6: "lan",
0xC0C5: "lang",
0xC0CC: "lao",
0xC0D5: "le",
0xC0D7: "lei",
0xC0E2: "leng",
0xC0E5: "li",
0xC1A9: "lia",
0xC1AA: "lian",
0xC1B8: "liang",
0xC1C3: "liao",
0xC1D0: "lie",
0xC1D5: "lin",
0xC1E1: "ling",
0xC1EF: "liu",
0xC1FA: "long",
0xC2A5: "lou",
0xC2AB: "lu",
0xC2BF: "lv",
0xC2CD: "luan",
0xC2D3: "lue",
0xC2D5: "lun",
0xC2DC: "luo",
0xC2E8: "ma",
0xC2F1: "mai",
0xC2F7: "man",
0xC3A2: "mang",
0xC3A8: "mao",
0xC3B4: "me",
0xC3B5: "mei",
0xC3C5: "men",
0xC3C8: "meng",
0xC3D0: "mi",
0xC3DE: "mian",
0xC3E7: "miao",
0xC3EF: "mie",
0xC3F1: "min",
0xC3F7: "ming",
0xC3FD: "miu",
0xC3FE: "mo",
0xC4B1: "mou",
0xC4B4: "mu",
0xC4C3: "na",
0xC4CA: "nai",
0xC4CF: "nan",
0xC4D2: "nang",
0xC4D3: "nao",
0xC4D8: "ne",
0xC4D9: "nei",
0xC4DB: "nen",
0xC4DC: "neng",
0xC4DD: "ni",
0xC4E8: "nian",
0xC4EF: "niang",
0xC4F1: "niao",
0xC4F3: "nie",
0xC4FA: "nin",
0xC4FB: "ning",
0xC5A3: "niu",
0xC5A7: "nong",
0xC5AB: "nu",
0xC5AE: "nv",
0xC5AF: "nuan",
0xC5B0: "nue",
0xC5B2: "nuo",
0xC5B6: "o",
0xC5B7: "ou",
0xC5BE: "pa",
0xC5C4: "pai",
0xC5CA: "pan",
0xC5D2: "pang",
0xC5D7: "pao",
0xC5DE: "pei",
0xC5E7: "pen",
0xC5E9: "peng",
0xC5F7: "pi",
0xC6AA: "pian",
0xC6AE: "piao",
0xC6B2: "pie",
0xC6B4: "pin",
0xC6B9: "ping",
0xC6C2: "po",
0xC6CB: "pu",
0xC6DA: "qi",
0xC6FE: "qia",
0xC7A3: "qian",
0xC7B9: "qiang",
0xC7C1: "qiao",
0xC7D0: "qie",
0xC7D5: "qin",
0xC7E0: "qing",
0xC7ED: "qiong",
0xC7EF: "qiu",
0xC7F7: "qu",
0xC8A6: "quan",
0xC8B1: "que",
0xC8B9: "qun",
0xC8BB: "ran",
0xC8BF: "rang",
0xC8C4: "rao",
0xC8C7: "re",
0xC8C9: "ren",
0xC8D3: "reng",
0xC8D5: "ri",
0xC8D6: "rong",
0xC8E0: "rou",
0xC8E3: "ru",
0xC8ED: "ruan",
0xC8EF: "rui",
0xC8F2: "run",
0xC8F4: "ruo",
0xC8F6: "sa",
0xC8F9: "sai",
0xC8FD: "san",
0xC9A3: "sang",
0xC9A6: "sao",
0xC9AA: "se",
0xC9AD: "sen",
0xC9AE: "seng",
0xC9AF: "sha",
0xC9B8: "shai",
0xC9BA: "shan",
0xC9CA: "shang",
0xC9D2: "shao",
0xC9DD: "she",
0xC9E9: "shen",
0xC9F9: "sheng",
0xCAA6: "shi",
0xCAD5: "shou",
0xCADF: "shu",
0xCBA2: "shua",
0xCBA4: "shuai",
0xCBA8: "shuan",
0xCBAA: "shuang",
0xCBAD: "shui",
0xCBB1: "shun",
0xCBB5: "shuo",
0xCBB9: "si",
0xCBC9: "song",
0xCBD1: "sou",
0xCBD4: "su",
0xCBE1: "suan",
0xCBE4: "sui",
0xCBEF: "sun",
0xCBF2: "suo",
0xCBFA: "ta",
0xCCA5: "tai",
0xCCAE: "tan",
0xCCC0: "tang",
0xCCCD: "tao",
0xCCD8: "te",
0xCCD9: "teng",
0xCCDD: "ti",
0xCCEC: "tian",
0xCCF4: "tiao",
0xCCF9: "tie",
0xCCFC: "ting",
0xCDA8: "tong",
0xCDB5: "tou",
0xCDB9: "tu",
0xCDC4: "tuan",
0xCDC6: "tui",
0xCDCC: "tun",
0xCDCF: "tuo",
0xCDDA: "wa",
0xCDE1: "wai",
0xCDE3: "wan",
0xCDF4: "wang",
0xCDFE: "wei",
0xCEC1: "wen",
0xCECB: "weng",
0xCECE: "wo",
0xCED7: "wu",
0xCEF4: "xi",
0xCFB9: "xia",
0xCFC6: "xian",
0xCFE0: "xiang",
0xCFF4: "xiao",
0xD0A8: "xie",
0xD0BD: "xin",
0xD0C7: "xing",
0xD0D6: "xiong",
0xD0DD: "xiu",
0xD0E6: "xu",
0xD0F9: "xuan",
0xD1A5: "xue",
0xD1AB: "xun",
0xD1B9: "ya",
0xD1C9: "yan",
0xD1EA: "yang",
0xD1FB: "yao",
0xD2AC: "ye",
0xD2BB: "yi",
0xD2F0: "yin",
0xD3A2: "ying",
0xD3B4: "yo",
0xD3B5: "yong",
0xD3C4: "you",
0xD3D9: "yu",
0xD4A7: "yuan",
0xD4BB: "yue",
0xD4C5: "yun",
0xD4D1: "za",
0xD4D4: "zai",
0xD4DB: "zan",
0xD4DF: "zang",
0xD4E2: "zao",
0xD4F0: "ze",
0xD4F4: "zei",
0xD4F5: "zen",
0xD4F6: "zeng",
0xD4FA: "zha",
0xD5AA: "zhai",
0xD5B0: "zhan",
0xD5C1: "zhang",
0xD5D0: "zhao",
0xD5DA: "zhe",
0xD5E4: "zhen",
0xD5F4: "zheng",
0xD6A5: "zhi",
0xD6D0: "zhong",
0xD6DB: "zhou",
0xD6E9: "zhu",
0xD7A5: "zhua",
0xD7A7: "zhuai",
0xD7A8: "zhuan",
0xD7AE: "zhuang",
0xD7B5: "zhui",
0xD7BB: "zhun",
0xD7BD: "zhuo",
0xD7C8: "zi",
0xD7D7: "zong",
0xD7DE: "zou",
0xD7E2: "zu",
0xD7EA: "zuan",
0xD7EC: "zui",
0xD7F0: "zun",
0xD7F2: "zuo"
};
var spellArray = new Array();
var pn = "";
function pinyin(char) {
if (!char.charCodeAt(0) || char.charCodeAt(0) < 1328)
return char;
if (spellArray[char.charCodeAt(0)])
return spellArray[char.charCodeAt(0)]
execScript("ascCode=hex(asc(\"" + char + "\"))", "vbscript");
ascCode = eval("0x" + ascCode);
if (!(ascCode > 0xB0A0 && ascCode < 0xD7F3))
return char;
for (var i = ascCode;(!spell[i] && i > 0);)
i--;
return spell[i];
}
function toPinyin(str) {
var pStr = ""
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == "\n")
pStr += "<br>"
else
pStr += "<ruby style='ruby-align:center'> " + str.charAt(i) + " <rt>" + pinyin(str.charAt(i)) + "</rt></ruby>"
// else pStr += pinyin(str.charAt(i)) + " "
}
return pStr;
}
function toPinyinOnly(str) {
var pStr = ""
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == "\n")
pStr += "<br>"
else
pStr += pinyin(str.charAt(i));
//pStr += " " + pinyin(str.charAt(i));
// else pStr += pinyin(str.charAt(i)) + " "
}
return pStr;
}
function toPinyinShengmu(str) {
var pStr = ""
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == "\n")
pStr += "";
else
pStr += pinyin(str.charAt(i)).charAt(0);
// else pStr += pinyin(str.charAt(i)) + " "
}
return pStr;
}
function pinyinSort(a, b) {
var rValue = 0
for (var i = 0; i < a.length; i++) {
var pinA = pinyin(a.charAt(i))
var pinB = pinyin(b.charAt(i))
if (rValue = pinA > pinB ? 1 : pinA < pinB ? -1 : 0)
break
}
return rValue
}
index.html
[html] view
plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/autoComplete.js"></script>
<script type="text/javascript" src="js/pinYinHanZi.js"></script>
<script type="text/javascript">
//自定义规则
function compareRules(inputStr, selectText) {
//匹配汉字 和拼音
return selectText.indexOf(inputStr) != -1 || toPinyinShengmu(selectText).indexOf(inputStr) != -1 ||
toPinyinOnly(selectText).indexOf(inputStr) != -1;
}
addLoadEvent(func);
function func() {
var textObj = document.getElementById("txtDisplay");
var cityObj = document.getElementById("city");
var autocomplete = new AutoComplete(textObj, cityObj, 10, 300);
autocomplete.init();
}
</script>
</head>
<body>
<input type="text" id="txtDisplay" />
<select id="city">
<option value="1">北京</option>
<option value="2"> 上海</option>
<option value="3">广州</option>
<option value="5">重庆</option>
<option value="6">天津</option>
<option value="7">沈阳</option>
<option value="8">南京</option>
<option value="9">武汉</option>
<option value="10">长春</option>
<option value="11">成都</option>
<option value="12">大连</option>
<option value="13">杭州</option>
<option value="14">青岛</option>
<option value="15">济南</option>
<option value="16">厦门</option>
<option value="17">福州</option>
<option value="18">西安</option>
<option value="19">长沙</option>
<option value="20">哈尔滨</option>
</select>
</body>
</html>
注意：该版本有一些bug和对其他（除ie）浏览器不兼容性。
文件下载路径：文件下载
目录结构：
test
|--js
|--index.html
在index页面中添加
index.html
[html] view
plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/autoComplete.js" ></script>
<script type="text/javascript">
</script>
</head>
<body>
<input type="text" id="txtDisplay" />
<select id="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
<option value="5">重庆</option>
<option value="6">天津</option>
<option value="7">沈阳</option>
<option value="8">南京</option>
<option value="9">武汉</option>
<option value="10">长春</option>
<option value="11">成都</option>
<option value="12">大连</option>
<option value="13">杭州</option>
<option value="14">青岛</option>
<option value="15">a济南</option>
<option value="16">厦门</option>
<option value="17">福州</option>
<option value="18">西安</option>
<option value="19">长沙</option>
<option value="20">哈尔滨</option>
</select>
</body>
</html>
效果：开始将select 的下拉列表框隐藏，当点击input文本框的时候显示到input框的下面，选择完成后再将select隐藏。
js实现：
如果一个页面有多个地方需要实现这样的功能，这个时候就要使用面向对象的思维，尽可能代码重用，我们需要自定义一个ap这样的集合。
autoComplete.js
[javascript] view
plain copy
function Map() {
/** 存放键的数组(遍历用到) */
this.keys = new Array();
/** 存放数据 */
this.data = new Object();
/**
* 放入一个键值对
* @param {String} key
* @param {Object} value
*/
this.put = function(key, value) {
if(this.data[key] == null){
this.keys.push(key);
}
this.data[key] = value;
};
/**
* 获取某键对应的值
* @param {String} key
* @return {Object} value
*/
this.get = function(key) {
return this.data[key];
};
/**
* 删除一个键值对
* @param {String} key
*/
this.remove = function(key) {
this.keys.remove(key);
this.data[key] = null;
};
/**
* 遍历Map,执行处理函数
*
* @param {Function} 回调函数 function(key,value,index){..}
*/
this.each = function(fn){
if(typeof fn != 'function'){
return;
}
var len = this.keys.length;
for(var i=0;i<len;i++){
var k = this.keys[i];
fn(k,this.data[k],i);
}
};
/**
* 获取键值数组(类似Java的entrySet())
* @return 键值对象{key,value}的数组
*/
this.entrys = function() {
var len = this.keys.length;
var entrys = new Array(len);
for (var i = 0; i < len; i++) {
entrys[i] = {
key : this.keys[i],
value : this.data[i]
};
}
return entrys;
};
/**
* 判断Map是否为空
*/
this.isEmpty = function() {
return this.keys.length == 0;
};
/**
* 获取键值对数量
*/
this.size = function(){
return this.keys.length;
};
/**
* 重写toString
*/
this.toString = function(){
var s = "{";
for(var i=0;i<this.keys.length;i++,s+=','){
var k = this.keys[i];
s += k+"="+this.data[k];
}
s+="}";
return s;
};
}
Array.prototype.remove = function(s) {
for (var i = 0; i < this.length; i++) {
if (s == this[i])
this.splice(i, 1);
}
}
现在我们要写一个程序加载入口文件，用来将input和select的对象传入，然后进行事件绑定等等一系列的操作。
[javascript] view
plain copy
var autoCompleteMap = new Map(); //组件容器，便于组件事件驱动时调用，同时支持多组件管理
var splitFleg = "_"; //分隔符
/**
* 文本框，下拉框组合成自动补全组件
* @param {Object} txtObj 文本框对象
* @param {Object} selectObj 下拉框对象
* @param {int} selectSize 显示下拉框的数量
* @param {int} selectLength 下拉框的长度
*/
function AutoComplete(txtObj, selectObj, selectSize, selectLength) {
this.cacheContainer = new Array(); //缓存容器，用来在页面刚刚加载的时候将option中的内容缓存到cacheContainer中
this.init = function() {
this.initCache(); //缓存数据，将option的数据缓存到cacheContainer
this.initCSS(); //初始化css 将select隐藏
this.registerEvent(); //注册事件
this.setSelectIdPosition(); //设置select的位置
// 缓存当前组件，便于组件事件驱动时调用，同时支持多组件管理
autoCompleteMap.put(txtObj.id + selectObj.id, this);
// 界面刷新后,将直属机构下拉框text值,写入文本框
var selectIndex = selectObj.selectedIndex;
if (selectIndex > 0) //第一个内容一般是 【请选择】，如果没有则将>0改为>=0
txtObj.value = selectObj.options[selectIndex].text;
}
//缓存数据，将option的数据缓存到cacheContainer
this.initCache = function() {
var select_options = selectObj.options;
if (select_options == null || select_options.length == 0) {
return;
}
this.cacheContainer = [];
for (var i = 0; i < select_options.length; i++) {
this.cacheContainer[i] = select_options[i].text + splitFleg + select_options[i].value;
}
}
this.initCSS = function() {
selectObj.style.display = "none";
selectObj.style.position = "absolute";
selectObj.style.zIndex = 2;
selectObj.style.width = selectLength + "px";
selectObj.multiple = "multiple";
txtObj.style.width = selectLength - 5 + "px";
}
this.registerEvent = function() {
// 下拉框事件
selectObj.ondblclick = this.doubleClickEvent;
selectObj.onkeyup = this.keyupEvent;
selectObj.onblur = this.OnblurEvent;
selectObj.onfocus = this.OnfocusEvent;
// 文本框事件
txtObj.onfocus = this.OnfocusEvent;
txtObj.onblur = this.OnblurEvent;
txtObj.onkeyup = this.txtObjKeyupEvent;
}
this.setSelectIdPosition = function() {
var position = this.findPosition(txtObj);
selectObj.style.left = position[0] + "px";
selectObj.style.top = position[3] + 3 + "px";
}
this.findPosition = function(oElement) {
var x2 = 0;
var y2 = 0;
var width = oElement.offsetWidth;
var height = oElement.offsetHeight;
if (typeof(oElement.offsetParent) != 'undefined') {
for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
x2 = posX + width;
y2 = posY + height;
return [posX, posY, x2, y2];
} else {
x2 = oElement.x + width;
y2 = oElement.y + height;
return [oElement.x, oElement.y, x2, y2];
}
}
//-----------------绑定的事件------------------------
/**
* select下拉列表框双击事件
*/
this.doubleClickEvent = function() {
selectObj.style.display = "none";
var selectIndex = selectObj.selectedIndex;
txtObj.value = selectObj.options[selectIndex].text;
}
/**
* 鼠标点击松开事件
*/
this.keyupEvent = function() {
var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);
if (event.keyCode == 13) {
event.returnValue = false;
var srcElem = document.activeElement; //获取当前聚焦的对象
var testval = srcElem.id;
if (testval == selectObj.id) {
autocomplete.doubleClickEvent();
}
}
}
/**
* 聚焦事件
*/
this.OnblurEvent = function() {
var srcElem = document.activeElement;
var testval = srcElem.id;
if (testval != selectObj.id && testval != txtObj.id) { //如果没有聚焦到当前input框或者select列表
selectObj.style.display = "none"; //将select列表隐藏
}
}
/**
* 聚焦事件
*/
this.OnfocusEvent = function() {
var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);
autocomplete.setSelectIdPosition();
var srcElem = document.activeElement;
var testval = srcElem.id;
if (testval == selectObj.id || testval == txtObj.id) { //聚焦在当前对象
if (txtObj.value.length != 0) { //当input框中存在字符，则不进行任何操作
return;
}
var selectIdLength = selectObj.options.length;
if (selectIdLength > selectSize) {
selectObj.size = selectSize;
} else {
selectObj.size = selectIdLength;
}
selectObj.style.display = "block";
}
}
var myTimeout = null;
/**
* 文本框鼠标聚焦松开事件 ，设置一个定时器，每个特定的时间执行函数，查询和input框中匹配到的select列表数据并显示
*/
this.txtObjKeyupEvent = function() {
var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);
if (event.keyCode == 40) { //input框中点击键盘方向键下，这个时候不需要进行检索，只有在输入的时候触发检索事件
var srcElem = document.activeElement;
var testval = srcElem.id;
if (testval == txtObj.id) {
selectObj.focus();
if (selectObj.options.length >= 1)
selectObj.options[0].selected = true;
}
return;
}
if (autocomplete.myTimeout != null) { //清空设置的定时执行事件
clearTimeout(autocomplete.myTimeout);
}
autocomplete.myTimeout = setTimeout(autocomplete.doAJAX, 200);
}
//----------------------------检索显示匹配数据-----------------------------
/**
* 做主要的查询匹配操作
*/
this.doAJAX = function() {
var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);
//清空原来的OPTIONS
autocomplete.clearAllOptions();
autocomplete.setSelectIdPosition();
var inputStr = txtObj.value;
var arrays = autocomplete.compareInput(inputStr); //匹配符合查询条件的数据
if (arrays == null || arrays.length == 0) {
selectObj.style.display = "none";
return;
}
selectObj.style.display = "block";
for (var i = 0; i < arrays.length; i++) {
var optionParams = arrays[i].split(splitFleg);
var opt = new Option();
opt.text = optionParams[0];
opt.value = optionParams[1];
selectObj.add(opt);
}
if (arrays.length > selectSize) {
selectObj.size = selectSize;
} else {
selectObj.size = arrays.length;
}
}
/**
* 清空原来的OPTIONS
*/
this.clearAllOptions = function() {
//清空原来的OPTIONS
var nL = selectObj.options.length;
while (nL > 0) {
selectObj.remove(selectObj.options.length - 1);
nL = selectObj.options.length;
}
}
//--------------------------数据检索规则---------------------
/**
* 数据检索规则
* @param {String} inputStr input框中需要进行匹配的条件
*/
this.compareInput = function(inputStr) {
if (this.cacheContainer.length == 0) {
return;
}
inputStr = inputStr.replace(/(^[\s]*)/g, ""); //去前边空白字符串
inputStr = this.deleteSpecialSpace(inputStr); //去除特殊空白字符串
if (inputStr == null || inputStr.length == 0) {
return this.cacheContainer;
}
inputStr = disableSpecialCharacter(inputStr); //特殊字符处理
var resultArray = new Array();
var k = 0;
var selectText = "";
for (var i = 0; i < this.cacheContainer.length; i++) {
selectText = (this.cacheContainer[i].split(splitFleg)[0]).replace(/(^[\s]*)/g, "");
selectText = this.deleteSpecialSpace(selectText);
if (compareRules(inputStr, selectText)) { //匹配规则
resultArray[k] = this.cacheContainer[i];
k++;
}
}
return uniqueArray(resultArray);
}
/**
* 去除特殊空白字符串
*/
this.deleteSpecialSpace = function(srcStr) {
var temp = "";
for (var i = 0; i < srcStr.length; i++) {
var charStr = srcStr.charAt(i);
// 界面特殊空格Unicode=160，此空格既不是全角，也非半角
if (charStr.charCodeAt(0) == 160) {
continue;
}
temp += charStr;
}
return temp;
}
}
/**
* @param {String} inputStr 需要进行过滤的字符
* 特殊字符处理
*/
function disableSpecialCharacter(inputStr) {
inputStr = inputStr.replace(new RegExp("\\\\", 'g'), "\\\\");
inputStr = inputStr.replace(new RegExp("\\.", 'g'), "\\.");
inputStr = inputStr.replace(new RegExp("\\^", 'g'), "\\^");
inputStr = inputStr.replace(new RegExp("\\{", 'g'), "\\{");
inputStr = inputStr.replace(new RegExp("\\[", 'g'), "\\[");
inputStr = inputStr.replace(new RegExp("\\(", 'g'), "\\(");
inputStr = inputStr.replace(new RegExp("\\|", 'g'), "\\|");
inputStr = inputStr.replace(new RegExp("\\]", 'g'), "\\]");
inputStr = inputStr.replace(new RegExp("\\)", 'g'), "\\)");
inputStr = inputStr.replace(new RegExp("\\*", 'g'), "\\*");
inputStr = inputStr.replace(new RegExp("\\+", 'g'), "\\+");
inputStr = inputStr.replace(new RegExp("\\?", 'g'), "\\?");
return inputStr;
}
/**
* 匹配规则
* @param {String} inputStr input框字符，匹配条件
* @param {String} selectText 被匹配文字
*/
function compareRules(inputStr, selectText) {
//匹配汉字
return selectText.indexOf(inputStr) != -1 ;
}
/**
* 过滤重复数据
* @param {Object} arr 结果数组
*/
function uniqueArray(arr) {
if(arr == null || arr.length == 0){
return arr;
}
return arr.reverse().join(",").match( /([^,]+)(?!.*\1)/ig).reverse();
}
/**
* 在原来onload的基础上加上自定义要执行的函数
* @param {Object} func 加载函数
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
引入将汉字转换成拼音的工具js
pinYinHanZi.js
[javascript] view
plain copy
/**
* 汉子转换成拼音工具js
*/
var key2code = {
65: "a",
66: "b",
67: "c",
68: "d",
69: "e",
70: "f",
71: "g",
72: "h",
73: "i",
74: "j",
75: "k",
76: "l",
77: "m",
78: "n",
79: "o",
80: "p",
81: "q",
82: "r",
83: "s",
84: "t",
85: "u",
86: "v",
87: "w",
88: "x",
89: "y",
90: "z",
49: "1",
50: "2",
51: "3",
52: "4",
53: "5",
54: "6",
55: "7",
56: "8",
57: "9",
48: "0"
};
var spell = {
0xB0A1: "a",
0xB0A3: "ai",
0xB0B0: "an",
0xB0B9: "ang",
0xB0BC: "ao",
0xB0C5: "ba",
0xB0D7: "bai",
0xB0DF: "ban",
0xB0EE: "bang",
0xB0FA: "bao",
0xB1AD: "bei",
0xB1BC: "ben",
0xB1C0: "beng",
0xB1C6: "bi",
0xB1DE: "bian",
0xB1EA: "biao",
0xB1EE: "bie",
0xB1F2: "bin",
0xB1F8: "bing",
0xB2A3: "bo",
0xB2B8: "bu",
0xB2C1: "ca",
0xB2C2: "cai",
0xB2CD: "can",
0xB2D4: "cang",
0xB2D9: "cao",
0xB2DE: "ce",
0xB2E3: "ceng",
0xB2E5: "cha",
0xB2F0: "chai",
0xB2F3: "chan",
0xB2FD: "chang",
0xB3AC: "chao",
0xB3B5: "che",
0xB3BB: "chen",
0xB3C5: "cheng",
0xB3D4: "chi",
0xB3E4: "chong",
0xB3E9: "chou",
0xB3F5: "chu",
0xB4A7: "chuai",
0xB4A8: "chuan",
0xB4AF: "chuang",
0xB4B5: "chui",
0xB4BA: "chun",
0xB4C1: "chuo",
0xB4C3: "ci",
0xB4CF: "cong",
0xB4D5: "cou",
0xB4D6: "cu",
0xB4DA: "cuan",
0xB4DD: "cui",
0xB4E5: "cun",
0xB4E8: "cuo",
0xB4EE: "da",
0xB4F4: "dai",
0xB5A2: "dan",
0xB5B1: "dang",
0xB5B6: "dao",
0xB5C2: "de",
0xB5C5: "deng",
0xB5CC: "di",
0xB5DF: "dian",
0xB5EF: "diao",
0xB5F8: "die",
0xB6A1: "ding",
0xB6AA: "diu",
0xB6AB: "dong",
0xB6B5: "dou",
0xB6BC: "du",
0xB6CB: "duan",
0xB6D1: "dui",
0xB6D5: "dun",
0xB6DE: "duo",
0xB6EA: "e",
0xB6F7: "en",
0xB6F8: "er",
0xB7A2: "fa",
0xB7AA: "fan",
0xB7BB: "fang",
0xB7C6: "fei",
0xB7D2: "fen",
0xB7E1: "feng",
0xB7F0: "fo",
0xB7F1: "fou",
0xB7F2: "fu",
0xB8C1: "ga",
0xB8C3: "gai",
0xB8C9: "gan",
0xB8D4: "gang",
0xB8DD: "gao",
0xB8E7: "ge",
0xB8F8: "gei",
0xB8F9: "gen",
0xB8FB: "geng",
0xB9A4: "gong",
0xB9B3: "gou",
0xB9BC: "gu",
0xB9CE: "gua",
0xB9D4: "guai",
0xB9D7: "guan",
0xB9E2: "guang",
0xB9E5: "gui",
0xB9F5: "gun",
0xB9F8: "guo",
0xB9FE: "ha",
0xBAA1: "hai",
0xBAA8: "han",
0xBABB: "hang",
0xBABE: "hao",
0xBAC7: "he",
0xBAD9: "hei",
0xBADB: "hen",
0xBADF: "heng",
0xBAE4: "hong",
0xBAED: "hou",
0xBAF4: "hu",
0xBBA8: "hua",
0xBBB1: "huai",
0xBBB6: "huan",
0xBBC4: "huang",
0xBBD2: "hui",
0xBBE7: "hun",
0xBBED: "huo",
0xBBF7: "ji",
0xBCCE: "jia",
0xBCDF: "jian",
0xBDA9: "jiang",
0xBDB6: "jiao",
0xBDD2: "jie",
0xBDED: "jin",
0xBEA3: "jing",
0xBEBC: "jiong",
0xBEBE: "jiu",
0xBECF: "ju",
0xBEE8: "juan",
0xBEEF: "jue",
0xBEF9: "jun",
0xBFA6: "ka",
0xBFAA: "kai",
0xBFAF: "kan",
0xBFB5: "kang",
0xBFBC: "kao",
0xBFC0: "ke",
0xBFCF: "ken",
0xBFD3: "keng",
0xBFD5: "kong",
0xBFD9: "kou",
0xBFDD: "ku",
0xBFE4: "kua",
0xBFE9: "kuai",
0xBFED: "kuan",
0xBFEF: "kuang",
0xBFF7: "kui",
0xC0A4: "kun",
0xC0A8: "kuo",
0xC0AC: "la",
0xC0B3: "lai",
0xC0B6: "lan",
0xC0C5: "lang",
0xC0CC: "lao",
0xC0D5: "le",
0xC0D7: "lei",
0xC0E2: "leng",
0xC0E5: "li",
0xC1A9: "lia",
0xC1AA: "lian",
0xC1B8: "liang",
0xC1C3: "liao",
0xC1D0: "lie",
0xC1D5: "lin",
0xC1E1: "ling",
0xC1EF: "liu",
0xC1FA: "long",
0xC2A5: "lou",
0xC2AB: "lu",
0xC2BF: "lv",
0xC2CD: "luan",
0xC2D3: "lue",
0xC2D5: "lun",
0xC2DC: "luo",
0xC2E8: "ma",
0xC2F1: "mai",
0xC2F7: "man",
0xC3A2: "mang",
0xC3A8: "mao",
0xC3B4: "me",
0xC3B5: "mei",
0xC3C5: "men",
0xC3C8: "meng",
0xC3D0: "mi",
0xC3DE: "mian",
0xC3E7: "miao",
0xC3EF: "mie",
0xC3F1: "min",
0xC3F7: "ming",
0xC3FD: "miu",
0xC3FE: "mo",
0xC4B1: "mou",
0xC4B4: "mu",
0xC4C3: "na",
0xC4CA: "nai",
0xC4CF: "nan",
0xC4D2: "nang",
0xC4D3: "nao",
0xC4D8: "ne",
0xC4D9: "nei",
0xC4DB: "nen",
0xC4DC: "neng",
0xC4DD: "ni",
0xC4E8: "nian",
0xC4EF: "niang",
0xC4F1: "niao",
0xC4F3: "nie",
0xC4FA: "nin",
0xC4FB: "ning",
0xC5A3: "niu",
0xC5A7: "nong",
0xC5AB: "nu",
0xC5AE: "nv",
0xC5AF: "nuan",
0xC5B0: "nue",
0xC5B2: "nuo",
0xC5B6: "o",
0xC5B7: "ou",
0xC5BE: "pa",
0xC5C4: "pai",
0xC5CA: "pan",
0xC5D2: "pang",
0xC5D7: "pao",
0xC5DE: "pei",
0xC5E7: "pen",
0xC5E9: "peng",
0xC5F7: "pi",
0xC6AA: "pian",
0xC6AE: "piao",
0xC6B2: "pie",
0xC6B4: "pin",
0xC6B9: "ping",
0xC6C2: "po",
0xC6CB: "pu",
0xC6DA: "qi",
0xC6FE: "qia",
0xC7A3: "qian",
0xC7B9: "qiang",
0xC7C1: "qiao",
0xC7D0: "qie",
0xC7D5: "qin",
0xC7E0: "qing",
0xC7ED: "qiong",
0xC7EF: "qiu",
0xC7F7: "qu",
0xC8A6: "quan",
0xC8B1: "que",
0xC8B9: "qun",
0xC8BB: "ran",
0xC8BF: "rang",
0xC8C4: "rao",
0xC8C7: "re",
0xC8C9: "ren",
0xC8D3: "reng",
0xC8D5: "ri",
0xC8D6: "rong",
0xC8E0: "rou",
0xC8E3: "ru",
0xC8ED: "ruan",
0xC8EF: "rui",
0xC8F2: "run",
0xC8F4: "ruo",
0xC8F6: "sa",
0xC8F9: "sai",
0xC8FD: "san",
0xC9A3: "sang",
0xC9A6: "sao",
0xC9AA: "se",
0xC9AD: "sen",
0xC9AE: "seng",
0xC9AF: "sha",
0xC9B8: "shai",
0xC9BA: "shan",
0xC9CA: "shang",
0xC9D2: "shao",
0xC9DD: "she",
0xC9E9: "shen",
0xC9F9: "sheng",
0xCAA6: "shi",
0xCAD5: "shou",
0xCADF: "shu",
0xCBA2: "shua",
0xCBA4: "shuai",
0xCBA8: "shuan",
0xCBAA: "shuang",
0xCBAD: "shui",
0xCBB1: "shun",
0xCBB5: "shuo",
0xCBB9: "si",
0xCBC9: "song",
0xCBD1: "sou",
0xCBD4: "su",
0xCBE1: "suan",
0xCBE4: "sui",
0xCBEF: "sun",
0xCBF2: "suo",
0xCBFA: "ta",
0xCCA5: "tai",
0xCCAE: "tan",
0xCCC0: "tang",
0xCCCD: "tao",
0xCCD8: "te",
0xCCD9: "teng",
0xCCDD: "ti",
0xCCEC: "tian",
0xCCF4: "tiao",
0xCCF9: "tie",
0xCCFC: "ting",
0xCDA8: "tong",
0xCDB5: "tou",
0xCDB9: "tu",
0xCDC4: "tuan",
0xCDC6: "tui",
0xCDCC: "tun",
0xCDCF: "tuo",
0xCDDA: "wa",
0xCDE1: "wai",
0xCDE3: "wan",
0xCDF4: "wang",
0xCDFE: "wei",
0xCEC1: "wen",
0xCECB: "weng",
0xCECE: "wo",
0xCED7: "wu",
0xCEF4: "xi",
0xCFB9: "xia",
0xCFC6: "xian",
0xCFE0: "xiang",
0xCFF4: "xiao",
0xD0A8: "xie",
0xD0BD: "xin",
0xD0C7: "xing",
0xD0D6: "xiong",
0xD0DD: "xiu",
0xD0E6: "xu",
0xD0F9: "xuan",
0xD1A5: "xue",
0xD1AB: "xun",
0xD1B9: "ya",
0xD1C9: "yan",
0xD1EA: "yang",
0xD1FB: "yao",
0xD2AC: "ye",
0xD2BB: "yi",
0xD2F0: "yin",
0xD3A2: "ying",
0xD3B4: "yo",
0xD3B5: "yong",
0xD3C4: "you",
0xD3D9: "yu",
0xD4A7: "yuan",
0xD4BB: "yue",
0xD4C5: "yun",
0xD4D1: "za",
0xD4D4: "zai",
0xD4DB: "zan",
0xD4DF: "zang",
0xD4E2: "zao",
0xD4F0: "ze",
0xD4F4: "zei",
0xD4F5: "zen",
0xD4F6: "zeng",
0xD4FA: "zha",
0xD5AA: "zhai",
0xD5B0: "zhan",
0xD5C1: "zhang",
0xD5D0: "zhao",
0xD5DA: "zhe",
0xD5E4: "zhen",
0xD5F4: "zheng",
0xD6A5: "zhi",
0xD6D0: "zhong",
0xD6DB: "zhou",
0xD6E9: "zhu",
0xD7A5: "zhua",
0xD7A7: "zhuai",
0xD7A8: "zhuan",
0xD7AE: "zhuang",
0xD7B5: "zhui",
0xD7BB: "zhun",
0xD7BD: "zhuo",
0xD7C8: "zi",
0xD7D7: "zong",
0xD7DE: "zou",
0xD7E2: "zu",
0xD7EA: "zuan",
0xD7EC: "zui",
0xD7F0: "zun",
0xD7F2: "zuo"
};
var spellArray = new Array();
var pn = "";
function pinyin(char) {
if (!char.charCodeAt(0) || char.charCodeAt(0) < 1328)
return char;
if (spellArray[char.charCodeAt(0)])
return spellArray[char.charCodeAt(0)]
execScript("ascCode=hex(asc(\"" + char + "\"))", "vbscript");
ascCode = eval("0x" + ascCode);
if (!(ascCode > 0xB0A0 && ascCode < 0xD7F3))
return char;
for (var i = ascCode;(!spell[i] && i > 0);)
i--;
return spell[i];
}
function toPinyin(str) {
var pStr = ""
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == "\n")
pStr += "<br>"
else
pStr += "<ruby style='ruby-align:center'> " + str.charAt(i) + " <rt>" + pinyin(str.charAt(i)) + "</rt></ruby>"
// else pStr += pinyin(str.charAt(i)) + " "
}
return pStr;
}
function toPinyinOnly(str) {
var pStr = ""
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == "\n")
pStr += "<br>"
else
pStr += pinyin(str.charAt(i));
//pStr += " " + pinyin(str.charAt(i));
// else pStr += pinyin(str.charAt(i)) + " "
}
return pStr;
}
function toPinyinShengmu(str) {
var pStr = ""
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == "\n")
pStr += "";
else
pStr += pinyin(str.charAt(i)).charAt(0);
// else pStr += pinyin(str.charAt(i)) + " "
}
return pStr;
}
function pinyinSort(a, b) {
var rValue = 0
for (var i = 0; i < a.length; i++) {
var pinA = pinyin(a.charAt(i))
var pinB = pinyin(b.charAt(i))
if (rValue = pinA > pinB ? 1 : pinA < pinB ? -1 : 0)
break
}
return rValue
}
index.html
[html] view
plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/autoComplete.js"></script>
<script type="text/javascript" src="js/pinYinHanZi.js"></script>
<script type="text/javascript">
//自定义规则
function compareRules(inputStr, selectText) {
//匹配汉字 和拼音
return selectText.indexOf(inputStr) != -1 || toPinyinShengmu(selectText).indexOf(inputStr) != -1 ||
toPinyinOnly(selectText).indexOf(inputStr) != -1;
}
addLoadEvent(func);
function func() {
var textObj = document.getElementById("txtDisplay");
var cityObj = document.getElementById("city");
var autocomplete = new AutoComplete(textObj, cityObj, 10, 300);
autocomplete.init();
}
</script>
</head>
<body>
<input type="text" id="txtDisplay" />
<select id="city">
<option value="1">北京</option>
<option value="2"> 上海</option>
<option value="3">广州</option>
<option value="5">重庆</option>
<option value="6">天津</option>
<option value="7">沈阳</option>
<option value="8">南京</option>
<option value="9">武汉</option>
<option value="10">长春</option>
<option value="11">成都</option>
<option value="12">大连</option>
<option value="13">杭州</option>
<option value="14">青岛</option>
<option value="15">济南</option>
<option value="16">厦门</option>
<option value="17">福州</option>
<option value="18">西安</option>
<option value="19">长沙</option>
<option value="20">哈尔滨</option>
</select>
</body>
</html>
注意：该版本有一些bug和对其他（除ie）浏览器不兼容性。
文件下载路径：文件下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Array常用功能扩展.js
- 常用string原型扩展js
- threejs(一) 点,线,网格
- javascript语法之函数案例练习
- javascript语法之函数案例练习
- javascript语法之函数的定义
- javascript语法之函数的定义
- 调用AJAX返回JSON、XML数据类型
- javascript语法之with语句
- javascript语法之with语句
- JavaScript-学习一加载不动
- JSP学习笔记（3）-JSP内置对象
- javascript语法之for-in语句
- javascript语法之for-in语句
- ExtJS创建DataGrid
- javascript语法之循环语句小练习
- javascript语法之循环语句小练习
- JSP-EL表达式
- javascript语法之循环语句
- javascript语法之循环语句