input框中如何添加搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="Font/demo-files/demo.css"/>
    <style>
        /*1.此处应我的项目需要,加了些特别的设置,如字体、背景色等,按需添加;
            2.内层input不加边框,看起来效果会自然一点,所以外层div设置了边框和圆角*/
        .box{
            margin: 50px auto;
            background-color: #ffffff;
            border: 1px solid #eeeeee;
            border-radius: 6px;
            font-size: 0.52rem;
            text-align: center;
            color: #d2d2d2;
        }
        /*label标签样式 放在.box下,不至于影响其他的label
              采取绝对定位,位置根据需求确定*/
        .box label{
            z-index: 2;
            position: absolute;
            left: 15%;
            margin-left: -8%;
            color: #B2B2B2;
            top: 4.8rem;
            font-weight: normal;
        }
        /**
          *input标签样式
          *宽度适应外层div
          *隐藏边框
          *这里有个小技巧,height与line-height值相等,可保证文字垂直居中;但我发现文字比图标略偏下,进行了微调;
        */
        .box input{
            text-indent: 10px;
            height: 2.04rem;
            line-height: 2.04rem;
            width: 100%;
            border: none;
            outline: none;
        }
        /**
          *图标样式
          *绝对定位,自定义颜色
        */
        .box i{
            position: absolute;
            top: 4.8rem;
            left: 5%;
            /*margin-left: -15%;*/
            color: #B2B2B2;
        }

    </style>//具体样式自行按照情况调节
</head>
<body>

    <div class="box">
        <label for="q" id="q_label">请输入关键字</label>
        <input id="q"  type="text">
        <i class="icon icon-search" id="q_i"></i>
    </div>

     <script src="js/libs/jquery.3.1.1.js"></script>
    <script>
        // js判断input输入框中是否有值,以此来判断是否隐藏默认提示信息
        //使用keyup事件
        $(function() {
            $(‘#q‘).on(‘keyup‘,function() {
                var len = document.getElementById(‘q‘).value;
                if(len == ‘‘){
                    $(‘#q_label‘).show();
                    $(‘#q_i‘).show();
                }else{
                    $(‘#q_label‘).hide();
                    $(‘#q_i‘).hide();
                }
            });
        })
    </script>
</body>
</html>

再做项目的时候经常遇到的问题,以前只是做静态页面,现在要加效果了,所以百度了一下,觉得特别有帮助到我。所以跟你们分享一下

时间: 06-28

input框中如何添加搜索的相关文章

浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自动弹出搜索提示

对于通过用户输入关键词实现自动弹出相关搜索结果,这里本人给两种解决方案,用于两种不同的情形. 常见方法是在数据库里建一个用户搜索关系表,然后通过用户搜索框输入的关键字异步调用数据表中的相关数据,显示在一个隐藏div中. 第二种方式也就是我现在着重讨论的方式,适用于单个用户,基于此用户以往的搜索数据来实现搜索提示功能.技术关键是记录下用户的以往搜索数据,写入cookie,然后页面从用户本机cookie调用数据. ok,下面进入正题.本文主要讲实现步骤,代码可根据自己实际需要更改. 一,如何写入co

input框中自动展示当前日期 yyyy/mm/dd

直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input框中自动展示当前日期</title> </head> <body> <input type="text" id="input"> <script>

税号输入框 将input框中的输入自动转化成半角大写

这两天出了这么一个需求,输入税号的时候,需要自动将其转化为半角大写,并且阻止标点符号中文汉字的输入.(下面会有:全半角转换.文本框选中.光标位置判断.设置光标位置 这些内容) 然后我就开始了慢慢查找资料之路. 首先查了全半角的区别以及如何转化. var str = "中文;:a"; for (var i = 0; i < str.length; i++) { if (str[i].match(/[\u0000-\u00ff]/)) { console.log("半角字符

搜索框中“请输入搜索keyword”

$(function(){    $("#ctl00_txtKey").val("请输入搜索keyword").addClass("search")    .blur(function(){        $(this).removeClass('highligth');        if($(this).val()==""){            $("#ctl00_txtKey").val(&quo

input框添加图标,代替submit

input框添加图标,代替submit的意思是form表单中,将常规的提交按钮更改成图标,但是图标具有提交的功能 首先,我们先探讨下如何获取图标,我是从阿里巴巴图标库中下载的,因为改版的原因,网上的一些方法并不能保证下载下来完整的代码,所以我来贴一下具体的图片,说明下如何下载代码 进入官网,搜索需要的内容,加入购物车,下载源码步骤不同就在后面 点击添加至项目,选择下载至本地 下载完成后是一个压缩包,解压后,将红色框的字体文件添加到font文件夹,因为大家可以轻而易举的发现,这是四种不同的字体编码

Android中通过ActionBar为标题栏添加搜索以及分享视窗

在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果.ActionBar的主要目的是: 1.提供一个用于识别应用程序的标示和用户的位置的专用空间. 2.在不同的应用程序之间提供一致的导航和视觉体验. 3.突出Activity的关键操作(如"搜索"."创建"."共享"等),并且在可预见的方法内给用户提供快捷的访问.

101在检索框中添加一个书签按钮(扩展知识:在检索框中添加一个范围条)

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UITableViewController<UISearchBarDelegate> 4 @property (strong, nonatomic) UISearchBar *searchBar; 5 @property (strong, nonatomic) NSMutableArray *mArrDataSourceO

CSS中输入框(搜索框)的实现技巧

我们都知道在一般网站上出现的输入框里都会有各种各样的图标.文字等样式.那么如何实现input输入框中插入图标呢?一般的方法是:用定位将需要的图标用定位的方式实现,这种方式虽然可以实现,但是如果我们需要插入的不止一个图标呢?那还用定位的话,工作量可能就要加大许多了.下面小编推荐一个方法,列表法:将整个input输入框看作一个列表ul,而其中的各种样式则可以看作单个项目li.将原本input输入框的边框样式设置为列表ul的边框样式就可实现input输入框的边框样式,而各个图标之类的样式可直接插入li

类似input框内最右边添加图标,有清空功能

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- js引入 --> <script type="text/javascript" src="../js/jquery-1.1