TA的每日心情 | 开心 2019-8-21 08:44 |
---|
签到天数: 163 天 [LV.7]常住居民III
|
发表于 2021-10-31 11:10:51
|
显示全部楼层
mikeee 发表于 2021-10-30 23:35
" _% ~% `* P3 z' ~1 n9 d4 Q: Y我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话( ...
6 B5 A8 K# t `( T4 j6 }2 W加了一个纯 js 版,无需node环境。只需两个文件(index.html 和 app.js, 其实可以整成一个文件)。参看https://github.com/ffreemt/meilisearch-plaintext读我文件的最后一条。
. G- f- g+ e4 ~( D ?# K: W0 a: L q' c# I. R% G
index.html" C( g& ?) i+ A# [
- <!DOCTYPE html>
0 T t2 Q8 ]; s5 Z; H7 f g - <html lang="en">
% y' j4 Q/ Q9 f3 y* }/ Q# y - <head>
' x6 W1 n) s/ V) C7 ? - <meta charset="utf-8" />) W. j" J1 V0 ?. e4 c0 d
- </head>
. @& p+ O& W: h9 C5 M - + d2 _2 V- Q/ V2 M, z
- <body>
9 o5 o1 N# R3 k3 q/ D - <div>* q% S9 [# {5 L% E* G5 j
- <div id="searchbox"></div>1 F% r1 i) K0 {
- <div id="hits"></div>, |' j8 ^- |4 @6 N. i: L8 F7 }
- </div>+ \# a4 I2 U9 w+ y; Y, V. i4 v1 _
. Y, N7 T* W3 H& d* u- <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
8 L: l! U# X9 i9 o. {5 j1 \ - <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>: P# J/ g. n/ r7 ^8 M; R
- <script src="./app.js"></script>' |+ n6 D1 ~: U/ a& b
- </body>
* B/ D* Q& B8 j# N6 l0 Y - </html>
复制代码 , s/ a5 q( v h0 S1 L2 V
4 `6 a, [6 i: X& w8 ?
app.js
6 T9 e* }4 P0 G. V! t$ d- const search = instantsearch({* n* M$ `, F; l/ c# P8 ?$ i0 k: _7 N# c
- // indexName: 'steam-video-games',+ b/ `9 u- A$ {+ ?8 y
- indexName: 'movies',* B# U" c. ^% T0 o' ^
- searchClient: instantMeiliSearch(/ {. [6 `. p# W2 Q) L
- // 'https://demos.meilisearch.com',# n9 a: N7 ^! ]9 }& e7 \
- 'http://acone3:7700',
% O, I* ^$ I2 }( f9 o6 @ - 'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'5 d- y; T/ q& S1 H
- ),. s1 N: X6 O# d4 ~2 u
- })% W9 S1 q* b4 M1 q+ R y
- 0 d2 y0 L2 u8 P. x6 d
- search.addWidgets([
2 {; \8 s" Q: ?) f - instantsearch.widgets.searchBox({, n. t0 L) |$ p6 L$ N
- container: '#searchbox',
9 m9 \' K5 K# e& U% x - }),' E+ R0 {5 V3 Q. G! S3 K
- instantsearch.widgets.hits({
% h* Y) Q7 k1 l5 m# M, l t - container: '#hits',& h# ?5 k) x& _* o& P
- templates: {
5 X0 I; u. q1 m1 u - item: `5 ?4 `1 k3 q& }! P9 y! k
- <div>
% I; S# m- K1 l% L9 \ d. n. C - <div class="hit-name">' H+ }# I: q# B! K' ~" @0 o
- <!--{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}-->
j; p$ E& i2 t - {{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}* R0 c0 `: h% ^( L% ?3 `* r, Y5 }
- ({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}}) h" m* a1 E7 I) m4 W' ?
- </div>
" i3 q4 r p+ R( k- x - </div>: x9 U- C+ h; C0 ]( B( O
- `,
7 u, O5 v, e$ K; v7 d+ k1 u0 C% A - },2 O( S$ C2 G7 u* F
- }),
' w/ k# L4 k8 j5 P+ C" ?3 { - ])
' R! W6 r! b8 m: ? [( A
$ o2 g- {- F. L2 {- search.start()
复制代码
( n7 Y" G6 i5 ~' ]- R& Y: x. Q u" X( d
搜索界面简陋一点
& U$ z$ P$ b+ P( j( _9 ?8 y |
|