chaishen10000
chaishen10000

在ie8上js实现简单的combobox功能(支持拼音检索)

最近在ie8碰到一个js问题，需要实现(ie8)使用拼音或者拼音首字母来检索select中的内容，原来的combobox只能支持汉字输入检索，现在需要进行改进，现在我将一步一步的实现方法记录下来，功能简单，也可能有bug和不足，供学习参考。(本文只是提供思路学习和备份，实际情况需要在ie8或者ie兼容模式上使用，所以没有考虑到别的浏览器)

目录结构：

test

|--js

|--index.html


在index页面中添加

index.html

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title></title>  
  6.         <script type="text/javascript" src="js/autoComplete.js" ></script>  
  7.         <script type="text/javascript">  
  8.               
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <input type="text" id="txtDisplay" />  
  13.         <select id="city">  
  14.             <option value="1">北京</option>  
  15.             <option value="2">上海</option>  
  16.             <option value="3">广州</option>  
  17.             <option value="4">深圳</option>  
  18.             <option value="5">重庆</option>  
  19.             <option value="6">天津</option>  
  20.             <option value="7">沈阳</option>  
  21.             <option value="8">南京</option>  
  22.             <option value="9">武汉</option>  
  23.             <option value="10">长春</option>  
  24.             <option value="11">成都</option>  
  25.             <option value="12">大连</option>  
  26.             <option value="13">杭州</option>  
  27.             <option value="14">青岛</option>  
  28.             <option value="15">a济南</option>  
  29.             <option value="16">厦门</option>  
  30.             <option value="17">福州</option>  
  31.             <option value="18">西安</option>  
  32.             <option value="19">长沙</option>  
  33.             <option value="20">哈尔滨</option>  
  34.         </select>  
  35.     </body>  
  36. </html>  



效果：开始将select 的下拉列表框隐藏，当点击input文本框的时候显示到input框的下面，选择完成后再将select隐藏。

js实现：

如果一个页面有多个地方需要实现这样的功能，这个时候就要使用面向对象的思维，尽可能代码重用，我们需要自定义一个ap这样的集合。

autoComplete.js

[javascript]  view plain  copy
 
  1. function Map() {  
  2.     /** 存放键的数组(遍历用到) */  
  3.     this.keys = new Array();  
  4.     /** 存放数据 */    
  5.     this.data = new Object();   
  6.      /**   
  7.      * 放入一个键值对   
  8.      * @param {String} key   
  9.      * @param {Object} value   
  10.      */    
  11.     this.put = function(key, value) {     
  12.         if(this.data[key] == null){     
  13.             this.keys.push(key);     
  14.         }     
  15.         this.data[key] = value;     
  16.     };  
  17.     /**   
  18.      * 获取某键对应的值   
  19.      * @param {String} key   
  20.      * @return {Object} value   
  21.      */    
  22.     this.get = function(key) {     
  23.         return this.data[key];     
  24.     };   
  25.     /**   
  26.      * 删除一个键值对   
  27.      * @param {String} key   
  28.      */    
  29.     this.remove = function(key) {     
  30.         this.keys.remove(key);     
  31.         this.data[key] = null;     
  32.     };   
  33.     /**   
  34.      * 遍历Map,执行处理函数   
  35.      *    
  36.      * @param {Function} 回调函数 function(key,value,index){..}   
  37.      */    
  38.     this.each = function(fn){     
  39.         if(typeof fn != 'function'){     
  40.             return;     
  41.         }     
  42.         var len = this.keys.length;     
  43.         for(var i=0;i<len;i++){     
  44.             var k = this.keys[i];     
  45.             fn(k,this.data[k],i);     
  46.         }     
  47.     };  
  48.     /**   
  49.      * 获取键值数组(类似Java的entrySet())   
  50.      * @return 键值对象{key,value}的数组   
  51.      */    
  52.     this.entrys = function() {     
  53.         var len = this.keys.length;     
  54.         var entrys = new Array(len);     
  55.         for (var i = 0; i < len; i++) {     
  56.             entrys[i] = {     
  57.                 key : this.keys[i],     
  58.                 value : this.data[i]     
  59.             };     
  60.         }     
  61.         return entrys;     
  62.     };  
  63.     /**   
  64.      * 判断Map是否为空   
  65.      */    
  66.     this.isEmpty = function() {     
  67.         return this.keys.length == 0;     
  68.     };     
  69.          
  70.     /**   
  71.      * 获取键值对数量   
  72.      */    
  73.     this.size = function(){     
  74.         return this.keys.length;     
  75.     };     
  76.          
  77.     /**   
  78.      * 重写toString    
  79.      */    
  80.     this.toString = function(){     
  81.         var s = "{";     
  82.         for(var i=0;i<this.keys.length;i++,s+=','){     
  83.             var k = this.keys[i];     
  84.             s += k+"="+this.data[k];     
  85.         }     
  86.         s+="}";     
  87.         return s;     
  88.     };  
  89. }  
  90. Array.prototype.remove = function(s) {     
  91.     for (var i = 0; i < this.length; i++) {     
  92.         if (s == this[i])     
  93.             this.splice(i, 1);     
  94.     }     
  95. }  


现在我们要写一个程序加载入口文件，用来将input和select的对象传入，然后进行事件绑定等等一系列的操作。

