1. /*
  2. 功能:实现对select下拉框可输入的功能, 输入时会对下拉框的内容进行动态过滤。
  3. 参数:没有选择任何值时默认显示的文字
  4. 如何使用:$("#firstLevel").inputSelectBox("--请选择--");
  5. 如何获取选择的项:直接使用原始的select元素即可,值会在下拉框隐藏后同步到原始元素
  6. */
  7. (function ($) {
  8. $.fn.inputSelectBox = function (emptyText) {
  9. if (!emptyText) emptyText = ""; //参数默认值:用来填充当输入框input中为空时的值
  10. var blurFlag = true; //用来表示是否要隐藏下拉选择框,hideSelectList会判断此标识(当焦点在input输入框,在下拉选择框里时,不能隐藏。其他场景时隐藏).此标识的作用例如:input失去焦点,按理应该隐藏下拉框,但随着下拉框获取焦点,这时下拉框获得焦点的事件就阻止了隐藏下拉框的请求。
  11.  
  12. //1.隐藏原来的select元素
  13. var sel = $(this);
  14. sel.hide();
  15.  
  16. //2.创建必要的对象
  17. //输入框
  18. var input = $("<input type='text' style='width:" + (sel.width() - 4) + "px'></input>");
  19. //下拉选择框
  20. var selectList = $("<select style='width:" + sel.width() + "px' size='10'>" + sel.html() + "</select>");
  21.  
  22. //3.input在原来select处
  23. input.insertBefore(sel);
  24. //给input绑定事件
  25. input.click(function () {
  26. selectList.show();
  27. }).focus(function () {
  28. //获得焦点,显示下拉选择框
  29. input.select();
  30. blurFlag = false;
  31. selectList.css({ "position": "absolute", "left": input.offset().left + "px", "top": (input.offset().top + input.outerHeight()) + "px" }).show();
  32. }).blur(function () {
  33. //失去焦点,隐藏下拉选择框。注意,如果此时鼠标移到了下拉选择框,则不隐藏
  34. blurFlag = true;
  35. window.setTimeout(function () { hideSelectList('input.blur'); }, 50); //setTimeout的原因是可能用户在输入框、下拉选择框间移动鼠标,这里给一个时间差的缓冲,下同
  36. }).keyup(function (e) {
  37. //console.log(e.keyCode);
  38. if (e.ctrlKey || e.altKey || e.shiftKey ||
  39. e.keyCode == 20 || e.keyCode == 16 || e.keyCode == 17 || e.keyCode == 18 || e.keyCode == 91 || e.keyCode == 93 || e.keyCode == 35 || e.keyCode == 36) return;//非输入键、组合键,这里直接忽略
  40. //输入文字时,下拉选择框的内容跟随变化
  41. switch (e.keyCode) {
  42. case 38:
  43. //向上按钮
  44. break;
  45. case 40:
  46. //向下按钮
  47. break;
  48. case 13:
  49. //回车:确定选择
  50. blurFlag = true;
  51. window.setTimeout(function () { hideSelectList("input enter keyup"); }, 50);
  52. break;
  53. default:
  54. quickFilter(input.val());
  55. break;
  56. }
  57. }).keydown(function (e) {
  58. //输入文字时,下拉选择框的内容跟随变化
  59. switch (e.keyCode) {
  60. case 38:
  61. //向上按钮
  62. selectList.show();
  63. selectList.get(0).selectedIndex--;
  64. input.val(selectList.find("option:selected").text());
  65. break;
  66. case 40:
  67. //向下按钮
  68. selectList.show();
  69. selectList.get(0).selectedIndex++;
  70. input.val(selectList.find("option:selected").text());
  71. break;
  72. default:
  73. break;
  74. }
  75. });
  76.  
  77. //4.下拉选择框:一个新的select
  78. selectList.appendTo("body");
  79. selectList.hide();
  80. selectList.focus(function () {
  81. blurFlag = false;
  82. }).blur(function () {
  83. blurFlag = true;
  84. window.setTimeout(function () { hideSelectList('selectList.blur'); }, 50);
  85. }).click(function () {
  86. input.val($(this).find("option:selected").text());
  87. blurFlag = true;
  88. window.setTimeout(function () { hideSelectList('selectList.click'); }, 50);
  89. });
  90.  
  91. //5.输入框初始化,如果原select有选择值,这里会初始化
  92. if (selectList.get(0).selectedIndex >= 0) {
  93. input.val(selectList.find("option:selected").text());
  94. input.data("selectValue", selectList.val);
  95. } else {
  96. input.val(emptyText);
  97. input.data("selectValue", "");
  98. }
  99.  
  100. //公用函数:隐藏下拉选择框。 调用此函数前,需要为blurFlag赋值为true.参数:测试用,用来打印出在哪里调用的此方法
  101. function hideSelectList(str) {
  102. //console.log("str:" + str + ",blurFlag:" + blurFlag);
  103. if (!blurFlag) return;
  104. if (selectList.css("display") == "none") return;
  105. selectList.hide();
  106. var inputValue = input.val();
  107. //判断输入的文字是否在下拉选择中存在
  108. var options = sel.find("option");
  109. var inputValidFlag = false;
  110.  
  111. for (var i = 0; i < options.length; i++) {
  112. if ($(options[i]).text() == inputValue) {
  113. //input中的值在下拉框中是存在的,给下拉框、原始Select置选中的options,为input赋值
  114. inputValidFlag = true;
  115. //selectList[0].selectedIndex = i;
  116. selectList.find("option").removeAttr("selected");
  117. selectList.find("option[value='" + $(options[i]).val() + "']").attr("selected", "selected"); //将下拉框选中输入的项
  118. selectList[0].selectedIndex = selectList.find("option[value='" + $(options[i]).val() + "']")[0].index;
  119. sel[0].selectedIndex = i;
  120. //sel.find("option").removeAttr("selected");
  121. //sel.find("option[value='" + $(options[i]).val() + "']").attr("selected", "selected"); //将原始select选中输入的项
  122. //给输入框input赋值
  123. //input.val(selectList.find("option:selected").text());
  124. input.data("selectValue", selectList.val());
  125. break;
  126. }
  127. }
  128. //input中的值在下拉框中不存在:input显示默认值emptyText,并把下拉框中恢复显示所有option
  129. if (!inputValidFlag) {
  130. input.val(emptyText);
  131. quickFilter("");
  132. selectList.find("option").removeAttr("selected");
  133. sel.find("option").removeAttr("selected");
  134. }
  135. }
  136.  
  137. //公用函数:在input中输入时过滤select中的option. 参数:input中输入的文字
  138. function quickFilter(val) {
  139. if (val.length == 0 || val == emptyText) {
  140. selectList.html(sel.html());
  141. return;
  142. }
  143. //算法:一个字一个字的比较,比较笨,如果有更好的办法可以修改
  144. var arr = new Array();
  145. for (var i = 0; i < val.length; i++) {
  146. arr[i] = val.substr(i, 1);
  147. }
  148. var options = sel.find("option");
  149. selectList.empty();
  150. for (var i = 0; i < options.length; i++) {
  151. var filterFlag = true;
  152. for (var j = 0; j < arr.length; j++) {
  153. if ($(options[i]).text().indexOf(arr[j]) < 0) {
  154. filterFlag = false;
  155. }
  156. if (filterFlag == false) break;
  157. }
  158. if (filterFlag) selectList.append($($("<div></div>").append($(options[i]).clone()).html()));//当前option包含了input输入的文字,将option加入到下拉框中
  159. }
  160. }
  161. }
  162. })(jQuery);

