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>
- 大小: 9.7 KB
- 大小: 7.9 KB
分享到:
相关推荐
jQuery文本框自动联想补全特效是一款简单使用的jQuery自动完成插件,可定义索引关键词,可设置输入框的宽高,支持搜索回调函数。
内容索引:脚本资源,jQuery,文本框,jQuery插件 jQuery Spin button 文本框数值自动增减插件,本插件将文本框的右侧添加一个按钮,通过这个按钮可以改变用户输入数值的大小,可以增加,也可以减小,只用点击鼠标就可...
一款简单使用的jQuery文本框联想补全自动完成插件,可定义索引关键词,可设置输入框的宽高,支持搜索回调函数的jQuery搜索框输入关键词自动联想补全代码。
内容索引:脚本资源,jQuery,字符限制,jQuery插件 jQuery 文本框输入字符限制插件,也就是在你输入文字的时候,根据程序要求,可以限制一部分否提交或是不显示,实现截取字符的作用,比如在有些留言本或评论程序限制...
内容索引:脚本资源,jQuery,鼠标,滚动 jquery 鼠标滚轮控制文本框数字改变,不知道如何描述给大家,也就是在网页的文本框中,只要鼠标移上后,文本框的文字就处于选中状态,如果这时候滚动鼠标滚轮,则选中状态的...
jQuery文本框自动联想补全特效是一款简单使用的jQuery自动完成插件,可定义索引关键词,可设置输入框的宽高,支持搜索回调函数。
《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何使用jQuery的各项技术,实现令人激动的网页效果。 《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的...
内容索引:脚本资源,jQuery,树形菜单,jQuery弹出层 jquery.popup是一款支持树控(树形菜单)功能的文本框弹出层插件,应该说是一款选择插件,在弹出的层内选择适合的操作,值会自动填入文本框中,示例中的三个文本框...
一、文本框、单选按钮、复选框、相关操作 代码如下:var sex=$(“input[name=’sex’]:checked”).val(); //获取一组radio被选中项的值 var item=$(“#sel option:selected”).text(); //获取select被选中项的文本...
内容索引:脚本资源,jQuery,浮动框,jQuery插件 jquery-powerFloat,国内Js高人自写的jQuery万能浮动框插件,附有6种效果的浮动框调用实例, 1、加载页面上元素。 2、Ajax加载外部元素,加载外部HTML片段,加载...
在函数中,index参数是每个元素的索引号 domEle是每个DOM元素的对象(个元素调用一次不是jQuery对象) 如果要想使用jQuery方法,需要将这个DOM对象转换成为jQuery对象,即$(domEle)。·;案例演示:;$.each()方法:...
一款简单使用的jQuery文本框联想补全自动完成插件,可定义索引关键词,可设置输入框的宽高,支持搜索回调函数的jQuery搜索框输入关键词自动联想补全代码
内容索引:脚本资源,jQuery,Select,下拉框美化 jQuery实现select下拉框样式美化效果,这是个挺实用的网页美化技巧,现在jquery很流行,用它不但可以实现交互的Ajax效果,同时也可用来美化表单元素,像下拉框,单选框...
jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个...
内容索引:脚本资源,jQuery,jQuery插件,表单,输入框 使用jQuery 限制表单输入框的字符格式,并自动按要求转换格式,我们把它起个名字叫做jQuery inputMask,它一共有四种方式: 1、转换文本框的字符为大写,自动...
内容索引:脚本资源,jQuery,jQuery插件 Jquery.Careterjquery.Careter 将文本插入到文本框指定位置,感谢您使用我的jquery插件,希望我的插件有您需要的功能,甚至能用帮您完成工作或者学习上的问题,一些使用说明:...
精通jQueryJavaScript 链接: : 看板: : 代表: : 8-使用AJAX的任务管理器 9-jQuery UI 10-jQuery Mobile 11-JavaScript中的面向... 该文件称为文档,其中的每个项目(文本,图像,按钮,文本框)通常称为
内容索引:脚本资源,jQuery,表单验证,jQuery插件 又一个基于jQuery的表单验证插件实例,表单样式没有美化,只是为了演示功能,它和其它验证类不同的是,用户点击表单的某个文本框时,会随时出现即将输入的数值类型,...
内容索引:.NET源码,Ajax相关,自动完成,输入框提示,AJAX jQuery+实现的输入框提示功能,也可称作“自动完成”,3.5支持,测试环境不符,因些没有抓到运行截图,不过从作者书写代码的认真程度来说,正常运行应该没...
内容索引:脚本资源,jQuery,表单美化,jquery插件,jQtransForm jQtransForm jQuery表单美化修饰插件,附带有PHP提交程序,当然ASP/ASP/NET/JSP都是同理,这里主要是jQuery美化部分的实例,美化对象为文本框、密码框、...