[javascript]  view plain  copy
 
  1. var autoCompleteMap = new Map(); //组件容器，便于组件事件驱动时调用，同时支持多组件管理  
  2. var splitFleg = "_"; //分隔符  
  3. /** 
  4.  * 文本框，下拉框组合成自动补全组件 
  5.  * @param {Object} txtObj 文本框对象 
  6.  * @param {Object} selectObj 下拉框对象 
  7.  * @param {int} selectSize 显示下拉框的数量 
  8.  * @param {int} selectLength 下拉框的长度 
  9.  */  
  10. function AutoComplete(txtObj, selectObj, selectSize, selectLength) {  
  11.     this.cacheContainer = new Array(); //缓存容器，用来在页面刚刚加载的时候将option中的内容缓存到cacheContainer中  
  12.     this.init = function() {  
  13.         this.initCache(); //缓存数据，将option的数据缓存到cacheContainer  
  14.         this.initCSS(); //初始化css  将select隐藏  
  15.         this.registerEvent(); //注册事件  
  16.         this.setSelectIdPosition(); //设置select的位置  
  17.         // 缓存当前组件，便于组件事件驱动时调用，同时支持多组件管理  
  18.         autoCompleteMap.put(txtObj.id + selectObj.id, this);  
  19.         // 界面刷新后,将直属机构下拉框text值,写入文本框  
  20.         var selectIndex = selectObj.selectedIndex;  
  21.         if (selectIndex > 0) //第一个内容一般是 【请选择】，如果没有则将>0改为>=0  
  22.             txtObj.value = selectObj.options[selectIndex].text;  
  23.   
  24.     }  
  25.         //缓存数据，将option的数据缓存到cacheContainer  
  26.     this.initCache = function() {  
  27.         var select_options = selectObj.options;  
  28.         if (select_options == null || select_options.length == 0) {  
  29.             return;  
  30.         }  
  31.         this.cacheContainer = [];  
  32.         for (var i = 0; i < select_options.length; i++) {  
  33.             this.cacheContainer[i] = select_options[i].text + splitFleg + select_options[i].value;  
  34.         }  
  35.     }  
  36.     this.initCSS = function() {  
  37.         selectObj.style.display = "none";  
  38.         selectObj.style.position = "absolute";  
  39.         selectObj.style.zIndex = 2;  
  40.         selectObj.style.width = selectLength + "px";  
  41.         selectObj.multiple = "multiple";  
  42.   
  43.         txtObj.style.width = selectLength - 5 + "px";  
  44.     }  
  45.   
  46.     this.registerEvent = function() {  
  47.         // 下拉框事件  
  48.         selectObj.ondblclick = this.doubleClickEvent;  
  49.         selectObj.onkeyup = this.keyupEvent;  
  50.         selectObj.onblur = this.OnblurEvent;  
  51.         selectObj.onfocus = this.OnfocusEvent;  
  52.   
  53.         // 文本框事件  
  54.         txtObj.onfocus = this.OnfocusEvent;  
  55.         txtObj.onblur = this.OnblurEvent;  
  56.         txtObj.onkeyup = this.txtObjKeyupEvent;  
  57.     }  
  58.     this.setSelectIdPosition = function() {  
  59.         var position = this.findPosition(txtObj);  
  60.   
  61.         selectObj.style.left = position[0] + "px";  
  62.         selectObj.style.top = position[3] + 3 + "px";  
  63.     }  
  64.     this.findPosition = function(oElement) {  
  65.         var x2 = 0;  
  66.         var y2 = 0;  
  67.         var width = oElement.offsetWidth;  
  68.         var height = oElement.offsetHeight;  
  69.         if (typeof(oElement.offsetParent) != 'undefined') {  
  70.             for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {  
  71.                 posX += oElement.offsetLeft;  
  72.                 posY += oElement.offsetTop;  
  73.             }  
  74.             x2 = posX + width;  
  75.             y2 = posY + height;  
  76.             return [posX, posY, x2, y2];  
  77.   
  78.         } else {  
  79.             x2 = oElement.x + width;  
  80.             y2 = oElement.y + height;  
  81.             return [oElement.x, oElement.y, x2, y2];  
  82.         }  
  83.     }  
  84.   
  85.     //-----------------绑定的事件------------------------  
  86.     /** 
  87.      * select下拉列表框双击事件 
  88.      */  
  89.     this.doubleClickEvent = function() {  
  90.         selectObj.style.display = "none";  
  91.         var selectIndex = selectObj.selectedIndex;  
  92.         txtObj.value = selectObj.options[selectIndex].text;  
  93.     }  
  94.     /** 
  95.      * 鼠标点击松开事件 
  96.      */  
  97.     this.keyupEvent = function() {  
  98.         var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);  
  99.   
  100.         if (event.keyCode == 13) {  
  101.             event.returnValue = false;  
  102.             var srcElem = document.activeElement; //获取当前聚焦的对象  
  103.             var testval = srcElem.id;  
  104.             if (testval == selectObj.id) {  
  105.                 autocomplete.doubleClickEvent();  
  106.             }  
  107.         }  
  108.     }  
  109.     /** 
  110.      * 聚焦事件 
  111.      */  
  112.     this.OnblurEvent = function() {  
  113.         var srcElem = document.activeElement;  
  114.         var testval = srcElem.id;  
  115.         if (testval != selectObj.id && testval != txtObj.id) { //如果没有聚焦到当前input框或者select列表  
  116.             selectObj.style.display = "none"; //将select列表隐藏  
  117.         }  
  118.     }  
  119.     /** 
  120.      * 聚焦事件 
  121.      */  
  122.     this.OnfocusEvent = function() {  
  123.         var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);  
  124.         autocomplete.setSelectIdPosition();  
  125.   
  126.         var srcElem = document.activeElement;  
  127.         var testval = srcElem.id;  
  128.         if (testval == selectObj.id || testval == txtObj.id) { //聚焦在当前对象  
  129.             if (txtObj.value.length != 0) { //当input框中存在字符，则不进行任何操作  
  130.                 return;  
  131.             }  
  132.             var selectIdLength = selectObj.options.length;  
  133.   
  134.             if (selectIdLength > selectSize) {  
  135.                 selectObj.size = selectSize;  
  136.             } else {  
  137.                 selectObj.size = selectIdLength;  
  138.             }  
  139.             selectObj.style.display = "block";  
  140.         }  
  141.     }  
  142.     var myTimeout = null;  
  143.     /** 
  144.      * 文本框鼠标聚焦松开事件 ，设置一个定时器，每个特定的时间执行函数，查询和input框中匹配到的select列表数据并显示 
  145.      */  
  146.     this.txtObjKeyupEvent = function() {  
  147.         var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);  
  148.   
  149.         if (event.keyCode == 40) { //input框中点击键盘方向键下，这个时候不需要进行检索，只有在输入的时候触发检索事件  
  150.             var srcElem = document.activeElement;  
  151.             var testval = srcElem.id;  
  152.             if (testval == txtObj.id) {  
  153.                 selectObj.focus();  
  154.                 if (selectObj.options.length >= 1)  
  155.                     selectObj.options[0].selected = true;  
  156.             }  
  157.             return;  
  158.         }  
  159.         if (autocomplete.myTimeout != null) { //清空设置的定时执行事件  
  160.             clearTimeout(autocomplete.myTimeout);  
  161.         }  
  162.         autocomplete.myTimeout = setTimeout(autocomplete.doAJAX, 200);  
  163.     }  
  164.     //----------------------------检索显示匹配数据-----------------------------  
  165.     /** 
  166.      * 做主要的查询匹配操作 
  167.      */  
  168.     this.doAJAX = function() {  
  169.         var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);  
  170.   
  171.         //清空原来的OPTIONS  
  172.         autocomplete.clearAllOptions();  
  173.   
  174.         autocomplete.setSelectIdPosition();  
  175.         var inputStr = txtObj.value;  
  176.   
  177.         var arrays = autocomplete.compareInput(inputStr); //匹配符合查询条件的数据  
  178.         if (arrays == null || arrays.length == 0) {  
  179.             selectObj.style.display = "none";  
  180.             return;  
  181.         }  
  182.   
  183.         selectObj.style.display = "block";  
  184.   
  185.         for (var i = 0; i < arrays.length; i++) {  
  186.             var optionParams = arrays[i].split(splitFleg);  
  187.             var opt = new Option();  
  188.             opt.text = optionParams[0];  
  189.             opt.value = optionParams[1];  
  190.   
  191.             selectObj.add(opt);  
  192.         }  
  193.   
  194.         if (arrays.length > selectSize) {  
  195.             selectObj.size = selectSize;  
  196.         } else {  
  197.             selectObj.size = arrays.length;  
  198.         }  
  199.     }  
  200.     /** 
  201.      * 清空原来的OPTIONS 
  202.      */  
  203.     this.clearAllOptions = function() {  
  204.         //清空原来的OPTIONS  
  205.         var nL = selectObj.options.length;  
  206.         while (nL > 0) {  
  207.             selectObj.remove(selectObj.options.length - 1);  
  208.             nL = selectObj.options.length;  
  209.         }  
  210.     }  
  211.     //--------------------------数据检索规则---------------------  
  212.     /** 
  213.      * 数据检索规则 
  214.      * @param {String} inputStr input框中需要进行匹配的条件 
  215.      */  
  216.     this.compareInput = function(inputStr) {  
  217.         if (this.cacheContainer.length == 0) {  
  218.             return;  
  219.         }  
  220.   
  221.         inputStr = inputStr.replace(/(^[\s]*)/g, ""); //去前边空白字符串  
  222.         inputStr = this.deleteSpecialSpace(inputStr); //去除特殊空白字符串  
  223.         if (inputStr == null || inputStr.length == 0) {  
  224.             return this.cacheContainer;  
  225.         }  
  226.         inputStr = disableSpecialCharacter(inputStr); //特殊字符处理  
  227.   
  228.         var resultArray = new Array();  
  229.   
  230.         var k = 0;  
  231.         var selectText = "";  
  232.         for (var i = 0; i < this.cacheContainer.length; i++) {  
  233.             selectText = (this.cacheContainer[i].split(splitFleg)[0]).replace(/(^[\s]*)/g, "");  
  234.             selectText = this.deleteSpecialSpace(selectText);  
  235.             if (compareRules(inputStr, selectText)) { //匹配规则  
  236.                 resultArray[k] = this.cacheContainer[i];  
  237.                 k++;  
  238.             }  
  239.         }  
  240.         return uniqueArray(resultArray);  
  241.   
  242.     }  
  243.     /** 
  244.      * 去除特殊空白字符串 
  245.      */  
  246.     this.deleteSpecialSpace = function(srcStr) {  
  247.         var temp = "";  
  248.         for (var i = 0; i < srcStr.length; i++) {  
  249.             var charStr = srcStr.charAt(i);  
  250.             // 界面特殊空格Unicode=160，此空格既不是全角，也非半角  
  251.             if (charStr.charCodeAt(0) == 160) {  
  252.                 continue;  
  253.             }  
  254.             temp += charStr;  
  255.         }  
  256.         return temp;  
  257.     }  
  258. }  
  259. /** 
  260.  * @param {String} inputStr 需要进行过滤的字符 
  261.  * 特殊字符处理 
  262.  */  
  263. function disableSpecialCharacter(inputStr) {  
  264.     inputStr = inputStr.replace(new RegExp("\\\\", 'g'), "\\\\");  
  265.     inputStr = inputStr.replace(new RegExp("\\.", 'g'), "\\.");  
  266.     inputStr = inputStr.replace(new RegExp("\\^", 'g'), "\\^");  
  267.     inputStr = inputStr.replace(new RegExp("\\{", 'g'), "\\{");  
  268.     inputStr = inputStr.replace(new RegExp("\\[", 'g'), "\\[");  
  269.     inputStr = inputStr.replace(new RegExp("\\(", 'g'), "\\(");  
  270.     inputStr = inputStr.replace(new RegExp("\\|", 'g'), "\\|");  
  271.     inputStr = inputStr.replace(new RegExp("\\]", 'g'), "\\]");  
  272.     inputStr = inputStr.replace(new RegExp("\\)", 'g'), "\\)");  
  273.     inputStr = inputStr.replace(new RegExp("\\*", 'g'), "\\*");  
  274.     inputStr = inputStr.replace(new RegExp("\\+", 'g'), "\\+");  
  275.     inputStr = inputStr.replace(new RegExp("\\?", 'g'), "\\?");  
  276.     return inputStr;  
  277. }  
  278. /** 
  279.  * 匹配规则 
  280.  * @param {String} inputStr   input框字符，匹配条件 
  281.  * @param {String} selectText  被匹配文字 
  282.  */  
  283. function compareRules(inputStr, selectText) {  
  284.     //匹配汉字   
  285.     return selectText.indexOf(inputStr) != -1 ;  
  286. }  
  287. /** 
  288.  * 过滤重复数据 
  289.  * @param {Object} arr 结果数组 
  290.  */  
  291. function uniqueArray(arr) {  
  292.     if(arr == null || arr.length == 0){  
  293.         return arr;  
  294.     }  
  295.     return arr.reverse().join(",").match( /([^,]+)(?!.*\1)/ig).reverse();  
  296. }  
  297. /** 
  298.  * 在原来onload的基础上加上自定义要执行的函数 
  299.  * @param {Object} func 加载函数 
  300.  */  
  301. function addLoadEvent(func) {  
  302.     var oldonload = window.onload;  
  303.     if (typeof window.onload != 'function') {  
  304.         window.onload = func;  
  305.     } else {  
  306.         window.onload = function() {  
  307.             oldonload();  
  308.             func();  
  309.         }  
  310.     }  
  311. }  

