V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ggp1ot2
V2EX  ›  程序员

前端求问,如何实现在当前页面展示搜索结果?

  •  
  •   ggp1ot2 · 2022-08-26 10:55:02 +08:00 · 2831 次点击
    这是一个创建于 805 天前的主题,其中的信息可能已经有所发展或是发生改变。

    书接上文,我是后端但是现在被抓去写一个文档搜索网站

    感谢各位 V 友提供的思路,现在基本写好了页面,但是核心逻辑我还没有想清楚。

    总结一下就是 [当我点击搜索按钮时,在当前页面下,搜索栏上移并固定,并且在当前页面展示搜索结果]

    不知道有没有大神可以提供点思路或者我学习的方向

    关键问题就是如何在当前页面实现这样的功能,或者说鼠标点击搜索那一刻需要执行的操作怎么实现

    是否是基于 Ajax 的还是基于什么前端的技术?我该去哪找到类似的教程去学习。

    32 条回复    2022-08-31 16:21:33 +08:00
    lcy630409
        1
    lcy630409  
       2022-08-26 10:57:23 +08:00
    ........
    jquery 一把梭
    ggp1ot2
        2
    ggp1ot2  
    OP
       2022-08-26 10:58:39 +08:00
    @lcy630409 #1 即 Jquery 可以全部实现?
    lcy630409
        3
    lcy630409  
       2022-08-26 11:00:59 +08:00
    前端页面可以
    先写好列表页的 div 和 css ,输入框 通过 jquery 读取数据 post 到后台获取列表过来,然后 each 遍历一边 输出结果到列表页的 div 里去

    jquery 教程 https://www.runoob.com/jquery/jquery-tutorial.html


    之前没附带学 div+css 么 后端一般都会一些的
    fengci
        4
    fengci  
       2022-08-26 11:01:23 +08:00
    前端的关键字是:联想搜索, 后端的关键字:ES 联想搜索,后端解决方案很多看你习惯了
    hua123s
        5
    hua123s  
       2022-08-26 11:02:27 +08:00
    能用别人的 sass ? docsearch 可以考虑下,可以看下我的网站有效果 https://powerfulyang.com/
    stardustree
        6
    stardustree  
       2022-08-26 11:03:10 +08:00   ❤️ 1
    怼产品,啥破需求,点一下输入框输入焦点的位置还移动了,容易让人眼花。打回重新设计。
    Slshaolong
        7
    Slshaolong  
       2022-08-26 11:06:26 +08:00 via Android
    写 js 可以 用 js 判断 就好了 或者你试试新建一个页面
    devswork
        8
    devswork  
       2022-08-26 11:08:16 +08:00
    jquery ,下面的 list div 给个 display=none ,然后点击搜索请求后台数据,得到数据后进行循环拼接 DOM 拼接到 list div 里面去,然后把 list div display 属性去除了,他就显示列表了,上面的搜索框上移的话,就是 margin-top:50px,有数据后 margin-top:10px.
    如果用 vue 就简单很多了
    cmdOptionKana
        9
    cmdOptionKana  
       2022-08-26 11:09:09 +08:00
    既然是点击按钮触发的,直接在事件里写代码就可以了呀。

    1. 给搜索框加了个 <a href='#search-input'>, 点击搜索时跳转到该锚点,自然就顶置了
    2. 直接在下方显示搜索结果即可

    如果想好看一点,可以写 css 让 搜索框固定在顶部。
    cmdOptionKana
        10
    cmdOptionKana  
       2022-08-26 11:10:07 +08:00
    写错了,是加个 id='#search-input'
    ggp1ot2
        11
    ggp1ot2  
    OP
       2022-08-26 11:10:29 +08:00
    @lcy630409 #3 div+CSS 这套还是会一些的,不然也不至于让我来弄,不过都是写一些静态页面,这种需要交互的还没有写过😁
    ggp1ot2
        12
    ggp1ot2  
    OP
       2022-08-26 11:10:48 +08:00
    @stardustree #6 在打了
    lcy630409
        13
    lcy630409  
       2022-08-26 11:14:02 +08:00
    @ggp1ot2
    没有啥高大上动态效果要求,就直接 jquery 吧 最简单省事,看下 jquery 的 "jQuery 选择器" “jQuery - 添加元素” “jQuery 遍历”“AJAX get() 和 post() 方法” 就差不多了
    如果 嫌遍历麻烦,就后端拼接 div 直接给页面添到 div 里去就行
    yaphets666
        14
    yaphets666  
       2022-08-26 13:55:19 +08:00
    很简单,动态绑定 class 就行,但是好像你不懂前端,完全不会的话,需要系统学习。
    ggp1ot2
        15
    ggp1ot2  
    OP
       2022-08-26 14:58:24 +08:00
    @yaphets666 #14 只会一点点,就是可以基于现有的网页魔改,从 0 写写不出来
    qzhai
        16
    qzhai  
       2022-08-26 15:10:00 +08:00
    jquery 下载不太合适 太重了,es 的新特性大部分浏览器也都支持的。
    思路很简单。
    css + js 实现。
    首先用 css 写一个搜索结果页。然后基于一个 classname 把结果隐藏 & 搜索框 下移。 这里建议用 flex 和 transform 来实现,因为做动画用 c3 性能是最好的。

    上来默认 隐藏搜索结果。输入内容后 ajax 填充结果 在 把 classname 换掉 过渡到结果页即可。
    yaphets666
        17
    yaphets666  
       2022-08-26 15:20:36 +08:00
    @ggp1ot2 点击事件中处理两件事,1:搜索框 position 的 top 赋值,试输入框上移。2:appendChild ,插入显示内容。就这么简单。
    ggp1ot2
        18
    ggp1ot2  
    OP
       2022-08-26 15:22:27 +08:00
    @yaphets666 #17 感谢感谢,这个思路就完全看懂了
    stoluoyu
        19
    stoluoyu  
       2022-08-26 16:16:36 +08:00
    本来想给你写个 demo 讲下思路的,看了你前一个帖子,其实你直接可以用现成的东西,比如 vuepress 这种,看文档就行了,对前端要求不太高(自我感觉)。
    ggp1ot2
        20
    ggp1ot2  
    OP
       2022-08-26 16:37:28 +08:00
    @stoluoyu #19 大神!能否提供下思路。。其实我有考虑过使用 vue 的,只不过我没有使用过,在我印象里面,就是一个写前端的框架,是一个大家伙,感觉我的学习成本会很高。。

    不知道您说的 vuepress 对前端要求不高是指什么?

    我现在进度就是,找了一个 html+css 写的搜索页面(有搜索按钮,但是没有设置任何的点击反应)

    目前就卡在这里,不知道如何基于这样的一个静态页面去修改。换句话说,不知道从何下手去动这个搜索按钮。

    如果可以,我愿意付费来少走一些弯路。
    moranrs
        21
    moranrs  
       2022-08-26 17:09:16 +08:00
    学过 div+css ,那应该是没学过 js ,这个功能会点 js 自然会有解决思路,建议不要考虑其他,先简单学习一下 js ,
    dsggnbsp
        22
    dsggnbsp  
       2022-08-26 17:14:59 +08:00
    我来说一下吧 一个就是请求接口 最原始的就是 ajax 拿到数据之后渲染到页面下面的框框 css
    有个 display 的(开始的时候给 none )改一下值让他显示你拿到的数据
    constantFix
        23
    constantFix  
       2022-08-26 17:20:47 +08:00
    懂点 js 就行,css 的定位加点动画 js 监听下搜索点击事件,改变搜索框的位置。基本 css 就可以了
    ksc010
        24
    ksc010  
       2022-08-26 17:31:50 +08:00
    说下我常用的思路

    首先设计好 div 层级关系;
    """
    <div class="classA">
    <div id="J_searchbar" ><input /></div>
    <ul id="J_result">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
    <ul>
    </div>

    最外层 有两个类 classA classB
    默认最外层 div 是 classA 然后你就按照 第一张图写 css 就行了
    在写 classB (这时候<div id="J_searchbar" class="classB">)按照第二图写

    js 需要做的就是 监听时间 ajax 请求后 将内容渲染到 #J_result 中
    并且切换 classA 到 classB
    ggp1ot2
        25
    ggp1ot2  
    OP
       2022-08-26 17:37:52 +08:00
    @moranrs #21 了解,这就开始学,其实我目前就是这个状态,就是拿一个部署好的页面,让我修改什么 css 样式基本很熟悉了,就是 js 很薄弱
    ggp1ot2
        26
    ggp1ot2  
    OP
       2022-08-26 17:39:02 +08:00
    @ksc010 #24 瞬间就有点了解了!
    stoluoyu
        27
    stoluoyu  
       2022-08-26 17:59:23 +08:00
    @ggp1ot2
    https://vuepress.vuejs.org/zh/
    https://vitepress.vuejs.org/guide/what-is-vitepress
    看看文档就成,其实我的建议是别自己写了,用这些现成的工具把你的 markdown 变成文档。
    l864494871
        28
    l864494871  
       2022-08-26 18:12:28 +08:00
    <style>
    .search{
    margin-top:230px;
    margin-left:300px
    }
    .content{
    width:100%;
    height:100px;
    border:1px solid red;
    display:none
    }
    </style>
    <body>
    <div class="search">
    <input/>
    <button class="btn_search">搜索</button>
    </div>
    <div class="content"></div>
    </body>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    $('.btn_search').click(function(){
    $('.search').css('margin-top','100px')
    $('.content').css('display','block')
    $.ajax({
    method: "GET",
    url: "xxxxx",
    async: false,
    data: {},
    success: function(response){
    //response 要么你自己后端拼装好 .html(直接显示)
    $("content").html(response);
    }
    });
    })
    });
    </script>
    akira
        29
    akira  
       2022-08-26 22:55:32 +08:00
    @stardustree 百度不就是这么干的咯
    ggp1ot2
        30
    ggp1ot2  
    OP
       2022-08-29 09:06:20 +08:00
    @hua123s #5 大佬,你的网站好好看,这个搜索插件真是爱了
    stardustree
        31
    stardustree  
       2022-08-30 10:32:33 +08:00
    @akira 所以百度垃圾么,可以对比下 google 是咋搞的。
    Joker123456789
        32
    Joker123456789  
       2022-08-31 16:21:33 +08:00
    点击后,触发一个动画事件(可以用 jquery ,css3 , 个人推荐 jquery ,因为 css3 的动画我实测过没 jquery 流畅),动画事件的逻辑很简单,就是将 margin-top 改到指定的高度。 这样他们就会 慢慢往上移动了。

    下面的 div ,默认隐藏,然后用 jquery 的 淡入动画 显示出来就好了。

    div 里的内容 用 ajax 去渲染。

    -----------------------------------------------

    如果你要用 vue ,react 之类的框架,那么 除了 数据渲染这一步不一样,其他步骤都是一样的。

    -----------------------------------------------

    如果你找到了现成的组件,那么忽略上面我说的全部。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   938 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 20:45 · PVG 04:45 · LAX 12:45 · JFK 15:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.