jquery实现非叠加式的搜索框提示效果

2024-12-05 00:10:39

以前一直在用JQUERY叠加两个INPUT框来实现登陆中需要输入的用户名、密码来实现提示与用户的输出，这边采用JQUERY在一个INPUT框中实现这种效果，具体做法为：

下面是INPUT框代码：

代码如下:

下面是JQUERY代码：

代码如下:

//设置搜索的默认值
$(".search_text").focus(function(){
<span style="white-space:pre"> </span>if($(".search_text").val()=='搜索'){
<span style="white-space:pre"> </span>$(".search_text").val("");
<span style="white-space:pre"> </span>}else{
<span style="white-space:pre"> </span>$(".search_text").val($(".search_text").val());
<span style="white-space:pre"> </span>}
});
$(".search_text").blur(function(){
<span style="white-space:pre"> </span>if($(".search_text").val()==''){
<span style="white-space:pre"> </span>$(".search_text").val("搜索");
<span style="white-space:pre"> </span>}else{
<span style="white-space:pre"> </span>$(".search_text").val($(".search_text").val());
<span style="white-space:pre"> </span>}
});

格式神马的我就不调整了，毕竟不是编程中使用的IDE编辑器，有兴趣的话，可以看下哟！

jquery 模拟类搜索框自动完成搜索提示功能(改进)

autopoint.js代码: 复制代码代码如下: /* * @date: 2010-5-22 21:42:15 * @author: 胡灵伟 * Depends: * jquery.js * * function:类似GOOGLE搜索框提示功能 */ (function($) { $.fn.autopoint = function (options) { defaults = { url:options.url, keyLeft : 37,//向左方向键 keyUp : 38,//向上方向键
Jquery实现搜索框提示功能示例代码

博客的前某一篇文章中http://www.jb51.net/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发现,真的反应很慢,数据量很大的情况下使用Ajax去实现真的不合适,于是,我又写了一个使用Jquery来实现方法. 废话不多说,上图上代码: 引用方式: 复制代码代码如下: <body style="background-color: White;"> <form id="for
jQuery EasyUI API 中文文档搜索框

用$.fn.searchbox.defaults重写defaults.依赖 menubutton 用法示例创建SearchBox 1. 从标记创建.把 'easyui-searchbox' 类加入到<input/>标记. 复制代码代码如下: <script type="text/javascript"> function qq(value,name){ alert(value+":"+name) } </script> <
Jquery带搜索框的下拉菜单

1.样式引用: 复制代码代码如下: <link rel="stylesheet" href="~/Js/Ddl_Chosen/chosen.css" /> 2.由于应用了Jquery,所以引用Jquery.(下载地址) 复制代码代码如下: <script src="<%= ResolveUrl("~/Js/Jquery.js")%>" type="text/javascript&qu
基于jquery的仿百度搜索框效果代码

先看看整个的效果图:图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: 复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DT
jQuery 插件仿百度搜索框智能提示(带Value值)

因公司需要做一个仿百度搜索框,并且带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(), //提示框的宽度默认跟
CSS3,HTML5和jQuery搜索框集锦

添加搜素框或网站搜索功能是为了方便用户能够轻松.快捷地找到自己需要的信息.因此,在网站中添加一个搜索框已经成为网页设计的主流元素之一.添加一个搜索框到网站会使得用户界面更加友好,也能帮助用户轻松愉快地浏览. 脉动的CSS3输入搜索框输入搜索框带有边框和类似脉冲的阴影跳动. 纯CSS的建议搜索框这是一个使用纯CSS构建扩展建议搜索框的简单教程. CSS的扩大搜索框扩大搜索框是一个点击或输入东西时会变宽的一个简单搜索框. 使用CSS转换扩大搜索栏我们将利用CSS转换扩展了的搜索栏.搜索栏最初
jquery实现搜索框常见效果的方法

本文实例讲述了jquery实现搜索框常见效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery搜索框效果</title> <script type="text/javascript
jquery+php实现搜索框自动提示

今天突然想给本站做个搜索页面,这样用户可以通过搜索来找到自己喜欢的内容,也避免了在海量信息中手动查找资源的麻烦,我的目标和百度首页的效果类似,当用户输入要搜索的文字时,我们在下方给出相关的十条信息,如果用户要找的就是这十条信息内的某一条,那么简单,直接点击就可在新页面中打开页面,主要就是想更人性化一点,让用户使用起来更方便. 先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么样的效果! jquery+php实现搜索框自动提示下面先主要讲解原理: 在search.htm
jQuery实现的类似淘宝网站搜索框样式代码分享

运行效果图: ----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的类似淘宝网站搜索框样式代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo
jquery搜索框效果实现方法

本文实例讲述了jquery搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <html> <head> <title>jquery:搜索框效果</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascri

jquery实现非叠加式的搜索框提示效果

相关推荐

随机推荐