`
jaychaoqun
  • 浏览: 30234 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类

jquery select快速选择插件

    博客分类:
  • js
阅读更多
$.fn.selectHelper = function(){
				$(this).bind("keydown",function(){
					getNextKeyItem();
				});
			
				getNextKeyItem = function(){
					var elm = event.srcElement;
                    var index = elm.selectedIndex + 1;
                    do {
                        if (index == elm.length) 
                            index = 0;
                        if (index == elm.selectedIndex) 
                            return false; // 未找到匹配的选项,则退出 
                    }
                    while (key2Char(event.keyCode) != getPinYin(getItemKeyChar(elm.options[index++])));
                    elm.selectedIndex = index - 1; // 选中匹配的选项 
                    return false; // 取消原有的选择功能 
				}
				
				getItemKeyChar = function(option){
					return option.text.charAt(0).toUpperCase();
				}
				
				key2Char = function(key){
					var s = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	                if (key >= 97 && key <= 122) 
	                    return s.charAt(key - 97);
	                if (key >= 65 && key <= 90) 
	                    return s.charAt(key - 65);
	                if (key >= 48 && key <= 57) 
	                    return "" + (key - 48);
	                return null;
				}
				
				getPinYin = function(c){
					execScript("tmp=asc(\"" + c + "\")", "vbscript");
	                tmp = 65536 + tmp;
	                if (tmp >= 45217 && tmp <= 45252) 
	                    return "A";
	                if (tmp >= 45253 && tmp <= 45760) 
	                    return "B";
	                if (tmp >= 45761 && tmp <= 46317) 
	                    return "C";
	                if (tmp >= 46318 && tmp <= 46825) 
	                    return "D";
	                if (tmp >= 46826 && tmp <= 47009) 
	                    return "E";
	                if (tmp >= 47010 && tmp <= 47296) 
	                    return "F";
	                if ((tmp >= 47297 && tmp <= 47613) || (tmp == 63193)) 
	                    return "G";
	                if (tmp >= 47614 && tmp <= 48118) 
	                    return "H";
	                if (tmp >= 48119 && tmp <= 49061) 
	                    return "J";
	                if (tmp >= 49062 && tmp <= 49323) 
	                    return "K";
	                if (tmp >= 49324 && tmp <= 49895) 
	                    return "L";
	                if (tmp >= 49896 && tmp <= 50370) 
	                    return "M";
	                if (tmp >= 50371 && tmp <= 50613) 
	                    return "N";
	                if (tmp >= 50614 && tmp <= 50621) 
	                    return "O";
	                if (tmp >= 50622 && tmp <= 50905) 
	                    return "P";
	                if (tmp >= 50906 && tmp <= 51386) 
	                    return "Q";
	                if (tmp >= 51387 && tmp <= 51445) 
	                    return "R";
	                if (tmp >= 51446 && tmp <= 52217) 
	                    return "S";
	                if (tmp >= 52218 && tmp <= 52697) 
	                    return "T";
	                if (tmp >= 52698 && tmp <= 52979) 
	                    return "W";
	                if (tmp >= 52980 && tmp <= 53688) 
	                    return "X";
	                if (tmp >= 53689 && tmp <= 54480) 
	                    return "Y";
	                if (tmp >= 54481 && tmp <= 62289) 
	                    return "Z";
	                return c.charAt(0);
				}
			}

 

分享到:
评论

相关推荐

    jquery select2组件

    `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件,它在原生HTML `&lt;select&gt;` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中,使得传统的单选或多选下拉菜单变得更加美观且...

    jquery select 多种下拉日期选择插件

    本文将深入探讨“jQuery select 多种下拉日期选择插件”的相关知识点,帮助开发者理解和应用此类插件。 首先,我们来解析标题:“jQuery select 多种下拉日期选择插件”。这个标题暗示了我们正在讨论一个基于jQuery...

    jquery select插件带搜索框的下拉选择框代码

    在这个案例中,我们使用的是jQuery的select插件,具体来说是"jquery.searchableSelect",它为标准的HTML `&lt;select&gt;` 元素添加了搜索功能。 要使用此插件,您需要引入以下文件: 1. `jquery-1.11.1.min.js`:这是...

    select2(jquery)插件下载

    Select2是一款基于jQuery的增强型下拉选择框插件,它极大地改进了原生HTML `&lt;select&gt;` 元素的用户体验和功能。标题中的"select2(jquery)插件下载"指的是这个插件的获取途径,通常通过下载压缩包文件来获取并应用于...

    jquery 封装select实现select自定义样式插件jquery.easydropdown.min.js

    在Web开发中,Select元素是常用的数据选择控件,但其默认样式通常较为单一,无法满足设计师们对界面美观度的需求。jQuery库为我们提供了丰富的功能扩展,其中就包括了对Select元素的样式定制。这里我们要探讨的是一...

    强大的jquery下拉分页选择插件SelectPage

    **jQuery库:jQuery与SelectPage.js插件** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。jQuery的核心特性包括选择器(用于快速定位HTML元素)、链式...

    jquery select列表选择框选中美化效果源码

    接着,通过jQuery选择器定位到需要美化的`&lt;select&gt;`元素,并调用插件的初始化方法。例如,如果使用Select2插件,代码可能会像这样: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery Select美化 &lt;link href="select2....

    jQuery下拉选择框美化插件select-mania

    select-mania是一款jQuery下拉选择框美化插件。该插件可以将普通的select下拉选择框转换漂亮的下拉选择框,并且转换后的下拉选择框带搜索功能,可通过AJAX获取数据,带多种主题,还可以自定义主题等。

    jquery 超级select插件 v4.0版本

    《jQuery超级Select插件v4.0版本详解》 在Web开发中,下拉选择框(Select)是最常见的表单元素之一,但在某些场景下,普通的Select可能无法满足复杂的交互需求,例如多选、搜索过滤、自定义样式等。这时,jQuery...

    jquery select美化插件

    在“jquery select美化插件”这个主题中,我们主要关注的是如何利用jQuery扩展原生的`&lt;select&gt;`元素,使其外观和交互更加友好。 描述中提到的“附带jquery1.5”,意味着这个插件依赖于jQuery 1.5版本。尽管这个版本...

    jquery 多功能select控件,多功能选择控件

    这时,jQuery插件Chosen应运而生,它是一款强大的、高度可定制的Select控件,能够提供多选、搜索、清除等功能,极大地提升了用户体验。 Chosen插件的核心特性包括: 1. **多选支持**:Chosen允许用户选择多个选项...

    jquery select2

    为了解决这些问题,jQuery社区推出了一个强大的插件——jQuery Select2。Select2不仅提供了美观的界面,还增强了用户体验,特别是对于大型数据集的搜索功能,使得在下拉框中快速找到所需选项变得轻而易举。 一、...

    jQuery下拉查询筛选插件Combo Select

    `jQuery Combo Select`插件是提升下拉选择框用户体验的有力工具,尤其适用于需要搜索筛选的场景。通过理解其基本原理和使用方法,开发者可以轻松地将这一功能整合进自己的项目,从而为用户提供更加高效、友好的交互...

    jQuery自定义月份选择插件

    本教程将详细讲解如何利用jQuery创建一个自定义的月份选择插件,帮助开发者提高用户体验,使得用户能方便快捷地选择日期。 首先,我们需要了解jQuery的基本用法。jQuery的核心特性是其简洁的语法,例如$(selector)....

    jQuery Select下拉框分类菜单多选插件

    在本文中,我们将深入探讨"jQuery Select下拉框分类菜单多选插件"这一主题,它是一款用于增强标准HTML选择器功能的实用工具。这款插件不仅提供了分门别类的下拉菜单,还集成了搜索功能,使得用户在处理大量选项时...

    jQuery Select(单选) 模拟插件 V1.3.6

    3. 在文档加载完成后,通过jQuery选择器找到对应的`&lt;select&gt;`元素,然后调用插件方法对其进行初始化。 例如: ```html &lt;script src="path/to/jquery.js"&gt; &lt;script src="path/to/jquery.select.js"&gt; ...

    select选择框控件jquery-editable-select支持编辑输入

    在本主题中,我们将关注一个名为"jQuery Editable Select"的插件,它允许用户在选择框中直接编辑和输入。 jQuery Editable Select 是一个轻量级且高度可定制的插件,基于流行的JavaScript库jQuery构建。它提供了一...

    jQuery模拟select下拉框插件.zip

    "jQuery模拟select下拉框插件"就是这样一个工具,它提供了更丰富的交互性和定制性,相比原生的HTML下拉框控件,能够为用户带来更好的体验。下面将详细探讨这个插件的原理、功能以及如何使用。 首先,原生的`&lt;select...

    jQuery-ComboSelect插件

    总的来说,jQuery-ComboSelect插件通过提供强大的选择框功能和灵活的定制选项,极大地提升了前端开发效率,同时也为用户带来了更好的交互体验。对于那些需要处理复杂下拉选择场景的开发者而言,它无疑是一个值得考虑...

    jquery实现select带模糊搜索下拉选择框

    本教程将详细讲解如何使用 `jQuery` 实现一个具有模糊搜索功能的下拉选择框,以提升用户在交互时的体验。 首先,我们需要了解 `select` 元素在HTML中的基本用法。`&lt;select&gt;` 标签用于创建一个下拉列表,用户可以...

Global site tag (gtag.js) - Google Analytics