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

[ggp1ot2]

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

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

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

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

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

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

[lcy630409]

........
jquery 一把梭

[ggp1ot2]

@lcy630409 #1 即 Jquery 可以全部实现？

[lcy630409]

前端页面可以
先写好列表页的 div 和 css ，输入框 通过 jquery 读取数据 post 到后台获取列表过来，然后 each 遍历一边 输出结果到列表页的 div 里去

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


之前没附带学 div+css 么 后端一般都会一些的

[fengci]

前端的关键字是：联想搜索， 后端的关键字：ES 联想搜索，后端解决方案很多看你习惯了

[hua123s]

能用别人的 sass ？ docsearch 可以考虑下，可以看下我的网站有效果 https://powerfulyang.com/

[stardustree]

怼产品，啥破需求，点一下输入框输入焦点的位置还移动了，容易让人眼花。打回重新设计。

[Slshaolong]

写 js 可以 用 js 判断 就好了 或者你试试新建一个页面

[devswork]

jquery ，下面的 list div 给个 display=none ，然后点击搜索请求后台数据，得到数据后进行循环拼接 DOM 拼接到 list div 里面去，然后把 list div display 属性去除了，他就显示列表了，上面的搜索框上移的话，就是 margin-top:50px,有数据后 margin-top:10px.
如果用 vue 就简单很多了

[cmdOptionKana]

既然是点击按钮触发的，直接在事件里写代码就可以了呀。

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

如果想好看一点，可以写 css 让 搜索框固定在顶部。

[cmdOptionKana]

写错了，是加个 id='#search-input'

[ggp1ot2]

@lcy630409 #3 div+CSS 这套还是会一些的，不然也不至于让我来弄，不过都是写一些静态页面，这种需要交互的还没有写过😁

[ggp1ot2]

@stardustree #6 在打了

[lcy630409]

@ggp1ot2
没有啥高大上动态效果要求，就直接 jquery 吧 最简单省事，看下 jquery 的 "jQuery 选择器" “jQuery - 添加元素” “jQuery 遍历”“AJAX get() 和 post() 方法” 就差不多了
如果 嫌遍历麻烦，就后端拼接 div 直接给页面添到 div 里去就行

[yaphets666]

很简单，动态绑定 class 就行，但是好像你不懂前端，完全不会的话，需要系统学习。

[ggp1ot2]

@yaphets666 #14 只会一点点，就是可以基于现有的网页魔改，从 0 写写不出来

[qzhai]

jquery 下载不太合适 太重了，es 的新特性大部分浏览器也都支持的。
思路很简单。
css + js 实现。
首先用 css 写一个搜索结果页。然后基于一个 classname 把结果隐藏 & 搜索框 下移。 这里建议用 flex 和 transform 来实现，因为做动画用 c3 性能是最好的。

上来默认 隐藏搜索结果。输入内容后 ajax 填充结果 在 把 classname 换掉 过渡到结果页即可。

[yaphets666]

@ggp1ot2 点击事件中处理两件事，1：搜索框 position 的 top 赋值，试输入框上移。2：appendChild ，插入显示内容。就这么简单。

[ggp1ot2]

@yaphets666 #17 感谢感谢，这个思路就完全看懂了

[stoluoyu]

本来想给你写个 demo 讲下思路的，看了你前一个帖子，其实你直接可以用现成的东西，比如 vuepress 这种，看文档就行了，对前端要求不太高(自我感觉)。

[ggp1ot2]

@stoluoyu #19 大神！能否提供下思路。。其实我有考虑过使用 vue 的，只不过我没有使用过，在我印象里面，就是一个写前端的框架，是一个大家伙，感觉我的学习成本会很高。。

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

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

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

如果可以，我愿意付费来少走一些弯路。