在IE8上JS实现combobox支持拼音检索功能
最近在ie8碰到一个js问题，需要实现(ie8)使用拼音或者拼音首字母来检索select中的内容，原来的combobox只能支持汉字输入检索，现在需要进行改进，现在我将一步一步的实现方法记录下来，功能简单，也可能有bug和不足，供学习参考。(本文只是提供思路学习和备份，实际情况需要在ie8或者ie兼容模式上使用，所以没有考虑到别的浏览器)
目录结构：
test
|--js
|--index.html
在index页面中添加
index.html
<!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
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的对象传入，然后进行事件绑定等等一系列的操作。
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
/**
* 汉子转换成拼音工具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 在CODE上查看代码片派生到我的代码片
<!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）浏览器不兼容性。
以上所述是小编给大家介绍的在IE8上JS实现combobox支持拼音检索功能的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
JS实现移动端按首字母检索城市列表附源码下载
我们常见的手机通讯录或微信通讯录,联系人信息是按字母顺序排列的列表,通过点击右侧的字母,会迅速定位检索到首字母对应的联系人.那么我今天给大家介绍的是按首字母快速定位到城市列表,效果和通讯录一样的. 查看演示 下载源码 准备 查看演示 下载源码 准备 首先我们需要用到全国的城市数据,这些城市数据来源于网络,我已经将数据格式化成JSON形式了,大家可以直接拿去用. 我们还需要用到一个叫better-scroll的滚动插件,它能帮我们将超长的页面原生的滚动条处理掉,优化滚动效果. 接着我们准
-
简单谈谈MySQL5.7 JSON格式检索
MySQL5.7版本开始支持JSON格式,在创建表时,可以指定列表的数据类型为JSON,但是如何在JSON格式上创建索引呢?? 本人做了一个简单测试. 第一步:建立一个包含JSON类型的表: CREATE TABLE json_test` ( id` int (8) NOT NULL AUTO_INCREMENT, content` json NOT NULL , PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 第二步:初始化数据
-
js仿淘宝的拼音检索特效代码
以下是HTML网页特效代码,点击运行按钮可查看效果 js仿taobao效果 *{ margin:0;padding:0;} body{ font:normal 12px Verdana, Arial, Helvetica, sans-serif; text- align:center;} #warpper{ position:absolute; left:100px; top:100px;} h5{ float:left;} a{ text-decoration:underline; curso
-
基于JavaScript实现类似于百度学术高级检索功能
百度学术http://xueshu.baidu.com/高级检索是通过前台生成后台内部高级语法来实现高级检索的,可以通过前台js做字符串拼接传给后台实现,难度不大: 下面是高级检索的核心功能代码,我使用的是纯js实现,并未使用jquery: <p class="fl srh-btn"> <input type="submit" class="srh-submit" style="height:px" valu
-
开发实例：JSP中实现全文检索
JSP中的全文检索 全文检索一直都是web方面的关键技术,如何在浩如烟海的信息中找到自己想要的信息是人们最关心的.鼎鼎大名的GOOGLE就是一个很成功的例子,网络上的人们大部分都用GOOGLE来查找自己需要的内容.全文检索主要有两个技术指标:快速和精确.前一段时间做了一个新闻系统,老板要加上全文检索的功能,想了很久才用一个不太高明的方法实现了.现在分享一下,希望是抛砖引玉吧,如果大家有更好的办法请跟在后边:) 先介绍一下我的新闻系统:数据库里存新闻的基本信息,如标题,发布人,发布时间,主体新闻的
-
JSP开发中hibernate框架的常用检索方式总结
总结hibernate框架的常用检索方式 1.hibernate框架的检索方式有以下几种: OID检索:根据唯一标识OID检索数据 对象导航检索:根据某个对象导航查询与该对象关联的对象数据 HQL检索:通过query接口对象查询 QBC检索:通过criteria接口对象查询 SQL检索:通过SQL语句查询 2.HQL检索方式: 查询全部数据:session.createQuery("from 类名"); 根据条件查询:session.createQuery("from 类名
-
javascript数据结构与算法之检索算法
查找数据有2种方式,顺序查找和二分查找.顺序查找适用于元素随机排列的列表.二分查找适用于元素已排序的列表.二分查找效率更高,但是必须是已经排好序的列表元素集合. 一:顺序查找 顺序查找是从列表的第一个元素开始对列表元素逐个进行判断,直到找到了想要的结果,或者直到列表的结尾都没有找到想要找的元素. 代码如下: function seqSearch(data,arr) { for(var i = 0; i < arr.length; ++i) { if(arr[i] == data) { retur
-
Js中使用hasOwnProperty方法检索ajax响应对象的例子
经常使用百度搜索的同学,一定不会忽视输入框的下拉索引,它是如此方便,然而得天独厚的条件使得这项异步技术多少面临些考验,高并发的服务端请求督促着他们的前端攻城师必须尽可能地减少发送ajax的次数.听起来似乎与本文无关,但并不是这样.首先就暂且让我们为百度免费做个广告吧.在百度首页输入"前端"一词,利用chromebug可以很轻松地看到所发送的响应,结果显示如下: 复制代码 代码如下: window.bdsug.sug({q:'前端';,p:false,s:['前端开发','前端工程师',
-
JavaScript字符串检索字符的方法
在字符串中检索字符的几种方式,供大家参考,具体内容如下 var text="abcdefgh你好,很高兴认识你!"; var str1="abc"; var str2="def"; var str3="ABC"; var str4="很高兴"; function isContain(str,substr){ return new RegExp(substr).test(str); } console.log
-
在IE8上JS实现combobox支持拼音检索功能
最近在ie8碰到一个js问题,需要实现(ie8)使用拼音或者拼音首字母来检索select中的内容,原来的combobox只能支持汉字输入检索,现在需要进行改进,现在我将一步一步的实现方法记录下来,功能简单,也可能有bug和不足,供学习参考.(本文只是提供思路学习和备份,实际情况需要在ie8或者ie兼容模式上使用,所以没有考虑到别的浏览器) 目录结构: test |--js |--index.html 在index页面中添加 index.html <!DOCTYPE html> <html
-
JS实现表单多文件上传样式美化支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善. 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化..),同时支持选择文件后自定义删除相关的文件,最后再上传 文章篇幅较长,先简单看看图示: 一.文件上传基础 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/f
-
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
在Bootstrap的官网上,提供了一种导航栏的组件: 只要在站点文件夹放好JQ与Bootstrap输入如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
JS实现table表格数据排序功能(可支持动态数据+分页效果)
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点. 下面把html的代码贴出来: <!DOCTYPE HTML
-
.net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)
上篇文章给大家介绍了MVC文件上传支持批量上传拖拽及预览文件内容校验功能 本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode 1.导入所需要的包:nuget install bootstrap-fileinput 注意:这里的导包需要在终端导入[需要在wwwroot文件夹下执行nuget命令]如下图 如果发现没有nuget命令,则需要通过apt-get 或者yum 给系统安装nuge包管理工具,这个nuget和vscode中的插件不是一回事 2前台页面编写
-
jQuery插件实现文件上传功能（支持拖拽）
先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下,上传文件的时候需要利用的一些必要的知识. 首先我们要说的就是FileReader对象,这是一个HTML5提出的,专门用来异步的读取用户计算机上文件的对象,这里有详细的介绍.所以如果我们想要使用它,那么首先我们得先创建一个FileReader对象. var fr = new FileReader() 1.这个对象拥有五个方法: 下面附上一个例子:
-
swagger上传文件并支持jwt认证的实现方法
什么是 Swagger? Swagger的目标是为REST APIs 定义一个标准的,与语言无关的接口,使人和计算机在看不到源码或者看不到文档或者不能通过网络流量检测的情况下能发现和理解各种服务的功能.当服务通过Swagger定义,消费者就能与远程的服务互动通过少量的实现逻辑.类似于低级编程接口,Swagger去掉了调用服务时的很多猜测. 背景 由于swagger不仅提供了自动实现接口文档的说明而且支持页面调试,告别postman等工具,无需开发人员手动写api文档,缩减开发成本得到大家广泛认可
-
使用JS实现鼠标放上图片进行放大离开实现缩小功能
使用JS实现鼠标放上图片进行放大离开实现缩小功能,具体代码如下所示: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id= 'div_jpg' style="width: 200px;height: 200px;"> <img src="./128206.jpg" id="
-
js实现中文转拼音的完整步骤记录
使用js搞了一个中文转拼音的包,仓库地址可见:pinyin-pro 特色功能 支持汉字.词语.句子多种格式输入获取 获取拼音 获取声母 获取韵母 获取拼音首字母 获取音调 获取多音字的多种拼音 支持字符串和数组两种输出形式 安装 npm 安装 npm install pinyin-pro yarn 安装 yarn add pinyin-pro 引入 浏览器 script 引入: <!--引入某个版本,如3.2.0版本--> <!-- <script src="https:
-
原生JS以后也支持类型注解意义
目录 引言 为什么需要原生类型注解? 和TS的关系 对开发者意味着什么 总结 引言 在布达佩斯2022 JSConf会议上,tc39(ES标准委员会)成员Gil Tayar介绍了一份当前仍处于stage 1阶段的提案 —— Type Annotations,意在让原生JS支持类型注解. 换句话说,如果提案通过,很多.ts文件将后缀改为.js后就能直接在浏览器中运行. 一份tc39提案通常会经历5个阶段: stage 0:被提出 stage 1:接受审议 stage 2:规范基本完成 stage