TA的每日心情 | 开心 2019-8-21 08:44 |
---|
签到天数: 163 天 [LV.7]常住居民III
|
发表于 2021-10-31 11:10:51
|
显示全部楼层
mikeee 发表于 2021-10-30 23:35
- D5 R5 R5 Y+ k7 k3 L# z0 d我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话( ... 1 f& A! K: C) @$ F
加了一个纯 js 版,无需node环境。只需两个文件(index.html 和 app.js, 其实可以整成一个文件)。参看https://github.com/ffreemt/meilisearch-plaintext读我文件的最后一条。
" ~/ Q! ], U) F
0 m4 }/ |' A) @" g h5 @index.html
) Q- |$ R- |# U- <!DOCTYPE html>+ ?( ^+ t7 Y2 o3 q( w: G4 I
- <html lang="en">$ m! g3 x: w+ y- Q1 S1 l0 Y, }& {" a
- <head>
, ~7 N1 l; g+ _0 N' S - <meta charset="utf-8" />9 u( o; z" c+ o7 `5 I! p d: E! R
- </head>
& Q# X! Y. h0 v- S* M - . [: e; r0 q6 E+ b, w& a* C" w. B
- <body>
, ?3 a. W7 N) i9 r+ b3 P - <div>
2 _9 V( ?- r! Z0 f. O1 R- p - <div id="searchbox"></div>& E( {3 o* ?9 u2 y' Q
- <div id="hits"></div>
5 a( S5 q2 ^5 L. a4 | - </div>$ I Y7 C8 |- h. \( G
/ ?6 S* u2 c+ K) U- <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>! D9 L/ H6 {1 Q" L
- <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>- @3 f8 _( O( ]+ Y9 K5 J# M
- <script src="./app.js"></script>
+ F2 d6 q. ^6 g2 G$ f - </body>2 f5 z2 m. S# o* X8 [: P" S
- </html>
复制代码 7 v) k' L, b. c I4 K
$ C1 w8 x9 C; r: f0 S C, y# F
app.js# l3 k1 K8 R0 T4 w' S( B6 }, t- ^
- const search = instantsearch({
) d" D' z+ o6 |; g/ N9 x - // indexName: 'steam-video-games',% `0 {' j6 W& |8 \/ g1 z
- indexName: 'movies',2 k1 l7 F" g% C6 v
- searchClient: instantMeiliSearch(8 J9 \( F. f$ m
- // 'https://demos.meilisearch.com',
1 h# I* L4 `! v! } - 'http://acone3:7700',9 o% y" T/ p9 Y
- 'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'& H/ a3 t; A F5 A. Y# m) c
- ),
8 Z" l7 Y. t3 A9 C/ F - }); R, Z( I3 X# U; s9 r3 d M! K$ l
- H% `4 D7 J1 g, I
- search.addWidgets([
- |' S2 T Q9 C! ?8 K8 X1 P! P - instantsearch.widgets.searchBox({
3 s8 R" u9 {$ y5 ^7 { - container: '#searchbox',2 h, P4 E9 G) ^6 B7 M* i: X
- }),
0 E- F2 L" c, z' V3 b - instantsearch.widgets.hits({! P, f. K( O# v0 Q( [" N3 S
- container: '#hits',1 r, N0 J5 M+ f# w/ O4 a$ H
- templates: {& G. W8 m- w4 r# {2 A
- item: `
7 f7 P3 ~6 k9 f' x( x - <div>* e, j" F3 b. O2 J" w$ j
- <div class="hit-name">/ T8 J$ b( Q* {. g% x4 z0 G
- <!--{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}-->+ P) a$ l0 G/ q9 s
- {{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}
4 C- I: F, F& F9 m7 B+ H5 H - ({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})! q2 r; s+ |+ z6 L& V$ g1 b
- </div>3 D4 q5 S# k0 p! N6 I: |7 D' I
- </div>
9 ]8 a0 d7 p: A% B' q. J2 f - `,# X0 U% d% C K
- },3 a3 ?4 _7 Y8 g
- }),
1 D$ F8 [& `2 { - ])
4 o) I1 g( g* W/ z+ ]( j- q
; l K. j: }* V2 j% l2 g- search.start()
复制代码 + L. `; F% O* d6 a5 {
3 N; J, V" H. t. o$ o, h- p
搜索界面简陋一点
) `: t! W" F4 P' | |
|