TA的每日心情 | 开心 2019-8-21 08:44 |
|---|
签到天数: 163 天 [LV.7]常住居民III
|
发表于 2021-10-31 11:10:51
|
显示全部楼层
' m- C. g. Z" N$ O5 L$ `加了一个纯 js 版,无需node环境。只需两个文件(index.html 和 app.js, 其实可以整成一个文件)。参看https://github.com/ffreemt/meilisearch-plaintext读我文件的最后一条。
( c/ T9 I0 k# C9 S5 J
8 t7 |& J7 N2 k3 r* F Kindex.html
0 E; G0 u" l: u( q+ g/ E- <!DOCTYPE html>
: a1 }( f/ a5 y6 M/ A% B" p - <html lang="en">
- n0 U8 X' W, i" g/ m) @ - <head>
# P1 n3 X4 k9 x1 h4 u - <meta charset="utf-8" />1 x2 H" Y2 u: _: O k
- </head>
1 w6 D. W- k; W( u
5 m0 v3 @# t0 F2 `: y% ?- <body>
: [! ~: c9 F2 z7 G, ~ - <div>
d# L. ?0 e, W2 H - <div id="searchbox"></div>. d0 J- ~8 M8 i
- <div id="hits"></div>
: U8 M3 G; ^ `0 d+ R - </div>3 U" m% Y) a/ Z) u
/ R7 Z# b3 Q6 t8 e" g: i- <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>9 Q( ^& P y+ C7 K/ E4 A, u
- <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
- p+ m/ l7 F$ X0 b - <script src="./app.js"></script>( g, p+ K' I; |8 s& ]: h
- </body>
w' H/ W# k, b& V% p - </html>
复制代码
- k, `* y) \" B$ u: b3 P9 i. j3 H5 b
app.js+ T& l+ ^; x4 Q6 r
- const search = instantsearch({0 Y& x* H2 Z P% H, R
- // indexName: 'steam-video-games',! J) u" G( q% y' i3 Q) e
- indexName: 'movies',
7 K0 V- {' U! K+ Y0 Q - searchClient: instantMeiliSearch(
( S9 [' R ^ t8 H' ]! ^% h7 h- X - // 'https://demos.meilisearch.com',# |9 M3 T, f0 x2 ^% C# j( c. o% s
- 'http://acone3:7700',
9 [3 X4 \ g/ O4 e/ Z: F$ C& B5 J - 'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'' }) d" ?: L" U3 e8 H
- ),. z9 c$ l* ` g8 M; M' K
- })/ u0 w: e4 E) K
0 \8 r% c- k, l3 v f- search.addWidgets([+ A6 V( m% f7 M- q9 }# p0 ]* ^ ~
- instantsearch.widgets.searchBox({
) U! f) Y; k1 t7 ~ ~. Z - container: '#searchbox',
) m; h9 x2 D5 B. Y) m C; F5 H - }),1 e9 h- k! v s; M* e
- instantsearch.widgets.hits({
7 M, Z! z. k7 m: X. o - container: '#hits',5 j' v* N- o, v% s. O! T
- templates: {3 K& a/ B- h8 p5 _) r
- item: `( U0 Y2 M% P* c$ d, |9 C
- <div>% Q1 i' f; |; l2 R! |
- <div class="hit-name">; c9 ?9 `0 k) N" X+ ^+ w
- <!--{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}-->
@; n' }3 S ?* D9 j( c. y; l - {{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}
6 e( v4 F2 E+ g6 z5 ^& c, E - ({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})
9 R8 e! S- u! L% ?9 _ - </div>. \0 l! D, ~& f4 P
- </div>
( w" F) }# @; h - `,
; F5 H3 {0 E% m0 H3 v4 f. `6 V - },
/ D- B, k! `: M( H - }),& b, D- F) j$ X) Z
- ])
2 O5 q8 }0 Z( K2 K( I- _ - : O, q3 O- @; D& K9 r1 H1 n5 y
- search.start()
复制代码 8 g0 Y& Y* X2 i1 J
4 D* ~1 d' ^2 p5 I9 B9 }
搜索界面简陋一点
% g+ q g m6 g! D, J% V8 g |
|