引入将汉字转换成拼音的工具js

pinYinHanZi.js

[javascript]  view plain  copy
 
  1. /** 
  2.  * 汉子转换成拼音工具js 
  3.  */  
  4. var key2code = {  
  5.     65: "a",  
  6.     66: "b",  
  7.     67: "c",  
  8.     68: "d",  
  9.     69: "e",  
  10.     70: "f",  
  11.     71: "g",  
  12.     72: "h",  
  13.     73: "i",  
  14.     74: "j",  
  15.     75: "k",  
  16.     76: "l",  
  17.     77: "m",  
  18.     78: "n",  
  19.     79: "o",  
  20.     80: "p",  
  21.     81: "q",  
  22.     82: "r",  
  23.     83: "s",  
  24.     84: "t",  
  25.     85: "u",  
  26.     86: "v",  
  27.     87: "w",  
  28.     88: "x",  
  29.     89: "y",  
  30.     90: "z",  
  31.     49: "1",  
  32.     50: "2",  
  33.     51: "3",  
  34.     52: "4",  
  35.     53: "5",  
  36.     54: "6",  
  37.     55: "7",  
  38.     56: "8",  
  39.     57: "9",  
  40.     48: "0"  
  41. };  
  42.   
  43. var spell = {  
  44.     0xB0A1: "a",  
  45.     0xB0A3: "ai",  
  46.     0xB0B0: "an",  
  47.     0xB0B9: "ang",  
  48.     0xB0BC: "ao",  
  49.     0xB0C5: "ba",  
  50.     0xB0D7: "bai",  
  51.     0xB0DF: "ban",  
  52.     0xB0EE: "bang",  
  53.     0xB0FA: "bao",  
  54.     0xB1AD: "bei",  
  55.     0xB1BC: "ben",  
  56.     0xB1C0: "beng",  
  57.     0xB1C6: "bi",  
  58.     0xB1DE: "bian",  
  59.     0xB1EA: "biao",  
  60.     0xB1EE: "bie",  
  61.     0xB1F2: "bin",  
  62.     0xB1F8: "bing",  
  63.     0xB2A3: "bo",  
  64.     0xB2B8: "bu",  
  65.     0xB2C1: "ca",  
  66.     0xB2C2: "cai",  
  67.     0xB2CD: "can",  
  68.     0xB2D4: "cang",  
  69.     0xB2D9: "cao",  
  70.     0xB2DE: "ce",  
  71.     0xB2E3: "ceng",  
  72.     0xB2E5: "cha",  
  73.     0xB2F0: "chai",  
  74.     0xB2F3: "chan",  
  75.     0xB2FD: "chang",  
  76.     0xB3AC: "chao",  
  77.     0xB3B5: "che",  
  78.     0xB3BB: "chen",  
  79.     0xB3C5: "cheng",  
  80.     0xB3D4: "chi",  
  81.     0xB3E4: "chong",  
  82.     0xB3E9: "chou",  
  83.     0xB3F5: "chu",  
  84.     0xB4A7: "chuai",  
  85.     0xB4A8: "chuan",  
  86.     0xB4AF: "chuang",  
  87.     0xB4B5: "chui",  
  88.     0xB4BA: "chun",  
  89.     0xB4C1: "chuo",  
  90.     0xB4C3: "ci",  
  91.     0xB4CF: "cong",  
  92.     0xB4D5: "cou",  
  93.     0xB4D6: "cu",  
  94.     0xB4DA: "cuan",  
  95.     0xB4DD: "cui",  
  96.     0xB4E5: "cun",  
  97.     0xB4E8: "cuo",  
  98.     0xB4EE: "da",  
  99.     0xB4F4: "dai",  
  100.     0xB5A2: "dan",  
  101.     0xB5B1: "dang",  
  102.     0xB5B6: "dao",  
  103.     0xB5C2: "de",  
  104.     0xB5C5: "deng",  
  105.     0xB5CC: "di",  
  106.     0xB5DF: "dian",  
  107.     0xB5EF: "diao",  
  108.     0xB5F8: "die",  
  109.     0xB6A1: "ding",  
  110.     0xB6AA: "diu",  
  111.     0xB6AB: "dong",  
  112.     0xB6B5: "dou",  
  113.     0xB6BC: "du",  
  114.     0xB6CB: "duan",  
  115.     0xB6D1: "dui",  
  116.     0xB6D5: "dun",  
  117.     0xB6DE: "duo",  
  118.     0xB6EA: "e",  
  119.     0xB6F7: "en",  
  120.     0xB6F8: "er",  
  121.     0xB7A2: "fa",  
  122.     0xB7AA: "fan",  
  123.     0xB7BB: "fang",  
  124.     0xB7C6: "fei",  
  125.     0xB7D2: "fen",  
  126.     0xB7E1: "feng",  
  127.     0xB7F0: "fo",  
  128.     0xB7F1: "fou",  
  129.     0xB7F2: "fu",  
  130.     0xB8C1: "ga",  
  131.     0xB8C3: "gai",  
  132.     0xB8C9: "gan",  
  133.     0xB8D4: "gang",  
  134.     0xB8DD: "gao",  
  135.     0xB8E7: "ge",  
  136.     0xB8F8: "gei",  
  137.     0xB8F9: "gen",  
  138.     0xB8FB: "geng",  
  139.     0xB9A4: "gong",  
  140.     0xB9B3: "gou",  
  141.     0xB9BC: "gu",  
  142.     0xB9CE: "gua",  
  143.     0xB9D4: "guai",  
  144.     0xB9D7: "guan",  
  145.     0xB9E2: "guang",  
  146.     0xB9E5: "gui",  
  147.     0xB9F5: "gun",  
  148.     0xB9F8: "guo",  
  149.     0xB9FE: "ha",  
  150.     0xBAA1: "hai",  
  151.     0xBAA8: "han",  
  152.     0xBABB: "hang",  
  153.     0xBABE: "hao",  
  154.     0xBAC7: "he",  
  155.     0xBAD9: "hei",  
  156.     0xBADB: "hen",  
  157.     0xBADF: "heng",  
  158.     0xBAE4: "hong",  
  159.     0xBAED: "hou",  
  160.     0xBAF4: "hu",  
  161.     0xBBA8: "hua",  
  162.     0xBBB1: "huai",  
  163.     0xBBB6: "huan",  
  164.     0xBBC4: "huang",  
  165.     0xBBD2: "hui",  
  166.     0xBBE7: "hun",  
  167.     0xBBED: "huo",  
  168.     0xBBF7: "ji",  
  169.     0xBCCE: "jia",  
  170.     0xBCDF: "jian",  
  171.     0xBDA9: "jiang",  
  172.     0xBDB6: "jiao",  
  173.     0xBDD2: "jie",  
  174.     0xBDED: "jin",  
  175.     0xBEA3: "jing",  
  176.     0xBEBC: "jiong",  
  177.     0xBEBE: "jiu",  
  178.     0xBECF: "ju",  
  179.     0xBEE8: "juan",  
  180.     0xBEEF: "jue",  
  181.     0xBEF9: "jun",  
  182.     0xBFA6: "ka",  
  183.     0xBFAA: "kai",  
  184.     0xBFAF: "kan",  
  185.     0xBFB5: "kang",  
  186.     0xBFBC: "kao",  
  187.     0xBFC0: "ke",  
  188.     0xBFCF: "ken",  
  189.     0xBFD3: "keng",  
  190.     0xBFD5: "kong",  
  191.     0xBFD9: "kou",  
  192.     0xBFDD: "ku",  
  193.     0xBFE4: "kua",  
  194.     0xBFE9: "kuai",  
  195.     0xBFED: "kuan",  
  196.     0xBFEF: "kuang",  
  197.     0xBFF7: "kui",  
  198.     0xC0A4: "kun",  
  199.     0xC0A8: "kuo",  
  200.     0xC0AC: "la",  
  201.     0xC0B3: "lai",  
  202.     0xC0B6: "lan",  
  203.     0xC0C5: "lang",  
  204.     0xC0CC: "lao",  
  205.     0xC0D5: "le",  
  206.     0xC0D7: "lei",  
  207.     0xC0E2: "leng",  
  208.     0xC0E5: "li",  
  209.     0xC1A9: "lia",  
  210.     0xC1AA: "lian",  
  211.     0xC1B8: "liang",  
  212.     0xC1C3: "liao",  
  213.     0xC1D0: "lie",  
  214.     0xC1D5: "lin",  
  215.     0xC1E1: "ling",  
  216.     0xC1EF: "liu",  
  217.     0xC1FA: "long",  
  218.     0xC2A5: "lou",  
  219.     0xC2AB: "lu",  
  220.     0xC2BF: "lv",  
  221.     0xC2CD: "luan",  
  222.     0xC2D3: "lue",  
  223.     0xC2D5: "lun",  
  224.     0xC2DC: "luo",  
  225.     0xC2E8: "ma",  
  226.     0xC2F1: "mai",  
  227.     0xC2F7: "man",  
  228.     0xC3A2: "mang",  
  229.     0xC3A8: "mao",  
  230.     0xC3B4: "me",  
  231.     0xC3B5: "mei",  
  232.     0xC3C5: "men",  
  233.     0xC3C8: "meng",  
  234.     0xC3D0: "mi",  
  235.     0xC3DE: "mian",  
  236.     0xC3E7: "miao",  
  237.     0xC3EF: "mie",  
  238.     0xC3F1: "min",  
  239.     0xC3F7: "ming",  
  240.     0xC3FD: "miu",  
  241.     0xC3FE: "mo",  
  242.     0xC4B1: "mou",  
  243.     0xC4B4: "mu",  
  244.     0xC4C3: "na",  
  245.     0xC4CA: "nai",  
  246.     0xC4CF: "nan",  
  247.     0xC4D2: "nang",  
  248.     0xC4D3: "nao",  
  249.     0xC4D8: "ne",  
  250.     0xC4D9: "nei",  
  251.     0xC4DB: "nen",  
  252.     0xC4DC: "neng",  
  253.     0xC4DD: "ni",  
  254.     0xC4E8: "nian",  
  255.     0xC4EF: "niang",  
  256.     0xC4F1: "niao",  
  257.     0xC4F3: "nie",  
  258.     0xC4FA: "nin",  
  259.     0xC4FB: "ning",  
  260.     0xC5A3: "niu",  
  261.     0xC5A7: "nong",  
  262.     0xC5AB: "nu",  
  263.     0xC5AE: "nv",  
  264.     0xC5AF: "nuan",  
  265.     0xC5B0: "nue",  
  266.     0xC5B2: "nuo",  
  267.     0xC5B6: "o",  
  268.     0xC5B7: "ou",  
  269.     0xC5BE: "pa",  
  270.     0xC5C4: "pai",  
  271.     0xC5CA: "pan",  
  272.     0xC5D2: "pang",  
  273.     0xC5D7: "pao",  
  274.     0xC5DE: "pei",  
  275.     0xC5E7: "pen",  
  276.     0xC5E9: "peng",  
  277.     0xC5F7: "pi",  
  278.     0xC6AA: "pian",  
  279.     0xC6AE: "piao",  
  280.     0xC6B2: "pie",  
  281.     0xC6B4: "pin",  
  282.     0xC6B9: "ping",  
  283.     0xC6C2: "po",  
  284.     0xC6CB: "pu",  
  285.     0xC6DA: "qi",  
  286.     0xC6FE: "qia",  
  287.     0xC7A3: "qian",  
  288.     0xC7B9: "qiang",  
  289.     0xC7C1: "qiao",  
  290.     0xC7D0: "qie",  
  291.     0xC7D5: "qin",  
  292.     0xC7E0: "qing",  
  293.     0xC7ED: "qiong",  
  294.     0xC7EF: "qiu",  
  295.     0xC7F7: "qu",  
  296.     0xC8A6: "quan",  
  297.     0xC8B1: "que",  
  298.     0xC8B9: "qun",  
  299.     0xC8BB: "ran",  
  300.     0xC8BF: "rang",  
  301.     0xC8C4: "rao",  
  302.     0xC8C7: "re",  
  303.     0xC8C9: "ren",  
  304.     0xC8D3: "reng",  
  305.     0xC8D5: "ri",  
  306.     0xC8D6: "rong",  
  307.     0xC8E0: "rou",  
  308.     0xC8E3: "ru",  
  309.     0xC8ED: "ruan",  
  310.     0xC8EF: "rui",  
  311.     0xC8F2: "run",  
  312.     0xC8F4: "ruo",  
  313.     0xC8F6: "sa",  
  314.     0xC8F9: "sai",  
  315.     0xC8FD: "san",  
  316.     0xC9A3: "sang",  
  317.     0xC9A6: "sao",  
  318.     0xC9AA: "se",  
  319.     0xC9AD: "sen",  
  320.     0xC9AE: "seng",  
  321.     0xC9AF: "sha",  
  322.     0xC9B8: "shai",  
  323.     0xC9BA: "shan",  
  324.     0xC9CA: "shang",  
  325.     0xC9D2: "shao",  
  326.     0xC9DD: "she",  
  327.     0xC9E9: "shen",  
  328.     0xC9F9: "sheng",  
  329.     0xCAA6: "shi",  
  330.     0xCAD5: "shou",  
  331.     0xCADF: "shu",  
  332.     0xCBA2: "shua",  
  333.     0xCBA4: "shuai",  
  334.     0xCBA8: "shuan",  
  335.     0xCBAA: "shuang",  
  336.     0xCBAD: "shui",  
  337.     0xCBB1: "shun",  
  338.     0xCBB5: "shuo",  
  339.     0xCBB9: "si",  
  340.     0xCBC9: "song",  
  341.     0xCBD1: "sou",  
  342.     0xCBD4: "su",  
  343.     0xCBE1: "suan",  
  344.     0xCBE4: "sui",  
  345.     0xCBEF: "sun",  
  346.     0xCBF2: "suo",  
  347.     0xCBFA: "ta",  
  348.     0xCCA5: "tai",  
  349.     0xCCAE: "tan",  
  350.     0xCCC0: "tang",  
  351.     0xCCCD: "tao",  
  352.     0xCCD8: "te",  
  353.     0xCCD9: "teng",  
  354.     0xCCDD: "ti",  
  355.     0xCCEC: "tian",  
  356.     0xCCF4: "tiao",  
  357.     0xCCF9: "tie",  
  358.     0xCCFC: "ting",  
  359.     0xCDA8: "tong",  
  360.     0xCDB5: "tou",  
  361.     0xCDB9: "tu",  
  362.     0xCDC4: "tuan",  
  363.     0xCDC6: "tui",  
  364.     0xCDCC: "tun",  
  365.     0xCDCF: "tuo",  
  366.     0xCDDA: "wa",  
  367.     0xCDE1: "wai",  
  368.     0xCDE3: "wan",  
  369.     0xCDF4: "wang",  
  370.     0xCDFE: "wei",  
  371.     0xCEC1: "wen",  
  372.     0xCECB: "weng",  
  373.     0xCECE: "wo",  
  374.     0xCED7: "wu",  
  375.     0xCEF4: "xi",  
  376.     0xCFB9: "xia",  
  377.     0xCFC6: "xian",  
  378.     0xCFE0: "xiang",  
  379.     0xCFF4: "xiao",  
  380.     0xD0A8: "xie",  
  381.     0xD0BD: "xin",  
  382.     0xD0C7: "xing",  
  383.     0xD0D6: "xiong",  
  384.     0xD0DD: "xiu",  
  385.     0xD0E6: "xu",  
  386.     0xD0F9: "xuan",  
  387.     0xD1A5: "xue",  
  388.     0xD1AB: "xun",  
  389.     0xD1B9: "ya",  
  390.     0xD1C9: "yan",  
  391.     0xD1EA: "yang",  
  392.     0xD1FB: "yao",  
  393.     0xD2AC: "ye",  
  394.     0xD2BB: "yi",  
  395.     0xD2F0: "yin",  
  396.     0xD3A2: "ying",  
  397.     0xD3B4: "yo",  
  398.     0xD3B5: "yong",  
  399.     0xD3C4: "you",  
  400.     0xD3D9: "yu",  
  401.     0xD4A7: "yuan",  
  402.     0xD4BB: "yue",  
  403.     0xD4C5: "yun",  
  404.     0xD4D1: "za",  
  405.     0xD4D4: "zai",  
  406.     0xD4DB: "zan",  
  407.     0xD4DF: "zang",  
  408.     0xD4E2: "zao",  
  409.     0xD4F0: "ze",  
  410.     0xD4F4: "zei",  
  411.     0xD4F5: "zen",  
  412.     0xD4F6: "zeng",  
  413.     0xD4FA: "zha",  
  414.     0xD5AA: "zhai",  
  415.     0xD5B0: "zhan",  
  416.     0xD5C1: "zhang",  
  417.     0xD5D0: "zhao",  
  418.     0xD5DA: "zhe",  
  419.     0xD5E4: "zhen",  
  420.     0xD5F4: "zheng",  
  421.     0xD6A5: "zhi",  
  422.     0xD6D0: "zhong",  
  423.     0xD6DB: "zhou",  
  424.     0xD6E9: "zhu",  
  425.     0xD7A5: "zhua",  
  426.     0xD7A7: "zhuai",  
  427.     0xD7A8: "zhuan",  
  428.     0xD7AE: "zhuang",  
  429.     0xD7B5: "zhui",  
  430.     0xD7BB: "zhun",  
  431.     0xD7BD: "zhuo",  
  432.     0xD7C8: "zi",  
  433.     0xD7D7: "zong",  
  434.     0xD7DE: "zou",  
  435.     0xD7E2: "zu",  
  436.     0xD7EA: "zuan",  
  437.     0xD7EC: "zui",  
  438.     0xD7F0: "zun",  
  439.     0xD7F2: "zuo"  
  440. };  
  441. var spellArray = new Array();  
  442. var pn = "";  
  443.   
  444. function pinyin(char) {  
  445.     if (!char.charCodeAt(0) || char.charCodeAt(0) < 1328)  
  446.         return char;  
  447.     if (spellArray[char.charCodeAt(0)])  
  448.         return spellArray[char.charCodeAt(0)]  
  449.     execScript("ascCode=hex(asc(\"" + char + "\"))", "vbscript");  
  450.     ascCode = eval("0x" + ascCode);  
  451.     if (!(ascCode > 0xB0A0 && ascCode < 0xD7F3))  
  452.         return char;  
  453.     for (var i = ascCode;(!spell[i] && i > 0);)  
  454.         i--;  
  455.     return spell[i];  
  456. }  
  457.   
  458. function toPinyin(str) {  
  459.     var pStr = ""  
  460.     for (var i = 0; i < str.length; i++) {  
  461.         if (str.charAt(i) == "\n")  
  462.             pStr += "<br>"  
  463.         else  
  464.             pStr += "<ruby style='ruby-align:center'> " + str.charAt(i) + " <rt>" + pinyin(str.charAt(i)) + "</rt></ruby>"  
  465.             // else pStr += pinyin(str.charAt(i)) + " "  
  466.     }  
  467.     return pStr;  
  468. }  
  469.   
  470. function toPinyinOnly(str) {  
  471.     var pStr = ""  
  472.     for (var i = 0; i < str.length; i++) {  
  473.         if (str.charAt(i) == "\n")  
  474.             pStr += "<br>"  
  475.         else  
  476.             pStr += pinyin(str.charAt(i));  
  477.         //pStr += " " + pinyin(str.charAt(i));  
  478.         // else pStr += pinyin(str.charAt(i)) + " "  
  479.     }  
  480.     return pStr;  
  481. }  
  482.   
  483. function toPinyinShengmu(str) {  
  484.     var pStr = ""  
  485.     for (var i = 0; i < str.length; i++) {  
  486.         if (str.charAt(i) == "\n")  
  487.             pStr += "";  
  488.         else  
  489.             pStr += pinyin(str.charAt(i)).charAt(0);  
  490.         // else pStr += pinyin(str.charAt(i)) + " "  
  491.     }  
  492.     return pStr;  
  493. }  
  494.   
  495. function pinyinSort(a, b) {  
  496.     var rValue = 0  
  497.     for (var i = 0; i < a.length; i++) {  
  498.         var pinA = pinyin(a.charAt(i))  
  499.         var pinB = pinyin(b.charAt(i))  
  500.         if (rValue = pinA > pinB ? 1 : pinA < pinB ? -1 : 0)  
  501.             break  
  502.     }  
  503.     return rValue  
  504. }  

