精华内容
下载资源
问答
  • 搜索框功能实现

    万次阅读 2020-09-05 15:39:07
    搜索框功能实现 在开发搜索框过程中需要实现两个小功能,技术栈是nuxt.js 功能描述如下 功能1:当鼠标聚焦的时候搜索框下方出现热门推荐,如下图所示 功能2:当输入搜索内容的时候,热门推荐消失,出现搜索结果,...

    在这里插入图片描述

    搜索框功能实现
    在开发搜索框过程中需要实现两个小功能,技术栈是nuxt.js  功能描述如下
    
    功能1:当鼠标聚焦的时候搜索框下方出现热门推荐,如下图所示

    在这里插入图片描述

    功能2:当输入搜索内容的时候,热门推荐消失,出现搜索结果,也就是功能1和功能2为互斥性

    在这里插入图片描述

    HTML代码
    <el-col :span= "12" class="center">
     <div class="wrapper">
              <el-input
                v-model="search"
                placeholder="搜索商家或地点"
                @input="input"
                @focus="focus"
                @blur="blur"
              ></el-input>
              <button class="el-button el-button--primary">
                <i class="el-icon-search" />
              </button>
              <dl v-if="isHotPlace" class="hotPlace">
                <dt>热门搜索</dt>
                <dd v-for="(item, index) in hotPlace" :key="index" @click="select">{{item}}</dd>
              </dl>
              <dl v-if="isSearchList" class="searchList">
                <dd v-for="(item, index) in searchList" :key="index" @click="selectList">{{item}}</dd>
              </dl>
            </div>
    <el-col>
    
    css样式代码
     .wrapper {
                    margin-top: 16px;
                    border: 1px solid #13D1BE;
                    border-radius: 4px;
                    width: 552px;
                    box-sizing: border-box;
                    position: relative;
                    white-space: nowrap;
                    .el-input {
                        width: 462px;
                    }
                    input {
                        border: none;
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                    .el-button {
                        width: 88px;
                        border: none;
                        background: #13D1BE;
                        font-size: 16px;
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                        vertical-align: -1px;
                        i {
                            font-weight: bold;
                        }
                    }
                    .hotPlace,
                    .searchList {
                        position: absolute;
                        top: 41px;
                        left: 0;
                        background: #fff;
                        padding: 10px;
                        font-size: 12px;
                        width: 462px;
                        box-sizing: border-box;
                        border: 1px solid #E5E5E5;
                        border-top: none;
                        z-index: 999;
                        box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .1);
                        border-bottom-left-radius: 4px;
                        border-bottom-right-radius: 4px;
                        dt {
                            color: #999;
                            font-weight: bold;
                        }
                        dd {
                            display: inline-block;
                            color: #666;
                            margin-right: 10px;
                            margin-bottom: 3px;
                            margin-top: 5px;
                            cursor: pointer;
                            &:hover {
                                background: #F8F8F8;
                                color: #31BBAC;
                            }
                        }
                        &.searchList {
                            padding: 0;
                            margin: 0;
                            dd {
                                margin: 0;
                                padding: 3px 10px;
                                display: block;
                                line-height: 1.6;
                            }
                        }
                    }
                }
                .suggest {
                    width: 552px;
                    overflow: hidden;
                    padding-left: 16px;
                    line-height: 1;
                    margin-top: 8px;
                    height: 14px;
                    a {
                        color: #999;
                        margin-right: 10px;
                        margin-bottom: 3px;
                        display: inline-block;
                        font-size: 12px;
                        &:hover {
                            color: #31BBAC;
                        }
                    }
                }
                .nav {
                    list-style: none;
                    display: flex;
                    margin-top: 25px;
                    li {
                        font-weight: 700;
                        font-size: 16px;
                        margin: 0 20px;
                        cursor: pointer;
                        position: relative;
                        a {
                            color: #222;
                            &:hover {
                                color: #f04d4e;
                            }
                            &.takeout:hover {
                                color: #fbc700;
                            }
                            &.apartment:hover {
                                color: #FDC411;
                            }
                            &.business:hover {
                                color: #31BBAC;
                            }
                        }
                    }
                }
            }
    
    js代码
    export default {
      name: 'Header',
      components: {},
      data() {
        return {
          isFocus: false,
          search: '',
          hotPlace: [
            '火锅',
            '麻辣烫',
            '鲍鱼',
            '熊掌',
            '鱼翅',
            '鱼香肉丝',
            '梅菜扣肉',
            '糖醋里脊',
            '狮子头',
          ],
          searchList: [
            '鱼香肉丝',
            '嘉和一品',
            '尖椒肉丝',
            '打卤面',
            '葱花鸡蛋',
            '糖醋排骨',
          ],
        }
      },
      computed: {
        isHotPlace() {
          return !this.search && this.isFocus
        },
        isSearchList() {
          return this.search && this.isFocus
        },
      },
      mounted() {},
    
      methods: {
        focus() {
          this.isFocus = true
        },
        blur() {
          setTimeout(() => {
            this.isFocus = false
          }, 200)
        },
        select(e) {
          this.search = e.target.innerHTML
        },
        selectList(e) {
          this.search = e.target.innerHTML
        },
      },
    }
    
    

    希望可以帮助到大家,谢谢观看,如有不足,敬请指教

    展开全文
  • [微信小程序]搜索功能实现,搜索框样式

    万次阅读 多人点赞 2017-11-28 11:21:11
    微信小程序开发交流qq群 173683895 ...一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view cla...

    微信小程序开发交流qq群   173683895

       承接微信小程序开发。扫码加微信。

    正文:

    上效果图:

    一:搜索框功能实现

    1.在首页做一个搜索框的样式并实现跳转到搜索页面

     

      <view class='page_row' bindtap="suo">
        <view class="search">
          <view class="df search_arr">
            <icon class="searchcion" size='20' type='search'></icon>
            <input class="" disabled placeholder="请输入关键字" value="{{searchValue}}"/>
          </view>
        </view>
        <view class='sousuo'>搜索</view>
      </view>

     

    .search{
      width: 80%;
    }
    .search_arr {
      border: 1px solid #d0d0d0;
      border-radius: 10rpx;
      margin-left: 20rpx;
    }
    .search_arr input{
      margin-left: 60rpx;
      height: 60rpx;
      border-radius: 5px;
    }
    .bc_text {
      line-height: 68rpx;
      height: 68rpx;
      margin-top: 34rpx;
    }
    
    .sousuo {
      margin-left: 15rpx;
      width: 15%;
      line-height: 150%;
      text-align: center;
      border: 1px solid #d0d0d0;
      border-radius: 10rpx;
    }
    .page_row{
      display: flex;
      flex-direction: row
    }
    .searchcion {
      margin: 10rpx 10rpx 10rpx 10rpx;
      position: absolute;
      left:25rpx;
      z-index: 2;
      width: 20px;
      height: 20px;
      text-align: center;
    }

    js.点击跳转到搜索的页面

     

     

     

     

      suo: function (e) {
        wx.navigateTo({
          url: '../search/search',
        })
      },


    2.搜索页面实现搜索功能

     

     

    <!--pages/search/search.wxml-->
    <view class="search page_row">
      <input class="df_1" placeholder="请输入你有搜索的内容" value="{{searchValue}}" bindinput="searchValueInput" />
      <button bindtap="suo" data-id='1'>
        媒婆
      </button>
      <button bindtap="suo" data-id='2'>
        单身
      </button>
    </view>
    <view class="search_no" wx:if="{{!centent_Show}}">
      <text>很抱歉,没有找到您要搜索的资料/(ㄒoㄒ)/~~</text>
    </view>
    <import src="../index/card/card.wxml" />
    <template is="nanshen_card" data="{{nanshen_card,img}}" />

     

     

     

    var app = getApp();
    var searchValue =''
    // pages/search/search.js
    Page({
      data: {
        centent_Show: true,
        searchValue: '',
        img: '',
        nanshen_card:''
      },
      onLoad: function () {
      },
      searchValueInput: function (e) {
        var value = e.detail.value;
        this.setData({
          searchValue: value,
        });
        if (!value && this.data.productData.length == 0) {
          this.setData({
            centent_Show: false,
          });
        }
      },
      suo:function(e){
        var id= e.currentTarget.dataset.id
        var program_id = app.program_id;
        var that = this;
        wx.request({
          url: 'aaa.php',//这里填写后台给你的搜索接口
          method: 'post',
          data: { str: that.data.searchValue, program_id: program_id, style:id },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          success: function (res) {
            if(res.data.length ==0){
              that.setData({
                centent_Show: false,
              });
            }
            that.setData({
              nanshen_card: res.data,
            });
          },
          fail: function (e) {
            wx.showToast({
              title: '网络异常!',
              duration: 2000
            });
          },
        });
      }
    });

     

     

     

     

     

     

     
    /* pages/search/search.wxss */
    @import "../index/card/card";
    .searchcion{
        width: 24px;
        height: 24px;
        text-align: center;
        margin-top: 5rpx
    }
    .search{
        padding: 1% 3%;
        background: #D0D0D0;
    }
    .search input{
        width: 85%;
        border-radius: 5px;
        background: #fff;
        border: none;
        font-size: 12px;
        padding:1% 2.5%;
        margin-right: 5px;
        }
    .search button{
        line-height:30px;
    
        text-align: center;
        border: none;
        font-size: 28rpx;
        background: white
    }

     

    php实现代码

    <?php
        header("Content-Type:text/html;charset=utf8"); 
    	header("Access-Control-Allow-Origin: *"); //解决跨域
    	header('Access-Control-Allow-Methods:POST');// 响应类型  
    	header('Access-Control-Allow-Headers:*'); // 响应头设置 
        $link=mysql_connect("localhost","root","root"); 
        mysql_select_db("shige", $link); //选择数据库
        mysql_query("SET NAMES utf8");//解决中文乱码问题
        
    	$str = $_POST['str'];
    	
    	
    	//SQL查询语句 SELECT * FROM 表名  LIKE 模糊搜索的变量
    	$q="SELECT * FROM curriculum WHERE CONCAT_WS('',school,college,major,mtype,title) LIKE '%{$str}%'";
    	
        $rs = mysql_query($q); //获取数据集
        if(!$rs){die("数据库没有数据!");}
    	
    	//循环读取数据并存入数组对象
        $dlogs;$i=0;
        while($row=mysql_fetch_array($rs))
        {
    			    $dlog['title']= $row["title"];
    			    $dlog['mtype']= $row["mtype"];
    				$dlog['name']= $row["name"];
    				$dlog['mfile']= $row["mfile"];
    				$dlog['myear']= $row["myear"];
    				$dlog['school']= $row["school"];
    				$dlog['college']= $row["college"];
    				$dlog['major']= $row["major"];
    				$dlog['time']= $row["time"];
            $dlogs[$i++]=$dlog;
        }
    	
    	
        //以json格式返回html页面
        echo urldecode(json_encode($dlogs));
    ?>

     

     

     

     

     

    展开全文
  • VUE实现搜索框搜索功能

    万次阅读 2019-08-28 18:12:07
    HTML部分:添加搜索框 JavaScript部分: PS:orderlist是订单列表的数据。 参考链接: vue实现搜索功能 vue如何实现搜索功能 以及逻辑 (代码与笔记都粗劣,请各位大佬指点一二) ...

    实现效果如下:

    HTML部分:添加搜索框

    JavaScript部分:

    PS:orderlist是订单列表的数据。

     

    参考链接:

    (代码与笔记都粗劣,请各位大佬指点一二)

    展开全文
  • jquery 搜索框功能实现

    千次阅读 2017-09-04 09:24:12
     jquery搜索框功能的实现, 1.输入关键字,展示匹配的下拉列表 2.选择匹配的项后查出相关内容  首先分析功能实现,输入关键字马上显示匹配项列表,实现该功能输入框需要绑定"input"事件,然后向后台发送异步请求,...

    http://www.cnblogs.com/linjiqin/archive/2011/03/18/1988464.html  


     jquery搜索框功能的实现,

    1.输入关键字,展示匹配的下拉列表


    2.选择匹配的项后查出相关内容

      首先分析功能实现,输入关键字马上显示匹配项列表,实现该功能输入框需要绑定"input"事件,然后向后台发送异步请求,将数据展示在页面上。使用鼠标或上下键选择匹配项,点击搜索或"Enter"键后搜索具体结果。这里要用到两个异步请求,第一个请求匹配项,第二个请求搜索结果。键盘,鼠标以及输入框的事件都要监听到


    http://www.cnblogs.com/linjiqin/archive/2011/03/18/1988464.html

    展开全文
  • jquery实现搜索框功能

    千次阅读 2018-07-23 10:55:12
    搜索框实现搜索一个ul列表中的指定关键词的li。 html代码: &lt;ul class="todo-content"&gt; &lt;li class="todo-ltem"&gt; &lt;div class="todo-tip"&...
  • HTML实现搜索框

    千次阅读 2020-03-05 23:07:21
    HTML实现搜索框 菜鸟教程的搜索框 经过这几天的学习,想实现一下菜鸟教程的搜索框,一看怎么简单的搜索框,我看源码应该很好实现吧,自信地翻开源码,为什么会有两个input标签而页面上却显示一个搜索框,你们知道...
  • 搜索框功能实现

    千次阅读 2018-08-15 00:38:21
    6.单个删除功能 其实是删除点击时 对应的 localeStorger 中的数据,那么在渲染模板时 需要设置 自定义属性 如 data-id=“value.id”, 则取值时为 index= $(this).data(“id”) ; 在 点击事件中 { arr....
  • JQuery实现搜索框功能

    千次阅读 2018-06-20 15:38:33
    就能实现text:表示在文本框要显示的内容html代码:&lt;body&gt;  &lt;form action="" method="post"&gt;  &lt;input type="text" placeholder="请输入&...
  • 百度搜索框提示功能简单实现

    万次阅读 2015-12-01 17:24:42
    搜索框中输入的时候会有百度的只能提示。 代码也很简单,整个html只有24行,关键的代码不超过10行。
  • ajax实现网站搜索框功能

    千次阅读 2017-05-13 19:48:23
    <!DOCTYPE html> <html> function showHint(str) { var xmlhttp; if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if
  • 做项目的时候,老板让我自己封装一个搜索功能,就类似于百度这种 输入了字符之后,就可以自动搜索数据,而且还会出现一个下拉框供用户选择,我觉得我老板有问题,网上有这么多插件,不仅封装好了,性能也做了优化...
  • HTML+JavaScript简单搜索功能实现

    千次阅读 2019-07-09 08:09:31
    DOCTYPE html> <html> <head> <title>百度一下</title> <meta charset="utf-8" /> </head> <body> <div class="panel-body" style="padding: 0px ...
  • HTML5 JQuery 实现搜索匹配功能

    千次阅读 多人点赞 2019-04-06 22:07:53
    HTML5 JQuery 实现搜索匹配功能 效果动态图: 源代码: all.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 JS实现搜索匹配功能-jq22.com</title> ...
  • HTML百度搜索框实现(附源码带注释)

    万次阅读 多人点赞 2019-05-11 21:55:44
    1.百度类效果 ...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
  • vue.js实现搜索框搜索功能

    千次阅读 2020-08-26 22:45:27
    1、搜索框: (1)、template部分 <template> <div> <div class="search"> <input v-model="keyword" type="text" class="searchInput" placeholder="搜索城市 "> </div> </div...
  • 实现下拉框和搜索框一体功能

    千次阅读 2017-03-09 15:31:45
    页面中实现下拉框和搜索框一体功能 html> html> head lang="en"> meta charset="UTF-8"> title>实现下拉框和搜索框一体功能title> head> body> h4>这个既可以做input 又可以使用 selecth4> div style="position: ...
  • HTML+CSS实现搜索框

    2021-02-27 21:49:33
    HTML+CSS实现搜索框 首先: <div class="box"> <input type="text" class="input" placeholder="请输入商品"> <!--placeholder是文本框中的提示文字--> <input type="button" value="搜索" ...
  • PHP+html实现搜索功能

    万次阅读 2018-09-29 11:16:01
    问题1、在使用PHP语言做搜索功能...1、搜索框效果图 2、搜索框代码 &lt;div class="device_search" &gt; &lt;form action="&lt;?php echo Yii::app()-&gt;createUrl('tipe...
  • 经过前面对vue的一些基础的知识点的学习,我们知道了利用 v-for 指令将 data 中的数组的数据全部渲染到页面上是如何实现的了,但是如此不加以选择的全部将数据加载到页面有时候不符合我们功能的需求,像搜索功能这样...
  • [HTML] 百度搜索框的基本实现 源码

    万次阅读 2019-03-16 01:19:37
    在搭建个人网站过程中,我们可能想要在页面加入搜索栏以增加网页实用性,本文主要介绍如何在页面加入百度搜索引擎。
  • jquery实现搜索框历史搜索记录功能

    千次阅读 2017-03-14 16:55:31
    html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> input type="text" id="inp"> button type="button" id="btn">搜索button> br> div id="keyname">div>
  • html - 实现搜索框案例

    千次阅读 2020-06-13 23:47:21
    源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>搜索</title> <style type="text/css"> body,ul,li{ margin: 0; padding: 0;
  • phpcms搜索功能实现

    千次阅读 2018-04-27 17:53:49
    最近在做一个门户网站,用到了phpcms的搜索功能,之前一直想要实现这方面功能,但苦于静不下来心研究phpcms的实现原理,今天通过这个博客记录下我分析的过程,网上的资料相对比较零散,看的总是云里雾里的,这里做一...
  • 类似于百度的搜索框,当输入一个字或词的时候,自动检索有没有该内容,有的话把输入的关键字标红 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
  • HTML实现百度搜索功能

    千次阅读 2020-07-10 14:50:21
    代码 <img src="baidu.gif" width="300px"/> ...border-radius: 10px"/> </form> 图片 文本框输入内容,点击 “百度一下” 即可使用百度的后台搜索内容。 其中form表单的action和第一个input的name是关键。
  • 搜索框自动补全(模糊匹配)功能实现

    千次阅读 2020-03-02 20:23:26
    本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考 首先贴出的是JQuery Ui 的自动补全插件部分的代码,后面的功能都是在其...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 183,841
精华内容 73,536
关键字:

html搜索框功能实现