TA的每日心情 | 开心 2019-8-21 08:44 |
---|
签到天数: 163 天 [LV.7]常住居民III
|
发表于 2021-10-31 11:10:51
|
显示全部楼层
mikeee 发表于 2021-10-30 23:35
1 u. i- ~9 Y% m; p: l+ o我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话( ... - ~$ {" ^! E" P [7 J k: E* b! ~
加了一个纯 js 版,无需node环境。只需两个文件(index.html 和 app.js, 其实可以整成一个文件)。参看https://github.com/ffreemt/meilisearch-plaintext读我文件的最后一条。
, W5 i. U7 r' R: R
8 w& a2 ]: ]# [3 J, rindex.html
M8 ^" s7 {* q- X9 B7 s- <!DOCTYPE html>
9 I4 o! a2 |5 \8 C9 | - <html lang="en">
! V, L: I6 I( } - <head>6 ~7 U6 \" f7 G0 V1 u; V9 k
- <meta charset="utf-8" />
0 p7 a, R& {) g - </head>: d0 B9 W% x. _% F3 s& }. |
. y& M& H' `2 k7 U- <body>/ [& H8 X2 C ~0 h6 s* v5 ]: a
- <div>+ m7 c- A7 \: ?
- <div id="searchbox"></div>
8 D. ]- H4 Z/ ` d4 ] - <div id="hits"></div>; C+ g; v6 U1 j0 H- U2 @4 G4 F
- </div>
5 f# J' R2 ~) T3 i - . C5 [+ F8 U% A* D/ ?* P! \
- <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
4 Y- V' F( h% {% [, T: F - <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>! L" i) w6 }% j+ H- B. p# q* }8 j
- <script src="./app.js"></script>9 o- c& |) \( _, r7 x0 i Q. h7 i
- </body>
. |9 Y$ S+ p3 G8 \0 ]" M6 x - </html>
复制代码 * C& v6 B% F, \( x T& c* X, K3 |
: n% d v% d8 ^1 x( f, |9 K0 j7 x1 v
app.js4 A# `3 R) C( X: G2 V
- const search = instantsearch({
5 ^! T) C4 w6 F; Y2 F0 | S8 m3 g9 c - // indexName: 'steam-video-games',. V0 a- g1 _; i; a1 k2 u
- indexName: 'movies',
9 w" H V* t5 f+ q - searchClient: instantMeiliSearch(" W. b& P* Q* d% K% Y2 f" ?0 _
- // 'https://demos.meilisearch.com',
* b/ g) f8 d9 l2 {! e - 'http://acone3:7700',6 x7 ^: J" H4 ]+ {
- 'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'
2 E" p( \! P; D3 G9 U2 D7 Y- c - ),
6 h3 P% K5 R4 X0 R2 J - })
0 @6 K) k: D, o - $ N. A L8 m3 {8 c
- search.addWidgets([. Q" r1 j0 R; S6 p9 a
- instantsearch.widgets.searchBox({& Q [* n6 y0 V& v
- container: '#searchbox',
1 V+ a i8 d! v1 p$ C: W6 Z- I# g - }), m& y* v7 D! F; ~- {& x; r( k1 p
- instantsearch.widgets.hits({& m; f0 A. f/ h2 d
- container: '#hits',% h. u i) i# y2 Z, j" y6 m
- templates: {. G# i9 W0 w' E! T) A" ]9 s O
- item: `
. H) x" v4 Y6 S. F+ i y. \ - <div>8 ^: j+ \8 l, m
- <div class="hit-name">
6 h& `: A5 h6 [8 b3 o; m - <!--{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}-->
# G2 f7 A/ x2 s! M4 Y; H+ o% K - {{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}/ v. b" r9 ^ p% ?* D
- ({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})6 o G1 T- A& j: p m
- </div># `* S2 ^; y* \6 B |
- </div>
0 ?' S$ a/ `) G0 B" D& x. y/ f( B - `,# f0 B* w( P1 T3 l* ?. u$ s7 _
- },
- n& I1 b/ R& P, M6 a! d - }),
, y% ^& T' T1 C) w5 G - ]), P: A) ^/ l/ L
3 K( ~( H- M( H7 @8 r; @- search.start()
复制代码 ) L* h B# ^! l; E/ Z
: q: d" K; H. X2 \: U0 x* P3 k搜索界面简陋一点: m1 {3 a S4 g" I
|
|