asp.net使用jquery实现搜索框默认提示功能

 这篇文章主要介绍了asp.net使用jquery实现搜索框默认提示功能,大家参考使用吧

文本框中创建默认文本提示
 
通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索。
 
当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失。
 
当文本框没有任何值并失去焦点,文本框内容会重新生成默认提示。
 
为了实现上面的需求,代码如下:
 
代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.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">
    <title></title>
    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <link href="Base.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .text
        {
            border: #0a8fda solid 1px;
            color: #cccccc;
            font-style:italic;
            background: #fff url(img/input.gif);
            padding: 5px;
        }
        .text-focus
        {
            border: solid 1px #f50;
            background: #fff url(img/input.gif);
            padding: 5px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var txtSearch = $("#<%=txtSearch.ClientID%>");
 
            $("#txtSearch").focus(function () {
                if (txtSearch.val() == this.title) {
                    txtSearch.val("");
 
                    this.className = "text-focus";
                }
            });
 
            $("#txtSearch").blur(function () {
 
                if (txtSearch.val() == "") {
                    txtSearch.val(this.title);
                    this.className = "text";
                }
            });
            txtSearch.blur();
        });
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="margin: 100px auto; width: 400px; height: 80px;border: solid 1px #0a8fda;">
        <p style="text-align:center;">
            <asp:TextBox ID="txtSearch" runat="server" Width="200px" class="text" ToolTip="请输入搜索的关键字"></asp:TextBox>
            <asp:Button ID="btnSearch" runat="server" Text="搜索" class="button blue" />
        </p>
    </div>
    </form>
</body>
</html>

时间: 2024-12-31 15:30:02

asp.net使用jquery实现搜索框默认提示功能的相关文章

Javascript实现类似google搜索框输入提示功能

本文主要内容:p居中.层定位.类google输入提示示例,在线qq查询,自动刷新 类似google搜索框输入提示功能的示例代码,采用层定位,居中对齐,input 的输入改变.失去焦点.获得焦点事件......解决了onblur和onclick同时被调用的失效问题.

显示-仿百度搜索框智能提示功能,在搜索关键字变色的功能里,输入数字会有问题

问题描述 仿百度搜索框智能提示功能,在搜索关键字变色的功能里,输入数字会有问题 仿百度搜索框智能提示功能,在搜索关键字变色的功能里,输入数字会有问题,如果数组中含有(1)数字,当文本框第一次按下1这个数字来搜索时,会出现问题,例如:数组中有2123,在文本框输入1,结果会显示2123[[[1]]]:如果数组中有两条或以上含有(1)数字的,则搜索结果第一行会这样显示,之后的都正常显示.输入","时也有问题,会出现一个标签字符串,原因是因为都","来分割的. 贴上我的搜

Servlet+Ajax实现智能搜索框智能提示功能

利用无刷新技术智能变换搜索框的提示,同百度搜索 效果图 其基本原理: 1.给搜索框编写js绑定事件onkeyup(键盘输入时).onfocus(当鼠标点击搜索框外的时候清空提示) 2.首先获得用户输入.之后将获得的数据传给服务器,服务器将数据传给后台,后台获取服务器传来的数据进行处理,得到关联数据,向前端返回json格式,前端通过回调函数,将返回来的json解析成文本,将文本传输到搜索框下方的展示窗 如下为支持json的jar包 search.jsp <%@ page language="

Jquery Easyui搜索框组件SearchBox使用详解(19)_jquery

本文实例为大家分享了Jquery Easyui搜索框组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <input id="ss" class="easyui-searchbox" style="width:300px" data-options="prompt:'Please Input Value',menu:'#box'"> </input> <div id="b

标签-仿百度搜索框只能提示上下键移动的功能效果 js+jquery

问题描述 仿百度搜索框只能提示上下键移动的功能效果 js+jquery 搜索结果不能上下移动,只能按一下,按第二下的时候结果只剩下一个了,currentSelIndex总是为0 ,currentSelIndex是记录 标签id的变量. 首先,我输入一个字符,匹配到的结果会在文本框下方显示出来.因为代码都是写在搜索框的onkeyup ()事件中的,每按一下键盘都会触发该事件,当我第一次按(下)键的时候,相应的会把选中的文本赋 给搜索框,所以按第二次的时候又会重新触发该事件,搜索条件变成了第一次按(

jquery+php实现搜索框自动提示_jquery

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

jQuery实现设置、移除文本框默认值功能_jquery

jQuery实现的文本框默认值感应鼠标动作: 本章节介绍一下如何利用jQuery实现文本框默认值感应鼠标动作的功能. 比如当文本框获取鼠标焦点的时候,默认值会被清空,当文本框没有输入内容,鼠标焦点离开的时候,又会恢复到默认值. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title></title> <scri

jquery实现搜索框常见效果的方法_jquery

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

利用jsonp跨域调用百度js实现搜索框智能提示_javascript技巧

项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js.  ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的 在chrome的调试窗口下看看百度搜索发出的请求.当输入关键字"a",请求如图:  用firebug看下请求的参数,如图: 请求方式:get请求请求参数:wd明显是要搜索的关键字:cb是请