index.html

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="UTF-8">  
  6.         <title></title>  
  7.         <script type="text/javascript" src="js/autoComplete.js"></script>  
  8.         <script type="text/javascript" src="js/pinYinHanZi.js"></script>  
  9.         <script type="text/javascript">  
  10.             //自定义规则  
  11.             function compareRules(inputStr, selectText) {  
  12.                 //匹配汉字  和拼音  
  13.                 return selectText.indexOf(inputStr) != -1 || toPinyinShengmu(selectText).indexOf(inputStr) != -1 ||   
  14.                         toPinyinOnly(selectText).indexOf(inputStr) != -1;  
  15.             }  
  16.               
  17.             addLoadEvent(func);  
  18.   
  19.             function func() {  
  20.                 var textObj = document.getElementById("txtDisplay");  
  21.                 var cityObj = document.getElementById("city");  
  22.                 var autocomplete = new AutoComplete(textObj, cityObj, 10, 300);  
  23.                 autocomplete.init();  
  24.             }  
  25.         </script>  
  26.     </head>  
  27.   
  28.     <body>  
  29.         <input type="text" id="txtDisplay" />  
  30.         <select id="city">  
  31.             <option value="1">北京</option>  
  32.             <option value="2">    上海</option>  
  33.             <option value="3">广州</option>  
  34.             <option value="5">重庆</option>  
  35.             <option value="6">天津</option>  
  36.             <option value="7">沈阳</option>  
  37.             <option value="8">南京</option>  
  38.             <option value="9">武汉</option>  
  39.             <option value="10">长春</option>  
  40.             <option value="11">成都</option>  
  41.             <option value="12">大连</option>  
  42.             <option value="13">杭州</option>  
  43.             <option value="14">青岛</option>  
  44.             <option value="15">济南</option>  
  45.             <option value="16">厦门</option>  
  46.             <option value="17">福州</option>  
  47.             <option value="18">西安</option>  
  48.             <option value="19">长沙</option>  
  49.             <option value="20">哈尔滨</option>  
  50.         </select>  
  51.   
  52.     </body>  
  53.   
  54. </html>  

