|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
( p# F$ |: B# R8 U
JavaScript 搜索框自动提示
( _( ?! _+ S- b. C8 G/ G( S. \( R: }
) o" L' }. P! P, e
8 H) ~; ?. k+ ^+ ]/ O/ c+ `: k' Z* b _3 n- L! o v
[mw_shl_code=html,true]<html lang="en">$ s6 F- c8 y, G* h% F% C2 e! x
( C# V3 h# a& ~' B$ g<head>
; ?/ c A l* P! f* ]4 W5 Q( |5 V <meta charset="UTF-8">
$ k! v" h6 \8 z, a6 p& N: N <meta name="viewport" content="width=device-width, initial-scale=1.0">
$ n; G0 C! d( i <meta http-equiv="X-UA-Compatible" content="ie=edge">0 J# E6 l# W( z5 d, e, \; q
<title>filter the value</title>
/ b+ Z! W2 V2 x
" T: R/ b: h, D9 M- }/ Q N% X, O <style>& G7 n9 S( Q9 h
#myInput {
0 B- R1 F0 o7 W) t6 X5 J background-image: url('/images/mix/searchicon.png');& l$ J; [6 I: T a0 _8 j' R
/* 搜索按钮 */5 A4 M3 P" L, N% Y" i( F
background-position: 10px 12px;
; ~% ^. e9 G" z1 d! z% D /* 定位搜索按钮 */6 @! q/ \) H3 ]. H
background-repeat: no-repeat;' M: ~! }. v) {
/* 不重复图片*/
4 [- D6 e( @! E! J" A font-size: 16px;
% w, t2 E7 a$ E8 Y, b- } width: 100%;" f3 F# T w1 X0 J, q
border: 1px solid #dddddd;
0 f1 j4 S+ v4 P/ [) F padding: 12px 20px 20px 40px;
' G0 B0 V7 b' o- |! q( b margin-bottom: 12px;
& U6 q% }/ W: x' o }
, M6 F. G1 g0 r: i* g' E3 e$ V* E j
#myUL {
8 V+ e( V: G8 `# Y/ { list-style-type: none;
) j' V% X1 t) a$ J5 q padding: 0px;7 K& ~ p* r6 `6 F9 A9 j
margin: 0px;1 R% M( C* b: V& ^+ b: m* l
}
7 U6 S7 |! k$ X; R" Z' h* e. x8 J7 B% N& P' p& T3 Y- x0 E& U5 C% i
#myUL li a {
) m& y8 q! l7 w border: 1px solid #ddd;
+ Q) Q8 W, O) R' d margin-top: -1px;$ A1 F; [" p' n4 P, _1 D% N
background-color: #f6f6f6;5 z$ ?5 _5 h9 P9 u( ]2 w1 E
padding: 12px;2 e( ?6 C1 W) g1 s* ?
text-decoration: none;
7 t" S+ z9 h/ m- T j3 p6 v: T font-size: 18px;
: i6 i5 p1 H0 F& X" C1 W) e) d% h; Z color: black;
7 o0 I5 ^% s9 | display: block;+ A2 Q4 f/ Z* _7 _; h& ^, G+ |% y
}% r9 ?2 g) w: A6 ?1 p
( a' |5 v* D9 d }' e
#myUL li a.header { P; j8 l& S- X. R2 I
font-weight: bold;
4 v% K% a& U% v+ @" b. a$ C7 z background-color: #e2e2e2;6 }% `+ c# D3 X
cursor: default;
5 q z% U, q1 v5 u0 g+ m- x }. Z2 a, Y9 p' P- U- T
# H, x' U1 j! l7 a' N1 k Z
#myUL li a:hover:not(.header) {
# H& |. f' s$ T background-color: #eee;
, w. O& S" W5 J* Q: [8 H }% v8 q7 m6 R$ C
</style>
6 i5 U3 F, t9 \, G" h</head>1 W$ t$ @7 H8 u% ?; K; N0 t
' k: A& M( ]1 w* ]( S
<body>
1 [' O* J8 t% T8 _, `+ e0 o+ Z
, L2 F" b1 V* u3 W- n <input id="myInput" type="text" placeholder="Search....">
: a6 R O, S% X9 f <ul id="myUL">* j% V! A) I7 |- Q) X. i F
<li><a href="#" class="header">A</a></li>7 z; E2 l G% ^! v) M/ J
<li><a href="#">abc</a></li>
1 L) y! L% L: ?' @% s: Q <li><a href="#">abort</a></li>
! d7 m4 X& R1 @$ I$ s- T <li><a href="#">abandon</a></li>1 O/ L6 t3 S5 \0 n) Y% W5 n
! x" t! s* u+ W8 r7 \8 n
<li><a href="#" class="header">B</a></li>, ?( v) y2 A9 w
<li><a href="#">baby</a></li>1 _7 o6 g' O% D+ s* |
<li><a href="#">bird</a></li>1 x! X3 j# Q7 [( |/ ^6 T0 w3 S4 U
<li><a href="#">bin</a></li>/ L! T3 w5 @: l& N
0 g3 H- d% p4 E) u" u <li><a href="#" class="header">C</a></li>
! ]) a" F' l, {3 E0 t# w <li><a href="#">car</a></li>
! ]0 L5 E" M, r <li><a href="#">card</a></li>
$ z' v# p3 I; h" O* {7 j/ L' Q, z <li><a href="#">cavans</a></li>
/ |* v |! f# D+ a& E, }: o </ul># L# s" T, }+ c( v% [
9 S1 i5 O* a4 v: v% V$ ~. T
( `% e F2 R( y; y6 D6 X% e
<script>
' I9 @, S1 I) Y3 S7 R$ G+ p) d. b function myFunction() {3 _* m+ ^- G3 P7 M0 f2 X- ]
var input, ul, li, a2 K A4 j2 I0 D; \/ ?6 C6 y
input = document.getElementById("myInput")% }+ j/ V, r1 B9 r
ul = document.getElementById("myUL")
' j! Q" l' W& D1 J li = document.getElementsByTagName("li")
( T, |; {. w" ~2 s7 _1 s# c var inputvalue = input.value.toUpperCase(). \" k* I3 E4 Y0 g: U8 k @
for (var i = 0; i < li.length; i++) {& {& k8 |2 W C" {0 F, O8 \$ W2 c
a = li.getElementsByTagName("a")[0]4 i6 w! q- f1 T
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
3 f3 e% C$ c) u- d6 n3 ] li.style.display = ""/ m2 B% ?0 D& p9 K% K- V" e
}4 t, ^1 Y% N- H2 s) C5 n3 ^' t; L
else {
1 z5 }3 t" t3 ?4 Z5 j+ f* i X+ l li.style.display = "None";
4 @1 G# o) z2 O& v% W }( ^% X6 S D' ~+ E( j, E# y
}
$ g4 r/ s1 j# d& R1 L, w }
1 ~! H! K0 K6 Y </script>+ j2 ^# p) z8 g6 B* H) w
</body>7 _* N2 \. q4 E' K
) m* ~" D$ n, M! |5 N
</html>[/mw_shl_code]2 M" e" Q6 B, q' R; \2 K
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
