如何实现 select 组件的选择输入过滤作用,下面有一段 js 代码,很实用,需要的朋友可以看看
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
实现 select 组件的选择输入过滤作用的 js 代码如下:
- /**
- *其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码
- **
- /
- /**
- * @description This plugin allows you to make a select box editable like a text box while keeping it's select-option features
- * @description no stylesheets or images are required to run the plugin
- *
- * @version 0.0.1
- * @author Martin Mende
- * @license Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0)
- * @license For comercial use please contact me: martin.mende(at)aristech.de
- *
- * @requires jQuery 1.9+
- *
- * @class editableSelect
- * @memberOf jQuery.fn
- *
- * @example
- *
- * var selectBox = $("select").editableSelect();
- * selectBox.addOption("I am dynamically added");
- */
- (function($) {
- $.fn.editableSelect = function() {
- var instanceVar;
- //此this.each()指的就是对当前对象的遍历,这里的当前对象指代的就是对当前两个下拉选择框对象的一一遍历
- this.each(function() {
- var originalSelect = $(this);
- //check if element is a select
- if (originalSelect[0].tagName.toUpperCase() === "SELECT") {
- //wrap the original select在原始的<select>外围插入<div></div>框
- originalSelect.wrap($("<div/>"));
- var wrapper = originalSelect.parent();
- wrapper.CSS({
- display: "inline-block"
- });
- //place an input which will represent the editable select
- //在选择菜单上加入input输入框<input alt title ..... style="width:......" value="">
- var inputSelect = $("<input/>").insertBefore(originalSelect);
- //get and remove the original id
- var objID = originalSelect.attr("id");
- originalSelect.removeAttr("id");
- //add the attributes from the original select
- //input输入框的各种属性设置
- inputSelect.attr({
- alt: originalSelect.attr("alt"),
- title: originalSelect.attr("title"),
- class: originalSelect.attr("class"),
- name: originalSelect.attr("name"),
- disabled: originalSelect.attr("disabled"),
- tabindex: originalSelect.attr("tabindex"),
- id: objID
- });
- //get the editable css properties from the select
- var rightPadding = 15;
- inputSelect.css({
- width: originalSelect.width() - rightPadding,
- height: originalSelect.height(),
- fontFamily: originalSelect.css("fontFamily"),
- fontSize: originalSelect.css("fontSize"),
- background: originalSelect.css("background"),
- paddingRight: rightPadding
- });
- inputSelect.val(originalSelect.val());
- //add the triangle at the right
- var triangle = $("<div/>").css({
- height: 0,
- width: 0,
- borderLeft: "5px solid transparent",
- borderRight: "5px solid transparent",
- borderTop: "7px solid #999",
- position: "relative",
- top: -(inputSelect.height() / 2) - 5,
- left: inputSelect.width() + rightPadding - 10,
- marginBottom: "-7px",
- pointerEvents: "none"
- }).insertAfter(inputSelect);
- //create the selectable list that will appear when the input gets focus
- //聚焦的时候加上<ol><ol/>下拉框
- var selectList = $("<ol/>").css({
- display: "none",
- listStyleType: "none",
- width: inputSelect.outerWidth() - 2,
- padding: 0,
- margin: 0,
- border: "solid 1px #ccc",
- fontFamily: inputSelect.css("fontFamily"),
- fontSize: inputSelect.css("fontSize"),
- background: "#fff",
- position: "absolute",
- zIndex: 1000000
- }).insertAfter(triangle);
- //add options
- //在resourceData变量中存储当前下拉框中的所有数据
- //******
- var resourceData = [];
- originalSelect.children().each(function(index, value) {
- prepareOption($(value).text(), wrapper);
- resourceData.push($(value).text());
- });
- //******
- //bind the focus handler
- //在鼠标聚焦的时候fadeIn(100),即下拉显示当前下拉框
- inputSelect.focus(function() {
- selectList.fadeIn(100);
- //v存储的是在input输入框中输入的内容,如果输入的内容不为空,就在存储原始下拉框的所有数据中找到出现v中字符的数据压入newResourceData变量中
- //******
- var v = inputSelect.val();
- var newResourceData = [];
- if (v != "") {
- $.each(resourceData,
- function(i, t) {
- if (t.indexOf(v) != -1) newResourceData.push(t);
- });
- }
- wrapper.children("ol").empty();
- $.each(newResourceData,
- function(i, t) {
- prepareOption(t, wrapper);
- });
- //******
- }).blur(function() {
- selectList.fadeOut(100);
- }).keyup(function(e) {
- if (e.which == 13) inputSelect.trigger("blur");
- //在enter快捷键按下后弹起的时候执行的事件
- //******
- var v = inputSelect.val();
- var newResourceData = [];
- if (v != "") {
- $.each(resourceData,
- function(i, t) {
- if (t.indexOf(v) != -1) newResourceData.push(t);
- });
- }
- wrapper.children("ol").empty();
- $.each(newResourceData,
- function(i, t) {
- prepareOption(t, wrapper);
- });
- //******
- });
- //hide original element
- originalSelect.css({
- visibility: "hidden",
- display: "none"
- });
- //save this instance to return it
- instanceVar = inputSelect
- } else {
- //not a select
- return false;
- }
- }); //-end each
- /** public methods **/
- /**
- * Adds an option to the editable select
- * @param {String} value - the options value
- * @returns {void}
- */
- instanceVar.addOption = function(value) {
- prepareOption(value, instanceVar.parent());
- };
- /**
- * Removes a specific option from the editable select
- * @param {String, Number} value - the value or the index to delete
- * @returns {void}
- */
- instanceVar.removeOption = function(value) {
- switch (typeof(value)) {
- case "number":
- instanceVar.parent().children("ol").children(":nth(" + value + ")").remove();
- break;
- case "string":
- instanceVar.parent().children("ol").children().each(function(index, optionValue) {
- if ($(optionValue).text() == value) {
- $(optionValue).remove();
- }
- });
- break;
- }
- };
- /**
- * Resets the select to it's original
- * @returns {void}
- */
- instanceVar.restoreSelect = function() {
- var originalSelect = instanceVar.parent().children("select");
- var objID = instanceVar.attr("id");
- instanceVar.parent().before(originalSelect);
- instanceVar.parent().remove();
- originalSelect.css({
- visibility: "visible",
- display: "inline-block"
- });
- originalSelect.attr({
- id: objID
- });
- };
- //return the instance
- return instanceVar;
- };
- /** private methods **/
- //prepareOption函数的作用就是在当前下拉框中添加新选项
- function prepareOption(value, wrapper) {
- var selectOption = $("<li>" + value + "</li>").appendTo(wrapper.children("ol"));
- var inputSelect = wrapper.children("input");
- selectOption.css({
- padding: "3px",
- textAlign: "left",
- cursor: "pointer"
- }).hover(function() {
- selectOption.css({
- backgroundColor: "#eee"
- });
- },
- function() {
- selectOption.css({
- backgroundColor: "#fff"
- });
- });
- //bind click on this option
- selectOption.click(function() {
- inputSelect.val(selectOption.text());
- inputSelect.trigger("change");
- });
- }
- } (jQuery));
来源: