TA的每日心情 | 开心 2019-8-21 08:44 |
---|
签到天数: 163 天 [LV.7]常住居民III
|
发表于 2021-10-31 11:10:51
|
显示全部楼层
% C: w2 z/ E* d! T4 V4 B( {( t
加了一个纯 js 版,无需node环境。只需两个文件(index.html 和 app.js, 其实可以整成一个文件)。参看https://github.com/ffreemt/meilisearch-plaintext读我文件的最后一条。
/ d* g3 X$ _4 W2 O0 w$ |/ J5 z
( b( u3 q9 l: ~ M% a9 d& P; Vindex.html; j- H- A/ [" b6 N# R, w! m# y
- <!DOCTYPE html>
7 X! R( ?4 i- e$ K* v | - <html lang="en">% T2 W' a5 c5 G% z
- <head>
% d* _ B9 v+ {* C - <meta charset="utf-8" />
; c+ l7 ^, b0 w7 J% r4 C3 L. o - </head>
* u; ^1 `" Z9 Q& I
, l% _0 o+ r: F6 d" D; a- <body>8 N$ [$ L8 l P5 i, m/ Z
- <div>
2 Z- P v5 {. X - <div id="searchbox"></div>7 m4 m( B! d, ~& m8 e6 z/ K
- <div id="hits"></div>
3 R+ a1 l. P; f, a - </div>) b6 F% q* L X5 a. F
- , B, ~, v3 V# G- X+ |7 C I3 T" |; K
- <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
5 E! G" ~( B5 b( R, r - <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>4 J1 j& L6 M1 D1 v( w, }; Y
- <script src="./app.js"></script>
: o& C0 u. Q' Y* P) E0 k9 n - </body>
. L+ c& j7 L: D; z+ I - </html>
复制代码 w4 ^( d. n1 Y, \% C4 l5 ^! L
+ n, |' E$ ~) b, Papp.js) m, i# R5 F4 v/ E1 a3 F
- const search = instantsearch({
6 V- O! n+ j: v J - // indexName: 'steam-video-games',
) Y" r" E' N* d9 L% U, f - indexName: 'movies',
- a `5 W0 N( q4 @' P E - searchClient: instantMeiliSearch(
6 \; T' m$ H# {" U s) h - // 'https://demos.meilisearch.com',
8 d& I! _% c) r7 Q. Z# H& d - 'http://acone3:7700',
. ~( [; g1 L2 S/ B% @6 t2 {) O6 { - 'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'; P: T9 ]& [' |) ]
- ),
: d& J& P% h5 U+ N3 P1 w- r/ P% l - })* f- r) O! z; |0 t% a
- ' E5 [2 O9 r/ a+ i4 E
- search.addWidgets([
. j1 q& U2 q2 w4 C/ i - instantsearch.widgets.searchBox({4 F0 d/ r( o* B; d- m
- container: '#searchbox'," m1 V; O5 |8 x$ B5 S* b; g
- }),
2 y6 y# P8 ]. V% {$ T4 z, U - instantsearch.widgets.hits({
+ c; D( M/ x; x. a+ Y - container: '#hits',0 V1 Z- U& y, y
- templates: { K* c7 N: E6 ^* J) g4 B2 X2 l
- item: `2 o8 J1 f8 S0 r( {3 U- ^
- <div>$ z, i" Q& d7 u8 N+ |+ n
- <div class="hit-name">* m% x( R* y" J" s5 s' q
- <!--{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}-->% y. k7 X; g/ y2 P" N; x
- {{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}
6 b0 l3 [# E9 A7 ]& L6 g" u$ @ - ({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})9 e/ ?; c$ I1 d# t7 \
- </div>
6 _$ w+ l+ i% Z, G - </div>
0 a7 v( [/ s# B7 r7 @ - `,8 {$ ?- @7 k% Y1 E- x; Q# A
- },
# J% ~3 G' r: @6 o - }),/ c% Z, y4 f5 k- R) i
- ])) G8 l( l% c5 O4 u3 t
+ S3 h8 ~& U& Y0 \* F7 b- search.start()
复制代码 1 f L3 r" n, r4 x |" v
* c! @, i H* T
搜索界面简陋一点
) ^' r! Y& K! O9 a |
|