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

2022-08-26 10:55:02 +08:00
 ggp1ot2

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

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

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

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

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

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

2840 次点击
所在节点    程序员
32 条回复
moranrs
2022-08-26 17:09:16 +08:00
学过 div+css ，那应该是没学过 js ，这个功能会点 js 自然会有解决思路，建议不要考虑其他，先简单学习一下 js ，
dsggnbsp
2022-08-26 17:14:59 +08:00
我来说一下吧 一个就是请求接口 最原始的就是 ajax 拿到数据之后渲染到页面下面的框框 css
有个 display 的（开始的时候给 none ）改一下值让他显示你拿到的数据
constantFix
2022-08-26 17:20:47 +08:00
懂点 js 就行，css 的定位加点动画 js 监听下搜索点击事件，改变搜索框的位置。基本 css 就可以了
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
2022-08-26 17:37:52 +08:00
@moranrs #21 了解，这就开始学，其实我目前就是这个状态，就是拿一个部署好的页面，让我修改什么 css 样式基本很熟悉了，就是 js 很薄弱
ggp1ot2
2022-08-26 17:39:02 +08:00
@ksc010 #24 瞬间就有点了解了！
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
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
2022-08-26 22:55:32 +08:00
@stardustree 百度不就是这么干的咯
ggp1ot2
2022-08-29 09:06:20 +08:00
@hua123s #5 大佬，你的网站好好看，这个搜索插件真是爱了
stardustree
2022-08-30 10:32:33 +08:00
@akira 所以百度垃圾么，可以对比下 google 是咋搞的。
Joker123456789
2022-08-31 16:21:33 +08:00
点击后，触发一个动画事件（可以用 jquery ，css3 ， 个人推荐 jquery ，因为 css3 的动画我实测过没 jquery 流畅），动画事件的逻辑很简单，就是将 margin-top 改到指定的高度。 这样他们就会 慢慢往上移动了。

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

div 里的内容 用 ajax 去渲染。

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

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

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

如果你找到了现成的组件，那么忽略上面我说的全部。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/875535

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX