jquery搜索框
⑴ 我想用jquery 查找页面所有的输入框,要怎么写
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
$("input:text").each(function(){
var name = $(this).attr("name");
alert(name);
});
});
</script>
</head>
<body>
<input type="text" name="1"/><br />
<input type="text" name="2"/><br />
<input type="text" name="3"/><br />
<input type="text" name="4"/><br />
</body>
</html>
这里有个例子 你看下
⑵ jquery怎么实现搜索框搜索功能
jquery怎么实现搜索框搜索功能示例代码L:
(function($) {
$.fn.Z_TMAIL_SIDER_V2 = function(options) {
var opts = $.extend( {}, $.fn.Z_TMAIL_SIDER_V2.defaults, options);
var base = this;
var thisTitle = $(base).find('.allcategorys');
var Z_SubList = $(base).find('.sublist');
var navPosTop = $(base).offset().top;
var timeOut = null;
$(thisTitle).find('.title-item-hd a').hover(function(e) {
clearTimeout(timeOut);
var thisLi = this;
if($(Z_SubList).is(':visible')) return;
showSubList(thisLi);
e.stopPropagation();
}, function(e) {
var thisLi = this;
timeOut = setTimeout(function() {
hideSubList(thisLi);
}, 100);
$(Z_SubList).hover(function(e){
clearTimeout(timeOut);
}, function() {
clearTimeout(timeOut);
timeOut = setTimeout(function() {
hideSubList(thisLi);
}, 100);
});
e.stopPropagation();
});
var showSubList = function(thisli) {
var top = $(thisli).height() - opts.slideHeight;
$(thisli).addClass('curr').find('s').addClass('curr');
$(Z_SubList).css({top: top, opacity: 0}).show().stop().animate({top: $(thisli).height(), opacity : 1});
};
var hideSubList = function(thisli) {
$(thisli).removeClass('curr').find('s').removeClass('curr');
$(Z_SubList).hide();
};
$(window).resize(function() {
var sTop = $(window).scrollTop();
if(sTop >= navPosTop) {
if($.browser.msie && $.browser.version < 7){
$(base).css({position: 'absolute', top: sTop});
}else {
$(base).css({position: 'fixed', top: 0});
}
}else {
$(base).css({position: 'relative', top: 0});
}
});
$(window).scroll(function() {
var sTop = $(window).scrollTop();
if(sTop >= navPosTop) {
if($.browser.msie && $.browser.version < 7){
$(base).css({position: 'absolute', top: sTop});
}else {
$(base).css({position: 'fixed', top: 0});
}
}else {
$(base).css({position: 'relative', top: 0});
}
});
};
$.fn.Z_TMAIL_SIDER_V2.defaults = {
slideHeight : 8
};
})(jQuery);
⑶ jquery插件 网站内部搜索框带有多平台切换按钮搜索
jquery怎么实现搜索框搜索功能示例代码L:(function($){$.fn.Z_TMAIL_SIDER_V2=function(options){varopts=$.extend({},$.fn.Z_TMAIL_SIDER_V2.defaults,options);varbase=this;varthisTitle=$(base).find('.allcategorys');varZ_SubList=$(base).find('.sublist');varnavPosTop=$(base).offset().top;vartimeOut=null;$(thisTitle).find('.title-item-hda').hover(function(e){clearTimeout(timeOut);varthisLi=this;if($(Z_SubList).is(':visible'))return;showSubList(thisLi);e.stopPropagation();},function(e){varthisLi=this;timeOut=setTimeout(function(){hideSubList(thisLi);},100);$(Z_SubList).hover(function(e){clearTimeout(timeOut);},function(){clearTimeout(timeOut);timeOut=setTimeout(function(){hideSubList(thisLi);},100);});e.stopPropagation();});varshowSubList=function(thisli){vartop=$(thisli).height()-opts.slideHeight;$(thisli).addClass('curr').find('s').addClass('curr');$(Z_SubList).css({top:top,opacity:0}).show().stop().animate({top:$(thisli).height(),opacity:1});};varhideSubList=function(thisli){$(thisli).removeClass('curr').find('s').removeClass('curr');$(Z_SubList).hide();};$(window).resize(function(){varsTop=$(window).scrollTop();if(sTop>=navPosTop){if($.browser.msie&&$.browser.version=navPosTop){if($.browser.msie&&$.browser.version<7){$(base).css({position:'absolute',top:sTop});}else{$(base).css({position:'fixed',top:0});}}else{$(base).css({position:'relative',top:0});}});};$.fn.Z_TMAIL_SIDER_V2.defaults={slideHeight:8};})(jQuery);
⑷ jquery 搜索框,搜索表格中的数据
//参考下这个,一个正在用的项目的。后台就模糊查询把结果返回来就可以了
$('.searchInp').live('keyup',function(){
varv=$.trim($(this).val());
if(!v)returnfalse;
varobj=$(this),data={action:'search',,name:v};
obj.addClass('searchSelectLj')
if(obj.attr('way'))data['way']=obj.attr('way');
if(obj.attr('m'))data['m']=obj.attr('m');
$.ajax({
type:'post',data:data,dataType:'json',beforeSend:function(XMLHttpRequest){
$('.searchSelect').html('<p>搜索“'+v+'”中</p>');
},success:function(msg){
if(msg.error>0){
$('.searchSelect').html('<p>搜索无结果</p>');
}else{
if(msg.data){
varhtml='<p>搜索共('+msg.data.length+')结果</p>';
$.each(msg.data,function(k,v){
if(v.o)
html+='<p><inputtype="hidden"value="'+v.id+'"><inputtype="hidden"value="'+v.o+'">'+v.name+'</p>';
else
html+='<p><inputtype="hidden"value="'+v.id+'">'+v.name+'</p>';
})
$('.searchSelect').html(html);
}else{
$('.searchSelect').html('<p>搜索无结果</p>');
}
}
},error:function(){
}
})
})
⑸ jquery带搜索框的下拉菜单怎么写
我提供一个简单的思路。一般下拉框用select.不过select不智能,所以大家开始用一个text文本框加一个ul来模拟。
⑹ 仿百度搜索框使用jquery什么事件
有这么一个插件你可以看一下:仿网络自动补全搜索框效果
⑺ Jquery 搜索Json内容 与文本框输入匹配,并在页面显示
jquery获取用户输入的内来容:
var name=$("#文本框源ID").val();
使用循环查JSON,
for(){
if(json.name==name){//条件
//显示其它属性
$("#文本框ID").val(json.名称);
.....
}
}
把上面中文的字换成你定义的变量名。
⑻ jquery mobile实现带搜索功能的下拉框求代码
分割的下拉菜单按钮
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
<span class="sr-only">切换下拉菜单</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">功能</a>
</li>
<li>
<a href="#">另一个功能</a>
</li>
<li>
<a href="#">其他</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<br>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
<span class="sr-only">切换下拉菜单</span>
</button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">功能</a>
</li>
<li>
<a href="#">另一个功能</a>
</li>
<li>
<a href="#">其他</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>
具体见http://www.runoob.com/bootstrap/bootstrap-input-groups.html
⑼ Jquery仿斗鱼搜索框的,拉长效果
给它加个点击事件,让它点击后变长。
再加个键盘事件,让它键盘输入的时间默认的文字消失。
⑽ jquery如何实现动态搜索显示内容
$(document).ready(function () {
var showletter = "";
$(".showkeyword").keyup(function () {
var formletter = /[a-z]$/;
if (!formletter.test($(this).val())) {
if (showletter != $(this).val()) {
showletter = $(this).val();
showsearch(showletter);
}
}
});
function showsearch(keywors) {
/* url为搜索请求的地址,自定义*/
$.ajax({
type: "get",
url: "/ashx/Searchtishi.ashx",
data: { keywords: keywors },
contentType: "html/text; charset=utf-8",
dataType: "text",
success: function (data) {
//将返回的搜索结果,放入到我们指定的div里面
$(".searchlist ul").html(data);
}
});
}
});
<script type="text/javascript" src="http://www.sz886.com/js/jquery-1.9.1.min.js"></script>