>

js实现select组件的选择输入过滤代码,实现selec

- 编辑:澳门新葡亰平台游戏 -

js实现select组件的选择输入过滤代码,实现selec

实现select组件的选择输入过滤作用的js代码如下:

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • Dev Grid拖拽移动行,devgrid拖拽移动
  • C#实现WebService服务 项目完整总结,
  • C#实现WebService服务 项目完整总结,
  • spring框架面试相关问题,spring框架相关问题
  • 安卓listView实现下拉刷新上拉加载滑动仿QQ的
  • 在Xcode4中编写代码,Xcode4编写代码

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

如何实现select组件的选择输入过滤作用,实现select组件过滤

实现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 .....>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 ));

 

图片 1

/***其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码**//** * @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 * @license For comercial use please contact me: martin.mendearistech.de* * @requires jQuery 1.9+** @class editableSelect* @memberOf jQuery.fn** @example** var selectBox = $.editableSelect();* selectBox.addOption("I am dynamically added");*/ {$.fn.editableSelect = function() {var instanceVar;//此this.each()指的就是对当前对象的遍历,这里的当前对象指代的就是对当前两个下拉选择框对象的一一遍历this.each{var originalSelect = $;//check if element is a selectif(originalSelect[0].tagName.toUpperCase{//wrap the original select在原始的外围插入框originalSelect.wrap;var wrapper = originalSelect.parent();wrapper.css({display: "inline-block"});//place an input which will represent the editable select//在选择菜单上加入input输入框var inputSelect = $.insertBefore;//get and remove the original idvar objID = originalSelect.attr;originalSelect.removeAttr;//add the attributes from the original select//input输入框的各种属性设置inputSelect.attr({alt: originalSelect.attr,title: originalSelect.attr,class: originalSelect.attr,name: originalSelect.attr,disabled: originalSelect.attr,tabindex: originalSelect.attr,id: objID});//get the editable css properties from the selectvar rightPadding = 15;inputSelect.css({width: originalSelect.width()-rightPadding,height: originalSelect.height(),fontFamily: originalSelect.css,fontSize: originalSelect.css,background: originalSelect.css,paddingRight: rightPadding});inputSelect.val;//add the triangle at the rightvar triangle = $.css({height: 0, width: 0,borderLeft: "5px solid transparent",borderRight: "5px solid transparent", borderTop: "7px solid #999",position: "relative",top: -/2)-5,left: inputSelect.width()+rightPadding-10,marginBottom: "-7px",pointerEvents: "none"}).insertAfter;//create the selectable list that will appear when the input gets focus//聚焦的时候加上下拉框var selectList = $.css({display: "none",listStyleType: "none",width: inputSelect.outerWidth()-2,padding: 0,margin: 0,border: "solid 1px #ccc",fontFamily: inputSelect.css,fontSize: inputSelect.css,background: "#fff",position: "absolute",zIndex: 1000000}).insertAfter;//add options//在resourceData变量中存储当前下拉框中的所有数据//******var resourceData = [];originalSelect.children().each(function{prepareOption, wrapper);resourceData.push;//******//bind the focus handler//在鼠标聚焦的时候fadeIn,即下拉显示当前下拉框inputSelect.focus{selectList.fadeIn;//v存储的是在input输入框中输入的内容,如果输入的内容不为空,就在存储原始下拉框的所有数据中找到出现v中字符的数据压入newResourceData变量中//******var v = inputSelect.val();var newResourceData = [];if {$.each(resourceData, function != -1)newResourceData.push;}wrapper.children;$.each(newResourceData, function{prepareOption;//******}).blur{selectList.fadeOut.keyup{if inputSelect.trigger;//在enter快捷键按下后弹起的时候执行的事件//******var v = inputSelect.val();var newResourceData = [];if {$.each(resourceData, function != -1)newResourceData.push;}wrapper.children;$.each(newResourceData, function{prepareOption;//******});//hide original elementoriginalSelect.css({visibility: "hidden", display: "none"});//save this instance to return itinstanceVar = inputSelect}else{//not a selectreturn false;}});//-end each/** public methods **//*** Adds an option to the editable select* @param {String} value - the options value* @returns {void}*/instanceVar.addOption = function{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{switch{case "number":instanceVar.parent.children.remove();break; case "string":instanceVar.parent.children().each(function{if==value){$;}});break;} };/*** Resets the select to it's original* @returns {void}*/instanceVar.restoreSelect = function(){var originalSelect = instanceVar.parent;var objID = instanceVar.attr;instanceVar.parent().before;instanceVar.parent;originalSelect.css({visibility: "visible", display: "inline-block"});originalSelect.attr;};//return the instancereturn instanceVar;};/** private methods **///prepareOption函数的作用就是在当前下拉框中添加新选项function prepareOption{var selectOption = $.appendTo(wrapper.children;var inputSelect = wrapper.children;selectOption.css({padding: "3px",textAlign: "left",cursor: "pointer" }).hover{selectOption.css({backgroundColor: "#eee"});},function(){selectOption.css({backgroundColor: "#fff"}); });//bind click on this optionselectOption.click{inputSelect.val;inputSelect.trigger; }};

js实现select组件的选择输入过滤代码

 实现select组件的选择输入过滤作用的js代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

/**

  

*其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码

  

**

  

/

/** 

* @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 ));

实现select组件的选择输入过滤作用的js代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25...

在Clementine中,filter(过滤)结点与select(选择)结点都是用于对输入模型的数据进行选择,有什不同?

filter过滤的为缺失值的字段,而select则是处理缺失值的记录.  

一个表有a b c d四个字段, 不用select a, b, d from的方法过滤掉c字段, 解@——@

那就select * from
不读取  

实现select组件的选择输入过滤作用的js代码如下: /** *其中//******之间的部分显...

本文由服务器发布,转载请注明来源:js实现select组件的选择输入过滤代码,实现selec