|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
' a Q' K+ k7 N" ^$ h: Y) tJavaScript 搜索框自动提示
6 }: u3 N0 X+ ]% S7 F) ]3 Q9 g# N ^* Z8 F4 d% I
( V1 y; d6 S d/ ^
( D% T' n* S7 E( z2 \& C2 O6 S
" X6 l6 ^5 x- D7 S- O! I3 i[mw_shl_code=html,true]<html lang="en">
0 ~5 A! S( p( I0 k1 o8 H+ z8 \8 g
<head>
3 }5 O& b% x+ f9 V! m% k <meta charset="UTF-8">! }. z& X( Q4 X" `$ y' q
<meta name="viewport" content="width=device-width, initial-scale=1.0">
0 k: R3 m* o4 v$ k* P <meta http-equiv="X-UA-Compatible" content="ie=edge">
P, j- A. Y+ A7 J, i3 q& o6 d <title>filter the value</title>
# w/ q8 N, j/ q% X* h- B9 P0 r! u; {* q4 z0 v+ `5 S+ l
<style>2 ]( y Y/ w1 |9 [4 u2 l8 z
#myInput {
8 u8 Y4 e0 k u" K3 O background-image: url('/images/mix/searchicon.png');
5 @ }. s4 `+ B /* 搜索按钮 */" b7 a/ Y6 X- P: o
background-position: 10px 12px;
4 `3 p' E8 K5 K3 ?0 l /* 定位搜索按钮 */! F8 T! p/ ^6 j1 F: x w
background-repeat: no-repeat;
9 B8 U# Q0 J9 w2 z& { n( i /* 不重复图片*/
/ e5 O4 L' f: y font-size: 16px;* ~# x* a- ~" F4 u. z4 v8 p
width: 100%;
# m% }) u3 V& H3 B4 n2 ]# R# |5 d0 ]+ u border: 1px solid #dddddd;1 U( n% [' |, X
padding: 12px 20px 20px 40px;
2 p2 S9 ]9 k7 v8 [3 Z% ? margin-bottom: 12px;
$ a4 u: k$ s9 U }& A; A) p7 T0 W$ _& C' H/ m
9 ?0 \" D' r& R1 H$ E0 z0 l! j #myUL {
9 Z; @ |$ e- T- o( M" X list-style-type: none;5 e# |& W) y# N" a4 ^$ J$ p4 {
padding: 0px;4 p( V9 P5 W2 J0 r) R+ L
margin: 0px;% T N$ \* \2 y! ~# w
}
2 T, q5 [3 x' K+ ]
9 Z1 V6 w1 H' P# y! p ?" w2 ^ #myUL li a {
9 l( t" i0 B) o$ I5 G* I3 m border: 1px solid #ddd;
* C, t. |- h6 D3 o1 n margin-top: -1px;9 R8 W6 s4 S4 y5 h M7 h
background-color: #f6f6f6;
R2 `% r+ X0 |- C7 O+ E padding: 12px;: `2 G I4 d/ P, j& A Q8 H; F
text-decoration: none;
" h) J" f: k& u3 p+ e1 P5 S0 i0 D font-size: 18px;, |" u6 F" x. K% z/ L$ L
color: black;
# q, b. [3 L) |( p+ g8 P+ L5 k1 D display: block;7 O/ n+ h/ d- ]( F, p, }
}# s) ^5 J% M" Z$ S7 z
! W/ h) s A6 g. T2 Z. h #myUL li a.header {
; v: f! c! r6 _9 c k font-weight: bold;1 M; ?0 W. _4 R3 g9 @8 A- w9 n
background-color: #e2e2e2;' }$ G- e0 h3 Y3 Z; ]9 D$ U o1 y
cursor: default;
( t- s+ x# E1 E6 T$ { } t! k. L1 f; i( i5 ~; |5 \5 S V
5 z. @; Z, d D% o #myUL li a:hover:not(.header) {
5 h6 f n; }; j9 _# g% t& n background-color: #eee;' Y1 M3 q7 x9 B* }+ Z* {$ j
}: K/ q) m7 u# q) l n7 ^6 _' l. I5 ~
</style>, O) G) W& l" B: Y+ P4 _1 y; o
</head>
+ a0 z/ b1 d' d: N9 W! R4 ~3 J8 e0 N& b2 x0 ]7 }
<body>
& {! g' I/ ~/ U/ N+ g1 g( X# Q- Y' x7 U; e3 u' z1 V$ I+ `9 f
<input id="myInput" type="text" placeholder="Search....">* a' p% I' y# y) T" E
<ul id="myUL">
6 b) w6 C" L7 O <li><a href="#" class="header">A</a></li>
6 x( \8 I j) i0 M8 O, e0 s E8 h <li><a href="#">abc</a></li>
2 m+ q+ t# R% N9 a- _) f <li><a href="#">abort</a></li>
2 _$ u7 a1 b( a. k <li><a href="#">abandon</a></li>
/ d$ m$ L5 r/ s
3 D% }( j0 r( ] <li><a href="#" class="header">B</a></li>
9 g6 T- k8 y) m8 L! A <li><a href="#">baby</a></li>
/ i! l$ s. }! f <li><a href="#">bird</a></li>
) j' u2 {6 H& U <li><a href="#">bin</a></li>
& B" U* v! T# T' e
1 Y1 G# W+ O) I+ X# W- { <li><a href="#" class="header">C</a></li>& `# v3 B' w8 y
<li><a href="#">car</a></li>
. q/ J+ J4 o# a! ], r! C) ?" I <li><a href="#">card</a></li>; z4 u9 H3 u# n7 o/ h1 Q
<li><a href="#">cavans</a></li>7 ?3 g. b T$ N( N. V. u# z
</ul>' N# o6 a( y! k: o0 { a
8 V# P. W3 S. H. q- O; H- m! P# S. A
<script>
7 n$ f3 ]# f1 J1 t- d! v function myFunction() {) H4 r3 Q, B# J: _& F% _
var input, ul, li, a
6 L2 R4 U5 Q k& V4 L2 R input = document.getElementById("myInput")0 J4 X; c( w7 ~- ~$ k5 ^
ul = document.getElementById("myUL"); E$ ?( C8 V0 W* W/ O! B5 n$ L
li = document.getElementsByTagName("li")- `/ E1 \: Y( |7 y5 S
var inputvalue = input.value.toUpperCase()
% [* {6 E1 Q; Z; Y for (var i = 0; i < li.length; i++) {
# J! |! ?) b. @ a = li.getElementsByTagName("a")[0]
- }3 O8 x; ^$ r if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
" k& r& I4 p9 G! }9 ? li.style.display = ""
. v, T1 C; r! M8 W }$ |" B" b3 t% c
else {
! {% f1 j! G" o% s! C" V8 m li.style.display = "None";
) r; Y+ Z1 D- |5 X7 j9 ? }
# i/ c. z; R/ o W/ O9 f$ T }
; v0 W4 b% ^) L9 d }" F0 q' e6 F; b5 T* _9 C
</script>
6 G! O% s6 Z9 a% ?3 A9 c</body># c4 ` H' ~6 w
0 s9 Y# }- {, ?, Y5 S: @9 H' g</html>[/mw_shl_code]
9 F: d9 T4 S M |
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
发表于 2019-11-7 19:24:08
发表于 2019-11-14 09:05:00