注意：该版本有一些bug和对其他（除ie）浏览器不兼容性。

文件下载路径：文件下载

你可能感兴趣的:(在ie8上js实现简单的combobox功能(支持拼音检索))

  • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
  • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
  • 2020-01-25 晴岚85
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
  • 随笔 | 仙一般的灵气 海思沧海
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
  • 想家 爆米花机
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • C语言宏函数 南林yan C语言c语言
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
  • 地推话术，如何应对地推过程中家长的拒绝 校师学
    相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • 小丽成长记（四十三） 玲玲54321
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断 尐尐呅
    结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • 瑶池防线 谜影梦蝶
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
  • 爬山后遗症 璃绛
    爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
  • java封装继承多态等 麦田的设计者 javaeclipsejvmcencapsulatopn
           最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。     1、final关键字       译为：最终的        &
  • F5与集群的区别 bijian1013 weblogic集群F5
            http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。         F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似
  • LeetCode[Math] - #7 Reverse Integer Cwind java题解MathLeetCodeAlgorithm
    原题链接：#7 Reverse Integer   要求： 按位反转输入的数字 例1： 输入 x = 123, 返回 321 例2： 输入 x = -123, 返回 -321   难度：简单   分析： 对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但
  • BufferedOutputStream 周凡杨
         首先说一下这个大批量，是指有上千万的数据量。      例子：      有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！      select t.msisd
  • linux下模拟按键输入和鼠标 被触发 linux
    查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices 设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键 模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。 linux/in
  • ContentProvider初体验 肆无忌惮_ ContentProvider
    ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。 在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。 如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte
  • 关于Spring MVC项目（maven）中通过fileupload上传文件 843977358 mybatisspring mvc修改头像上传文件upload
    Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。   1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar 因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定） <!-- 文件上传 start by zhangyd-c --&g
  • 使用svnkit api，纯java操作svn，实现svn提交，更新等操作 aigo svnkit
     原文：http://blog.csdn.net/hardwin/article/details/7963318   import java.io.File; import org.apache.log4j.Logger; import org.tmatesoft.svn.core.SVNCommitInfo; import org.tmateso
  • 对比浏览器，casperjs，httpclient的Header信息 alleni123 爬虫crawlerheader
    @Override protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { String type=req.getParameter("type"); Enumeration es=re
  • java.io操作 DataInputStream和DataOutputStream基本数据流 百合不是茶 java流
    1，java中如果不保存整个对象，只保存类中的属性，那么我们可以使用本篇文章中的方法，如果要保存整个对象  先将类实例化  后面的文章将详细写到     2，DataInputStream 是java.io包中一个数据输入流允许应用程序以与机器无关方式从底层输入流中读取基本 Java 数据类型。应用程序可以使用数据输出流写入稍后由数据输入流读取的数据。
  • 车辆保险理赔案例 bijian1013 车险
    理赔案例： 一货运车，运输公司为车辆购买了机动车商业险和交强险，也买了安全生产责任险，运输一车烟花爆竹，在行驶途中发生爆炸，出现车毁、货损、司机亡、炸死一路人、炸毁一间民宅等惨剧，针对这几种情况，该如何赔付。 赔付建议和方案： 客户所买交强险在这里不起作用，因为交强险的赔付前提是：“机动车发生道路交通意外事故”； 如果是交通意外事故引发的爆炸，则优先适用交强险条款进行赔付，不足的部分由商业
  • 学习Spring必学的Java基础知识(5)—注解 bijian1013 javaspring
            文章来源：http://www.iteye.com/topic/1123823，整理在我的博客有两个目的：一个是原文确实很不错，通俗易懂，督促自已将博主的这一系列关于Spring文章都学完；另一个原因是为免原文被博主删除，在此记录，方便以后查找阅读。           有必要对
  • 【Struts2一】Struts2 Hello World bit1129 Hello world
    Struts2 Hello World应用的基本步骤 创建Struts2的Hello World应用，包括如下几步： 1.配置web.xml 2.创建Action 3.创建struts.xml，配置Action 4.启动web server，通过浏览器访问   配置web.xml <?xml version="1.0" encoding="
  • 【Avro二】Avro RPC框架 bit1129 rpc
    1. Avro RPC简介 1.1. RPC RPC逻辑上分为二层，一是传输层，负责网络通信；二是协议层，将数据按照一定协议格式打包和解包 从序列化方式来看，Apache Thrift 和Google的Protocol Buffers和Avro应该是属于同一个级别的框架，都能跨语言，性能优秀，数据精简，但是Avro的动态模式（不用生成代码，而且性能很好）这个特点让人非常喜欢，比较适合R
  • lua　set get cookie ronin47 lua cookie
    lua: local access_token = ngx.var.cookie_SGAccessToken if access_token then ngx.header["Set-Cookie"] = "SGAccessToken="..access_token.."; path=/;Max-Age=3000" end
  • java-打印不大于N的质数 bylijinnan java
    public class PrimeNumber { /** * 寻找不大于N的质数 */ public static void main(String[] args) { int n=100; PrimeNumber pn=new PrimeNumber(); pn.printPrimeNumber(n); System.out.print
  • Spring源码学习-PropertyPlaceholderHelper bylijinnan javaspring
    今天在看Spring 3.0.0.RELEASE的源码，发现PropertyPlaceholderHelper的一个bug 当时觉得奇怪，上网一搜，果然是个bug，不过早就有人发现了，且已经修复： 详见： http://forum.spring.io/forum/spring-projects/container/88107-propertyplaceholderhelper-bug
  • [逻辑与拓扑]布尔逻辑与拓扑结构的结合会产生什么? comsci 拓扑
       如果我们已经在一个工作流的节点中嵌入了可以进行逻辑推理的代码,那么成百上千个这样的节点如果组成一个拓扑网络,而这个网络是可以自动遍历的,非线性的拓扑计算模型和节点内部的布尔逻辑处理的结合,会产生什么样的结果呢?    是否可以形成一种新的模糊语言识别和处理模型呢?  大家有兴趣可以试试,用软件搞这些有个好处,就是花钱比较少,就算不成
  • ITEYE 都换百度推广了 cuisuqiang GoogleAdSense百度推广广告外快
    以前ITEYE的广告都是谷歌的Google AdSense，现在都换成百度推广了。   为什么个人博客设置里面还是Google AdSense呢？   都知道Google AdSense不好申请，这在ITEYE上也不是讨论了一两天了，强烈建议ITEYE换掉Google AdSense。至少，用一个好申请的吧。   什么时候能从ITEYE上来点外快，哪怕少点
  • 新浪微博技术架构分析 dalan_123 新浪微博架构
    新浪微博在短短一年时间内从零发展到五千万用户，我们的基层架构也发展了几个版本。第一版就是是非常快的，我们可以非常快的实现我们的模块。我们看一下技术特点，微博这个产品从架构上来分析，它需要解决的是发表和订阅的问题。我们第一版采用的是推的消息模式，假如说我们一个明星用户他有10万个粉丝，那就是说用户发表一条微博的时候，我们把这个微博消息攒成10万份，这样就是很简单了，第一版的架构实际上就是这两行字。第
  • 玩转ARP攻击 dcj3sjt126com r
    我写这片文章只是想让你明白深刻理解某一协议的好处。高手免看。如果有人利用这片文章所做的一切事情，盖不负责。 网上关于ARP的资料已经很多了，就不用我都说了。 用某一位高手的话来说，“我们能做的事情很多，唯一受限制的是我们的创造力和想象力”。 ARP也是如此。 以下讨论的机子有 一个要攻击的机子：10.5.4.178 硬件地址：52:54:4C:98
  • PHP编码规范 dcj3sjt126com 编码规范
    一、文件格式 1. 对于只含有 php 代码的文件，我们将在文件结尾处忽略掉 "?>" 。这是为了防止多余的空格或者其它字符影响到代码。例如：<?php$foo = 'foo';2. 缩进应该能够反映出代码的逻辑结果，尽量使用四个空格，禁止使用制表符TAB，因为这样能够保证有跨客户端编程器软件的灵活性。例
  • linux 脱机管理（nohup） eksliang linux nohupnohup
    脱机管理 nohup 转载请出自出处：http://eksliang.iteye.com/blog/2166699 nohup可以让你在脱机或者注销系统后，还能够让工作继续进行。他的语法如下 nohup [命令与参数] --在终端机前台工作 nohup [命令与参数] & --在终端机后台工作   但是这个命令需要注意的是，nohup并不支持bash的内置命令，所
  • BusinessObjects Enterprise Java SDK greemranqq javaBOSAPCrystal Reports
    最近项目用到oracle_ADF  从SAP/BO 上调用 水晶报表，资料比较少，我做一个简单的分享，给和我一样的新手 提供更多的便利。   首先，我是尝试用JAVA JSP 去访问的。   官方API：http://devlibrary.businessobjects.com/BusinessObjectsxi/en/en/BOE_SDK/boesdk_ja
  • 系统负载剧变下的管控策略 iamzhongyong 高并发
    假如目前的系统有100台机器，能够支撑每天1亿的点击量（这个就简单比喻一下），然后系统流量剧变了要，我如何应对，系统有那些策略可以处理，这里总结了一下之前的一些做法。 1、水平扩展 这个最容易理解，加机器，这样的话对于系统刚刚开始的伸缩性设计要求比较高，能够非常灵活的添加机器，来应对流量的变化。 2、系统分组 假如系统服务的业务不同，有优先级高的，有优先级低的，那就让不同的业务调用提前分组
  • BitTorrent DHT 协议中文翻译 justjavac bit
    前言 做了一个磁力链接和BT种子的搜索引擎 {Magnet & Torrent}，因此把 DHT 协议重新看了一遍。 BEP: 5Title: DHT ProtocolVersion: 3dec52cb3ae103ce22358e3894b31cad47a6f22bLast-Modified: Tue Apr 2 16:51:45 2013 -070
  • Ubuntu下Java环境的搭建 macroli java工作ubuntu
    配置命令： 　　$sudo apt-get install ubuntu-restricted-extras 　　再运行如下命令： 　　$sudo apt-get install sun-java6-jdk 　　待安装完毕后选择默认Java. 　　$sudo update- alternatives --config java 　　安装过程提示选择，输入“2”即可，然后按回车键确定。
  • js字符串转日期（兼容IE所有版本） qiaolevip TODateStringIE
    /** * 字符串转时间（yyyy-MM-dd HH:mm:ss） * result （分钟） */ stringToDate : function(fDate){ var fullDate = fDate.split(" ")[0].split("-"); var fullTime = fDate.split("
  • 【数据挖掘学习】关联规则算法Apriori的学习与SQL简单实现购物篮分析 superlxw1234 sql数据挖掘关联规则
    关联规则挖掘用于寻找给定数据集中项之间的有趣的关联或相关关系。 关联规则揭示了数据项间的未知的依赖关系，根据所挖掘的关联关系，可以从一个数据对象的信息来推断另一个数据对象的信息。 例如购物篮分析。牛奶 ⇒ 面包 [支持度：3%，置信度：40%] 支持度3%：意味3%顾客同时购买牛奶和面包。 置信度40%：意味购买牛奶的顾客40%也购买面包。 规则的支持度和置信度是两个规则兴
  • Spring 5.0 的系统需求，期待你的反馈 wiselyman spring
                   Spring 5.0将在2016年发布。Spring5.0将支持JDK 9。          Spring 5.0的特性计划还在工作中，请保持关注，所以作者希望从使用者得到关于Spring 5.0系统需求方面的反馈。  
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他