$.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`是一款强大的、高度可定制的下拉选择框插件,它在原生HTML `<select>` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中,使得传统的单选或多选下拉菜单变得更加美观且...
本文将深入探讨“jQuery select 多种下拉日期选择插件”的相关知识点,帮助开发者理解和应用此类插件。 首先,我们来解析标题:“jQuery select 多种下拉日期选择插件”。这个标题暗示了我们正在讨论一个基于jQuery...
在这个案例中,我们使用的是jQuery的select插件,具体来说是"jquery.searchableSelect",它为标准的HTML `<select>` 元素添加了搜索功能。 要使用此插件,您需要引入以下文件: 1. `jquery-1.11.1.min.js`:这是...
Select2是一款基于jQuery的增强型下拉选择框插件,它极大地改进了原生HTML `<select>` 元素的用户体验和功能。标题中的"select2(jquery)插件下载"指的是这个插件的获取途径,通常通过下载压缩包文件来获取并应用于...
在Web开发中,Select元素是常用的数据选择控件,但其默认样式通常较为单一,无法满足设计师们对界面美观度的需求。jQuery库为我们提供了丰富的功能扩展,其中就包括了对Select元素的样式定制。这里我们要探讨的是一...
**jQuery库:jQuery与SelectPage.js插件** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。jQuery的核心特性包括选择器(用于快速定位HTML元素)、链式...
接着,通过jQuery选择器定位到需要美化的`<select>`元素,并调用插件的初始化方法。例如,如果使用Select2插件,代码可能会像这样: ```html <!DOCTYPE html> <title>jQuery Select美化 <link href="select2....
select-mania是一款jQuery下拉选择框美化插件。该插件可以将普通的select下拉选择框转换漂亮的下拉选择框,并且转换后的下拉选择框带搜索功能,可通过AJAX获取数据,带多种主题,还可以自定义主题等。
《jQuery超级Select插件v4.0版本详解》 在Web开发中,下拉选择框(Select)是最常见的表单元素之一,但在某些场景下,普通的Select可能无法满足复杂的交互需求,例如多选、搜索过滤、自定义样式等。这时,jQuery...
在“jquery select美化插件”这个主题中,我们主要关注的是如何利用jQuery扩展原生的`<select>`元素,使其外观和交互更加友好。 描述中提到的“附带jquery1.5”,意味着这个插件依赖于jQuery 1.5版本。尽管这个版本...
这时,jQuery插件Chosen应运而生,它是一款强大的、高度可定制的Select控件,能够提供多选、搜索、清除等功能,极大地提升了用户体验。 Chosen插件的核心特性包括: 1. **多选支持**:Chosen允许用户选择多个选项...
为了解决这些问题,jQuery社区推出了一个强大的插件——jQuery Select2。Select2不仅提供了美观的界面,还增强了用户体验,特别是对于大型数据集的搜索功能,使得在下拉框中快速找到所需选项变得轻而易举。 一、...
`jQuery Combo Select`插件是提升下拉选择框用户体验的有力工具,尤其适用于需要搜索筛选的场景。通过理解其基本原理和使用方法,开发者可以轻松地将这一功能整合进自己的项目,从而为用户提供更加高效、友好的交互...
本教程将详细讲解如何利用jQuery创建一个自定义的月份选择插件,帮助开发者提高用户体验,使得用户能方便快捷地选择日期。 首先,我们需要了解jQuery的基本用法。jQuery的核心特性是其简洁的语法,例如$(selector)....
在本文中,我们将深入探讨"jQuery Select下拉框分类菜单多选插件"这一主题,它是一款用于增强标准HTML选择器功能的实用工具。这款插件不仅提供了分门别类的下拉菜单,还集成了搜索功能,使得用户在处理大量选项时...
3. 在文档加载完成后,通过jQuery选择器找到对应的`<select>`元素,然后调用插件方法对其进行初始化。 例如: ```html <script src="path/to/jquery.js"> <script src="path/to/jquery.select.js"> ...
在本主题中,我们将关注一个名为"jQuery Editable Select"的插件,它允许用户在选择框中直接编辑和输入。 jQuery Editable Select 是一个轻量级且高度可定制的插件,基于流行的JavaScript库jQuery构建。它提供了一...
"jQuery模拟select下拉框插件"就是这样一个工具,它提供了更丰富的交互性和定制性,相比原生的HTML下拉框控件,能够为用户带来更好的体验。下面将详细探讨这个插件的原理、功能以及如何使用。 首先,原生的`<select...
总的来说,jQuery-ComboSelect插件通过提供强大的选择框功能和灵活的定制选项,极大地提升了前端开发效率,同时也为用户带来了更好的交互体验。对于那些需要处理复杂下拉选择场景的开发者而言,它无疑是一个值得考虑...
本教程将详细讲解如何使用 `jQuery` 实现一个具有模糊搜索功能的下拉选择框,以提升用户在交互时的体验。 首先,我们需要了解 `select` 元素在HTML中的基本用法。`<select>` 标签用于创建一个下拉列表,用户可以...