TA的每日心情 | 开心 2019-8-21 08:44 |
---|
签到天数: 163 天 [LV.7]常住居民III
|
发表于 2021-10-31 11:10:51
|
显示全部楼层
) K: ]4 H; z& a+ u% {& V加了一个纯 js 版,无需node环境。只需两个文件(index.html 和 app.js, 其实可以整成一个文件)。参看https://github.com/ffreemt/meilisearch-plaintext读我文件的最后一条。5 u! A; @+ v+ _& U: v
1 T- @& _6 m* p% S% @
index.html
1 s: D' H9 ] m* s9 q- <!DOCTYPE html>
6 U) Y* m2 D& K2 ?9 P8 F" D v - <html lang="en">
, B# U: L8 W: r m) k9 \6 j - <head>
3 R2 r) K& E$ M: j" k& D0 K7 t* j - <meta charset="utf-8" />2 d$ U/ D0 ?( Q O7 b& S7 z& p
- </head>2 f# S& w5 G1 P6 n- R3 |& o
- * Z/ n" ^- s) P7 A
- <body>
/ h" e( S+ Q& W* _% J - <div>
' N, H F9 S. _7 n7 K - <div id="searchbox"></div>) b* u/ d/ H( j# ]
- <div id="hits"></div>
: s% H* Q) ]- ?; ] - </div>1 S- N) x3 T* X L/ v" b7 _& C
" M1 ?- @: d& {6 A; }6 O- <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>* G& Y3 m# Q6 S- H" N+ E
- <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
* \+ T7 ]+ {' F! J - <script src="./app.js"></script>
: a3 v- e3 [' T - </body>
8 I" w# O$ h6 k" a5 K. f - </html>
复制代码 / S- o) M0 }$ Z6 x3 ^" i
: h& ^4 ~, T4 P6 b/ ]5 g
app.js
: A L* X5 W/ Z- O+ q- const search = instantsearch({0 ~; A$ g' K2 t8 @
- // indexName: 'steam-video-games',
+ z5 a8 [% }3 Y' W2 [ - indexName: 'movies',1 d/ i9 Y, Q% D/ r: A
- searchClient: instantMeiliSearch(- B: ]) |7 Y* U+ [& A" `
- // 'https://demos.meilisearch.com',: q+ z6 Q. k# {$ w- x; j
- 'http://acone3:7700',
; ]' g/ C3 E$ K3 \# b. } - 'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'
& s8 b r: q9 X5 U( R% ^1 Z - ),
$ g1 `4 |& e( V/ b$ y0 t- e - })
9 g5 B3 i0 X5 K
* Q* y' M1 c* N# x4 |1 z- search.addWidgets([. U: C2 H. A) K: M( A
- instantsearch.widgets.searchBox({/ ~5 N+ q, m) C7 z/ ]1 P& S
- container: '#searchbox',9 J# k& g: D* ?7 s0 Q0 X9 s. q
- }),( t% G ~3 ~4 X0 F
- instantsearch.widgets.hits({
8 A& k; q0 h. d1 b9 U& B: l7 q- R - container: '#hits',; u' C% q5 \# Z
- templates: {
& B" |$ B, T$ e# J( T% j7 \3 e - item: `6 U( e. E9 M+ E* L1 v! G) u- L3 h
- <div>
2 g: i5 W) v6 s3 ~* F5 I2 ^ - <div class="hit-name">) [- a1 V" ~! S5 _# O$ n- H) D
- <!--{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}-->
3 M$ x) o5 }+ {* d - {{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}$ z' c$ y/ i/ q& C& R8 Y
- ({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})5 p& }8 T' K& P! Z# [1 ?: W" z* x9 \
- </div>
: h6 \. H' `7 b: N ?. K2 q - </div>% x/ G R- s, J8 X
- `,
5 I( N% Z. E, b, g$ R! @ - },
2 q' S! J0 K9 n - }),
5 e# M3 s1 E0 k! A. q - ])# }- v, b+ l C) `
- 1 V, |6 q& Q9 M- q4 m E
- search.start()
复制代码 1 G C0 I- B/ e" X
, F- A/ |2 Q0 e! w! i" a0 ?/ d搜索界面简陋一点
% N. J1 b, ?0 S |
|