JavaScript 搜索框自动提示

admin · 发表于 2019-11-7 19:24:08

请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！

您需要登录才可以下载或查看，没有账号？注册

x

JavaScript 搜索框自动提示

[mw_shl_code=html,true]<html lang="en">
+ M* a% J" Q* A! Q8 v$ [8 _% W7 v& E0 O6 e! q2 ~
<head>
2 W/ O' Z% W9 ?  c9 b2 e <meta charset="UTF-8">' P; h% K1 K( m2 v
<meta name="viewport" content="width=device-width, initial-scale=1.0"># F* \+ Q* Q! W) A. W
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8 \! n" ^. {0 p- B! I6 _2 Y <title>filter the value</title>2 P  J/ h% E# Z8 f: W. s6 z& Y
9 H7 H7 S9 W1 {5 _, N9 @9 J1 u
<style>
& X. R* U5 ~- }       #myInput {
/ t: z4 f7 }8 A  F: R          background-image: url('/images/mix/searchicon.png');
# _+ t; P% t! P1 j( f. z          /* 搜索按钮 */, c  Q: Q  d& g# i+ l$ p. m
         background-position: 10px 12px;
3 l6 l$ l- g6 b! b' I" C+ z          /* 定位搜索按钮 */' x# L$ U0 j7 z0 ~
         background-repeat: no-repeat;, K( a: [5 f# B- `6 m
         /* 不重复图片*/
: q0 i, j& L) f( L5 N7 ^$ Y- b          font-size: 16px;
% M. m/ K' F  h- z          width: 100%;9 I, V( c* J/ J0 t2 T/ y3 ?
         border: 1px solid #dddddd;$ L( Y1 s  Q  u. Y
         padding: 12px 20px 20px 40px;* \7 o  Y8 \# \: m) d
         margin-bottom: 12px;) e( q4 x: ~$ P$ d
      }
' m/ `3 b1 Q9 n6 h
- U8 }' x/ h& D+ l7 ]       #myUL {  J, U: r, U( u* v. t0 c
         list-style-type: none;$ p) @. v/ K' g! I3 s& Y9 g! P
         padding: 0px;
" r) c% P' ~* \8 T          margin: 0px;
+ o! P8 q4 U- R4 T: u6 _& A       }$ c7 U! p% B2 i' f" k

: I5 \3 n( t8 V$ l( u" S       #myUL li a {
+ t! Y' Z0 S, ?5 v% g: A          border: 1px solid #ddd;
: c9 a4 w% s, O3 B          margin-top: -1px;( S* C: X7 I; R. e6 C* j. @5 Y
         background-color: #f6f6f6;
) F. N. c# q* ?) z( ]          padding: 12px;4 ^, q5 ?/ b/ m: n6 U  z
         text-decoration: none;, k2 F2 n5 t+ @, L( f; [% T
         font-size: 18px;( m+ F, g$ _/ P$ ]5 `( Z
         color: black;
: H' ^7 t- {% O- I0 S* y1 u" \          display: block;
9 G- @1 E9 ^8 i6 H       }
8 |% d+ S5 B! l
3 M2 m7 s9 Q1 @% X& k% b" t       #myUL li a.header {' v$ U7 d) S2 i% U, n5 h! t4 N
         font-weight: bold;
0 x: r  B; B3 R/ Q          background-color: #e2e2e2;% ~. s5 s& f, L1 P9 e" ^
         cursor: default;2 P6 V7 q: N) w+ B
      }
& \7 k  P  M7 z$ u+ ^
8 a( [  }: d* t. {7 C       #myUL li a:hover:not(.header) {( ]* K+ i& B% ?7 ^% u/ G1 S# u
         background-color: #eee;; J& f4 r5 M) [  r; U7 ?( t
      }, r6 q) d2 C  A9 I2 ~
</style>% G1 T' R8 o: }' {
</head>- c  p. ~: Q2 d; r. m, Z+ S& L

' ~/ h  N4 e4 l<body>( h9 P6 H, c4 D* L& J

% Y! |* a1 Z- R+ i  }- O9 n <input id="myInput" type="text" placeholder="Search....">) n+ t1 _# D; j0 q" E
<ul id="myUL">
0 c6 E, I; k9 N" g7 J1 }  W8 }0 n       <li><a href="#" class="header">A</a></li>
) a! _& K" H  H+ d& ?! O       <li><a href="#">abc</a></li>8 H2 p  m8 p: k) v6 y8 k$ X0 H) V
      <li><a href="#">abort</a></li>
$ k5 g; m. h+ N( f8 ^       <li><a href="#">abandon</a></li>
( w1 A% |  ?/ c9 m
- z- D+ N' Y8 y' I. i0 V       <li><a href="#" class="header">B</a></li>  q- g( L* p% D+ e3 L4 z! e: Q
      <li><a href="#">baby</a></li>0 d6 N3 E4 z" ]+ h- q7 |
      <li><a href="#">bird</a></li>- k; I8 C* L/ h* Y
      <li><a href="#">bin</a></li>8 k+ A* p$ G* y$ f" P& {# |

2 S9 F- P4 T) N. l) w3 P+ B' J       <li><a href="#" class="header">C</a></li>
- z1 Q5 ^. Q* V  A       <li><a href="#">car</a></li>% p5 }% M* k* b0 R+ r3 a
      <li><a href="#">card</a></li>4 P( A; A- g  {! {  [) |
      <li><a href="#">cavans</a></li>* j( S0 R; V" j" R  R2 Z
</ul>6 o! }* D7 y# h$ D& [

4 ], x( |6 {) W1 S9 z% ]( K; G% D$ ]7 G/ a
<script>
$ w8 y- w$ V3 b4 y0 L       function myFunction() {2 {4 x& x, w8 w9 B, y$ V
         var input, ul, li, a9 G) f1 z/ `- L7 Q
         input = document.getElementById("myInput")  o1 u5 r& e- c. b& \
         ul = document.getElementById("myUL")5 d8 N  c7 L" `, ?; o- o& C
         li = document.getElementsByTagName("li")8 N- e4 v& w4 H5 c( k( V" @
         var inputvalue = input.value.toUpperCase()7 v% j7 j9 b; g. g0 t
         for (var i = 0; i < li.length; i++) {8 W5 A8 A+ t$ V2 X7 V* R
            a = li.getElementsByTagName("a")[0]
2 L! x& [- K1 j+ _0 l: ~/ k             if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
9 U# B. ~/ K; I; E% }/ b3 U7 b                   li.style.display = ""
. I: v* H% o" |/ F4 i( p             }! Y! g3 P( b4 ]! ]: a& u
            else {
# ~" b2 `0 @9 l( L1 ^6 P! b  n! l0 o                   li.style.display = "None";$ C- z4 k' E! I# @, U3 X% F
            }
( I( G5 v( Y$ d  P8 w$ N4 e          }
) D* g& [" e: m1 R- ?       }/ j5 V3 x1 d- S" [! W
</script>
+ V$ h* F. j5 T6 Q: y1 j- _</body>* \! w% \; e* f! {' c, c

3 _2 F5 N( a1 Z+ P" i0 ~</html>[/mw_shl_code]8 V2 L; i$ v! K$ I

Frank · 发表于 2019-11-14 09:05:00

如果能把代码的运行效果用视频方式展示下，就更完美了

PLM之家PLMHome-工业软件与AI结合践行者

热图推荐

[前端框架] JavaScript 搜索框自动提示

admin 楼主

请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！

全部回复1

Frank 沙发

发表回复