(原创)jquery快速索引文本框实现 -

shiwujie

浏览: 4367 次
性别:
来自: 杭州

最近访客更多访客>>

308688871

dagf113225

woodding2008

jonathan714

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3)

社区版块

存档分类

(原创)jquery快速索引文本框实现

jQuery CSS prototype HTML

var FSelect = (function($){
			var _self = this;
			_self.FastSearch = function(){
	  			}
			_self.FastSearch.prototype = {

			create : function(opt){
				var _opt = {
						 el : "elementid",
						 getData : function(v){return false},
						 itemChange : function(item){},
						 itemSelect : function(item){}
						};
				$.extend(_opt,opt || {});
				var _text = $("#" + _opt.el);
				var _select = (function(){
					var html = "<select id='select_list_"+_text.attr("id")+"' style=\"position: absolute; z-index:9999;height: 150px;\" multiple=\"multiple\">"+
						"<option value=''>不选择</option></select>";
					var el_offset = _text.offset();
					var r = $(html).css("top",el_offset.top + _text.height() + 5).css("left",el_offset.left).css("width",_text.width() + 5);
					r.hide();
					$('body').append(r);
					return r;
				})();
				
				function show(){
					_select.show();
				}
				function hide(){
					var fid = document.activeElement.id;
					
					if(fid == _text.attr("id")){
						if(_text.val()!='')
							_select.show();
						else
							_select.hide();
					}else if(fid == _select.attr("id")){
						_select.show();
					}else{
						_select.hide();
					}
				}
				function addOption(key,value){
					_select.append("<option value='"+key+"'>"+value+"</option>");
				}
				function removeOptions(){
					_select.find("option").remove("[value!='']");
				}
				function addOptions(data){
					for(var i=0;i<data.length;i++){
						addOption(data[i].value,data[i].text);
					}
				}
				$("input,select,textarea,button").each(function(){
						$(this).focus(function(){
								hide();
							});
	
					});
				_text.keyup(function(e){
						
						switch(e.keyCode){
							case 40:
								_select.focus();
								break;
							default:
								removeOptions();
								var value = _text.val();
								
								var data = _opt.getData(value);
								if(data){
									addOptions(data);	
									show();
								}
								break;
						}
						hide();
					});
				_select.change(function(){
						_opt.itemChange({value:$(this).val(),text:$(this).find("option[selected]").text()});
					});
				_select.keyup(function(e){
						switch(e.keyCode){
						case 13:
							_opt.itemSelect({value:$(this).val(),text:$(this).find("option[selected]").text()});
							_text.next("input,select,textarea,button").focus();
							_select.hide();
							break;
						}
					});
				_select.click(function(){
						_opt.itemSelect({value:$(this).val(),text:$(this).find("option[selected]").text()});
						_text.next("input,select,textarea,button").focus();
						_select.hide();
					});
				$(document).click(function(){hide();});
			}
		}
		return _self;
 	})(jQuery)
 		
$(function(){

		var s1 = new FSelect.FastSearch();
	  	var opt = {
			el : "input1",
			itemChange : function(data){
		$("#input2").val(data.text);
			},
			itemSelect : function(data){
				$("#input3").val(data.text);
			},
			getData : function(data){

		if(data == 1){
			return [{value:1,text:'北京'},
							{value:2,text:'上海'}];
		}
		if(data == 12){
			return [{value:1,text:'北京'},
							{value:2,text:'上海'},
							{value:3,text:'浙江'}];
			}
		if(data == 123){
			return [{value:1,text:'北京'},
							{value:2,text:'上海'},
							{value:3,text:'浙江'},
							{value:4,text:'广泛'},
							{value:5,text:'西安'},
							{value:6,text:'辽宁'}];
			}
					}
	    	  	}
	  	s1.create(opt);
 	});

<body>
    <input type="text" id="input1">
    <select style="border: none;"></select>
 	<input type="text" id="input2">
 	<input type="text" id="input3">
  </body>