本文实例讲述了js实现YouKu的漂亮搜索框效果。分享给大家供大家参考。具体如下： 运行效果如下图所示：在线演示地址如下： http://demo.jb51.net/js/2015/js-youku-search-style-codes/ 具体代码如下： <!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"> <HTML> <HEAD> <meta http-equiv="Content-Type" ...
本文实例讲述了javascript实现类似于新浪微博搜索框弹出效果的方法。分享给大家供大家参考。具体实现方法如下： <!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=gb2312" /> <title>仿新浪微博搜索框弹出的效果</title> <style ty...
本文实例讲述了javascript搜索框效果实现方法。分享给大家供大家参考。具体实现方法如下： <!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 type="text/javascript"> function iniE...
本文实例讲述了JS实现仿google、百度搜索框输入信息智能提示的实现方法。分享给大家供大家参考。具体如下： <!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><title>仿google、百度搜索框输入信息智能提示的实现</title><style type="text/css" media="screen">body{font: 11px arial;}.suggest...
在createSelect()函数中，返回一个对象，这个对象的两个方法next（） 和prev（）中的调用的moveSelect()能正确的指向到该函数，也可以把 moveSelect()函数放到外面来。代码如下: /* 键盘操作与问题推荐选择 */ var curDo = null; var select = createSelect(); $(#keywords).keyup(function(e){ var theEvent = e || window.event; code = theEvent.keyCode ? theEvent.keyCode : (theEvent.which ? ...
本文实例讲述了jquery实现搜索框常见效果的方法。分享给大家供大家参考。具体实现方法如下：代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery搜索框效果</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function(){ var searchBox = $("#search"); searchBox.focus(function(){ if(searchB...
本文实例讲述了jquery搜索框效果实现方法。分享给大家供大家参考。具体实现方法如下：代码如下:<html> <head> <title>jquery：搜索框效果</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function(){ $(#search).val("请输入搜索内容").addClass("c1"); $(#search).focus(function(){//搜索框获得焦点时 $(#search).val("").addClass("c2"); }); $(#...
当获焦时,文本消失,失焦时文本出现 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head><body> <input id="text" type="text" value="点我就消失"/> <script> var oText=document.getElementById("text"); var onoff=true; oText.color="#000"; oText.onfocus=function(){ if(onoff){ this.value=""; this.color="red"; onoff=false; } }oText.onblur=function(){ if(this.value==){ this.co...
一款仿淘宝TAB切换搜索框，想搜索哪方面的内容就切换到哪一个，感兴趣的朋友可以看看下面的代码<div class="search"> <div id="searchBox"> <ul class="tab-bar clearfix" id="tabBar"> <li class="current" tips="请输入产品名称">商品</li> <li class="tab-line"><span>|</span></li> <li tips="请输入店铺名称">店铺</li> </ul> <div class="tab-box clearfix" id="tabBox"> <form onsubmit="" action="" method="get" name="se...
以前一直在用JQUERY叠加两个INPUT框来实现登陆中需要输入的用户名、密码来实现提示与用户的输出，这边采用JQUERY在一个INPUT框中实现这种效果，具体做法为： 下面是INPUT框代码： 代码如下:<input class="search_text" type="text" value="搜索" name="searchText" /> 下面是JQUERY代码： 代码如下://设置搜索的默认值 $(".search_text").focus(function(){ <span style="white-space:pre"> </span>if($(".search_text").val()=...
博客的前某一篇文章中//www.gxlcms.com/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能。最近在一个管理项目的项目中，使用后发现，真的反应很慢，数据量很大的情况下使用Ajax去实现真的不合适，于是，我又写了一个使用Jquery来实现方法。 废话不多说，上图上代码: 引用方式： 代码如下:<body style="background-color: White;"> <form id="form1" runat="server"> <div id="filter_stationType"></div> <div c...
1.样式引用：代码如下: <link rel="stylesheet" href="~/Js/Ddl_Chosen/chosen.css" />2.由于应用了Jquery，所以引用Jquery。(下载地址)代码如下: <script src="<%= ResolveUrl("~/Js/Jquery.js")%>" type="text/javascript"></script>3.相关Js配置代码如下: <asp:DropDownList ID="ddlCountry" runat="server" data-placeholder="Choose a Country..." Width="200px" class="chzn-select"> ...
当页面需要显示的内容较多时，我们很多人采用分页的方法解决。 而有的时候，分页的效果却又是非常令人厌恶的。滚动条无疑是一种简单而又高效的一种方式。而这里，处于对用户体验的考虑，我使用Jquery实现了一种类似“滚动停靠”的效果。这样当我们向下滚动内容的时候，搜索框会“悬挂（停靠）”在窗口顶端。 这样做的好处是，当用户需要重新筛选内容的时候，不必再次向上滚动，随时可以输入条件进行搜索。 以下是我实现这个效果的思...
因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个. 直接贴代码。 代码如下:(function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn.autoComplete = function(config) { c = $(this); var defaults = { width: c.width(), //提示框的宽度 默认跟文本框一样 maxheight: 150, //提示框的最大高度 top: 6, //与文本框的上下距离 url: "", //ajax 请求地址 t...
先看看整个的效果图：图一： 图二： 图三： 图四： 大概的效果图就这样，接下来直接看源码页面： 代码如下:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %> <!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 runat="server"> <t...