TA的每日心情 | 开心 2019-8-21 08:44 |
|---|
签到天数: 163 天 [LV.7]常住居民III
|
发表于 2021-10-31 11:10:51
|
显示全部楼层
mikeee 发表于 2021-10-30 23:35
& N$ r$ ]4 E. ]3 S2 E& f! g我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话( ...
7 B& b/ Z) H1 N2 v. Q加了一个纯 js 版,无需node环境。只需两个文件(index.html 和 app.js, 其实可以整成一个文件)。参看https://github.com/ffreemt/meilisearch-plaintext读我文件的最后一条。* |7 m2 m+ [; y$ f7 i) O' a5 d
' i6 Q! W& ~8 a! C* u5 F% Rindex.html N) w/ D" p+ r ^
- <!DOCTYPE html> u) s! M" F( {) ] K
- <html lang="en">
0 O+ l3 s9 ]- @$ Z* }" K; P+ ? - <head>
6 d, H1 c8 U- b - <meta charset="utf-8" />
- m% Q; y% [4 x1 @2 c - </head>
3 w& w7 S8 W- V! L- p
8 X6 Y' C* ] k3 v% L( A- <body>
5 I" r9 X" l- w' r: k - <div>. j0 s. E3 e; l. T/ E! B7 I
- <div id="searchbox"></div>0 r1 r+ F7 }" u+ x
- <div id="hits"></div>
8 w" r+ C8 w; K, V! _! `0 F2 m - </div>
: E- q3 t; W* A+ H4 P" ?) B
) P1 S! T5 d; L. C& l4 `+ q9 m- <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>1 B- o9 z" U- z7 T. m4 p# Y
- <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
6 l' \- S* k, F7 h1 m9 G1 h - <script src="./app.js"></script>
! e' }9 E+ m/ `: z - </body>% U% H2 |. N, c& c6 T$ Q
- </html>
复制代码 w% c! S2 x6 D, c9 g; n9 @& J
N3 D2 M1 ~- G% b0 f! V- d! [
app.js8 o3 O; w. A3 u! X$ \4 O
- const search = instantsearch({
1 U! P6 x. d* c# D3 z a- Y - // indexName: 'steam-video-games',
5 [7 D' }+ z# |2 m# \/ I; j0 a+ y - indexName: 'movies',
! h9 y0 [; Y5 }, f' F, o - searchClient: instantMeiliSearch(- _6 S, ]3 W, t
- // 'https://demos.meilisearch.com',4 z p& Q: [3 o& m
- 'http://acone3:7700', u) i. A: w4 U4 F0 ?
- 'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'
y7 x) P2 o' e9 X - ),
: h1 q; a1 x- z( b! J - })
4 O2 J- Y& O9 u0 f* s' f - % |4 s: `# e7 T* J; p, p3 J2 b
- search.addWidgets([6 A! ]) {9 \& R6 ?3 ^
- instantsearch.widgets.searchBox({
t) D! g: M4 a) q - container: '#searchbox',$ e% X7 ^' h& Z# \( W4 Q' ?3 @& v5 V' W
- }),9 l! c. }2 O# c
- instantsearch.widgets.hits({
0 P8 f k7 n: N6 d1 ~/ ` - container: '#hits',6 D$ X6 p! \ S, f, l% P- T5 J6 z6 P
- templates: {+ S3 O u$ R. X$ ^4 e+ O u
- item: `
4 q4 y7 V y: e) ? - <div>7 w" a" c' w6 I9 {
- <div class="hit-name">
1 c" A- j0 b' U# ]. W$ a6 u - <!--{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}-->. Y' J9 S1 V' \4 S
- {{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}
4 P a. ]2 \; s! |' R$ K - ({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})
6 A# x1 W1 z: z3 s - </div>
3 G" E& K$ G: K/ _5 { - </div>
# M2 O/ q/ C) `% O: f& f - `," G7 d3 I3 |+ @
- },( O7 ?. Z, x+ K3 M
- })," `/ J \8 }! h7 m: t5 h9 J
- ]). [3 F% @$ x6 U: f- g5 k
- 4 S( x3 H6 }0 d; L8 Q) H
- search.start()
复制代码
' O$ c& U" Q) i: S' y
$ Q5 v1 U, @. ?0 s" c* i2 U搜索界面简陋一点+ h2 R- J- @" c+ e5 \: @
 |
|