主页 > 知识库 > asp.net使用jquery实现搜索框默认提示功能

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

热门标签:电销业务 人工智能 国美全国运营中心 网站排名优化 科大讯飞语音识别系统 客户服务 电商新玩法 百度AI接口

文本框中创建默认文本提示

通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索。

当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失。

当文本框没有任何值并失去焦点,文本框内容会重新生成默认提示。

为了实现上面的需求,代码如下:

复制代码 代码如下:

%@ 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>

您可能感兴趣的文章:
  • 让input框实现类似百度的搜索提示(基于jquery事件监听)
  • Jquery实现搜索框提示功能示例代码
  • jquery+php实现搜索框自动提示
  • jquery 模拟类搜索框自动完成搜索提示功能(改进)
  • jQuery 插件仿百度搜索框智能提示(带Value值)
  • 利用JQuery为搜索栏增加tag提示
  • Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
  • jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
  • jquery实现非叠加式的搜索框提示效果
  • 基于jQueryUI和Corethink实现百度的搜索提示功能
  • jQuery实现模拟搜索引擎的智能提示功能简单示例

标签:枣庄 POS机 拉萨 咸宁 益阳 南平 攀枝花 厦门

巨人网络通讯声明:本文标题《asp.net使用jquery实现搜索框默认提示功能》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266