另外JQuery也有一款插件可以实现jquery.flexselect.js。

自己写的select元素可编辑、可筛选JQuery插件 jquery.inputselectbox.js的更多相关文章

  1. 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js

    做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...

  2. 获取表单内的所有元素的值 表单格式化插件jquery.serializeJSON

    简单描述:一个form表单里有十几个input或者select,要获取到他们的值,我的做法一直都是$("#id").val();这样做本来没什么说的,但是如果有很多呢,就很麻烦,看 ...

  3. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  4. jquery的select元素和option的相关操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 关于select元素的一些基本知识

    为select元素绑定值的几个方法: 一.通过字符串拼接,让后追加到select元素下, 二.通过DOM创建option元素,为其绑上value值和文本: function loadProvinve( ...

  6. Mybatis --- 映射文件、参数处理、参数值的获取、select元素

    映射文件:指导着MyBatis如何进行数据库增删改查, 有着非常重要的意义:   - cache   命名空间的二级缓存配置 - cache-ref   其他命名空间缓存配置的引用. - result ...

  7. javascript操作select元素一例

    熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮. 当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重 ...

  8. jQuery为动态生成的select元素添加事件的方法

    项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelec ...

  9. 使用JavaScript获取select元素选中的value和text

    示例代码如下(js直接写在了html里面,没有写在一个单独的外部文件中): <!DOCTYPE html> <html> <head> <meta name= ...

随机推荐

  1. 二十七、oracle 例外

    一.例外分类oracle将例外分为预定义例外.非预定义例外和自定义例外三种.1).预定义例外用于处理常见的oracle错误.2).非预定义例外用于处理预定义例外不能处理的例外.3).自定义例外用于处理 ...

  2. dom4j操作xml文档

    java Dom4j解析XML文件 标签(空格分隔):java进阶 xml文档: <?xml version="1.0" encoding="UTF-8" ...

  3. Nohttp框架在Android Studio中的使用

    1.添加noHttp的使用权限 <!-- 读写 sd 卡 --> <uses-permission android:name="android.permission.REA ...

  4. msyql sql语句

    参考: http://www.cnblogs.com/aspnethot/articles/1397130.html 修改表字段ALTER TABLE table_name CHANGE old_fi ...

  5. Bounce 弹飞绵羊

    Bounce 弹飞绵羊 题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 分块 将整个大区间分成若干块,每个点维护到下一个块需要跳的次 ...

  6. 大数据时代之hadoop(六):hadoop 生态圈(pig,hive,hbase,ZooKeeper,Sqoop)

    hadoop是有apache基金会所开发的分布式系统基础架构,其主要提供了两方面的功能:分布式存储和分布式计算. 其中分布式存储是分布式计算的基础,在hadoop的实现里面,提供了分布式存储的接口,并 ...

  7. nodejs querystring

    Query String querystring.parse(str[, sep][, eq][, options]) querystring.stringify(obj[, sep][, eq][, ...

  8. 5.Hibernate实现全套增删改查和ajax异步分页

    1.1 创建如下oracle数据库脚本 drop sequence seq_stu; create sequence SEQ_STU minvalue maxvalue start increment ...

  9. Infix to posfix 自己写stack,没有()

    #include<iostream> #include<string> using namespace std; template<typename Type> s ...

  10. OSG+Python

    测试平台(1)Fedora19 x86 [cc@localhost ~]$ lspci | grep VGA :) :00.0 VGA compatible controller: NVIDIA Co ...