|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
; ]/ g4 q6 z0 C/ z, b$ l: A: B4 `
JavaScript 搜索框自动提示7 f: I" M; T. Y" H3 v" |# ^, c7 w
: X. \/ n5 j7 }+ v1 E3 w' }; L( F3 ]3 f2 i6 g6 a. v
3 C% q8 S, ?$ t# J/ C9 g4 t% p$ L, {- _. y& ?- p9 T
[mw_shl_code=html,true]<html lang="en">4 ?& {. U5 [! ^: n
# x: m' D. w) a5 Y; X
<head>6 H2 ?& H6 n5 g" ]' I) @1 T$ {
<meta charset="UTF-8">. D9 c! s" L8 s0 s" E
<meta name="viewport" content="width=device-width, initial-scale=1.0">6 T, t( Y, @. ^
<meta http-equiv="X-UA-Compatible" content="ie=edge">
}+ x5 ` M7 A+ [/ i! ^ <title>filter the value</title> J: ]' H* ]( |' G
$ B( X; c) m- i <style>
2 g5 ?( E7 O% J* A #myInput {) e) X. D0 i; Z W f1 m& n( n* J1 Y
background-image: url('/images/mix/searchicon.png');8 y' l4 P: l# @9 j( K* E% V+ n
/* 搜索按钮 */
/ S- G0 @% |8 A& p- ~' x$ c background-position: 10px 12px;
0 f7 [5 P8 `$ N t. F; D /* 定位搜索按钮 */7 h, o0 c9 Y" O
background-repeat: no-repeat;
- e% l$ L# p$ n* O* D9 l/ v( } /* 不重复图片*/
s4 r# ]$ ?; K) j; D* k) G font-size: 16px;1 V6 P& |! R8 S" B1 |" Y' {& V1 S
width: 100%;
2 i7 _6 V# p- a& _0 h border: 1px solid #dddddd;
; S& A* n6 A) v& Q padding: 12px 20px 20px 40px;# ]" a% R0 s$ }& q+ w) x$ o
margin-bottom: 12px;' X3 U2 r# l" V- q9 m; q' q v
}
% `( [! _; l A$ h% H; h3 v
$ r2 T. t! l5 b- I2 Z% v #myUL {
) t% H; v4 D, R! i* |# D+ G list-style-type: none;
c x0 o; V5 j- D; K) L padding: 0px;
# C2 c2 m+ `2 s! U margin: 0px;" I0 L6 w3 s* B9 V ]1 r$ v
}
! u. h" S; S, f {+ D2 s% }
" X9 m1 g* P1 k& Z2 [0 a2 Q8 z #myUL li a {
/ ?! {1 z2 M$ m T/ x2 l border: 1px solid #ddd;
; u# R8 T3 D: B margin-top: -1px;
4 Q6 M* w" N- e background-color: #f6f6f6;
v0 G; w1 m- c7 Z0 Q padding: 12px;+ h# k* q% W3 l. K# H) B3 I
text-decoration: none;
n9 J+ m G7 K4 e# V font-size: 18px;2 q1 N5 l& f' ^9 S7 t" r
color: black;2 u) f& P7 q1 i' y) X9 K- g# V3 R# ?
display: block;
) d- p) N: ]9 K7 [- d }
9 a" S+ ^) f4 X5 d
2 v, `1 }) T" y6 B* } #myUL li a.header {
/ S. x6 M& t$ b; ` font-weight: bold;8 T& B9 B2 }1 {
background-color: #e2e2e2;
6 E" D+ J- K0 q% v* ` cursor: default;
6 T) A/ L, J/ l9 H; d }
2 G" b5 o! s# V. M" O
& Y& A, l- }. Q8 o #myUL li a:hover:not(.header) {
! @1 j5 W" y5 n6 j; q! i# e! G background-color: #eee;
% Q4 @6 n" l3 {$ g `" | }. d/ P3 s7 e% w: i& s b2 P& c' V
</style>
; r6 V1 m! G- e8 h</head>
* I# x) q7 K' Y" x: v7 {4 X6 u, T& k( @# B2 f4 v( X) f' \5 F! J
<body>
- A- j* Q% m/ } ^5 i+ U
W- l( y. N% \% C* Q' j- f <input id="myInput" type="text" placeholder="Search....">
- g' ]7 f# }0 B( c! l1 T <ul id="myUL">9 h) g+ s! m/ L; n% @' z/ r. f
<li><a href="#" class="header">A</a></li> n Y+ {7 r$ I( A; f# F# Q
<li><a href="#">abc</a></li>
9 c! C) T- N) C7 ?: [% y <li><a href="#">abort</a></li>. L+ z, v" P1 d# }9 n
<li><a href="#">abandon</a></li>
2 g) x' v; ]( L2 u' O i' T) x" r5 |
<li><a href="#" class="header">B</a></li>2 X/ B0 A; H7 k
<li><a href="#">baby</a></li>
: d9 ]- h3 T; `5 P) X6 g7 F <li><a href="#">bird</a></li>' G4 B) {9 X* }, g! F1 q2 _
<li><a href="#">bin</a></li>
& m" L1 B% K* m' ~ H0 u
, F) x9 A& v4 }6 @ <li><a href="#" class="header">C</a></li>
) i! l- m/ s; A( q6 \2 p <li><a href="#">car</a></li>
# _: X/ Y: q! g1 i5 y) I+ N& Z1 y/ @ <li><a href="#">card</a></li>
4 Q, H( B2 d& j N* ~ <li><a href="#">cavans</a></li>1 N4 W( f* a* g9 G" F9 ^+ z
</ul>
% |; ^) c+ b" `' H0 T- {; e: h& q4 @0 t4 j* o2 o' L
- Q' `7 ?$ p" j! { l) O Y8 l, m) y <script>
( t, `6 {( B4 ]8 j( K- ~$ { function myFunction() {: C/ m, E0 k% t# m
var input, ul, li, a
2 a5 I/ {" t( n0 H, | input = document.getElementById("myInput")' J2 y% J X! Q D9 u2 l
ul = document.getElementById("myUL")
% A; b4 K6 |1 f: Z$ E6 i" ~! W8 _/ I li = document.getElementsByTagName("li")( @8 D6 f" g1 e* X$ f7 C. H
var inputvalue = input.value.toUpperCase()
3 n: l2 R8 F/ X9 Q0 E6 w for (var i = 0; i < li.length; i++) {
" J, o# a$ [ M8 f a = li.getElementsByTagName("a")[0]
8 c* b. Z; u: e if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
: K: h5 m0 ?' w, q5 q li.style.display = ""
3 U1 D# w% D! W" f3 Y$ k& D }& u6 D" ^! V: E" u8 o" `5 c9 Q
else {
/ u2 R8 l, h8 J li.style.display = "None";$ }" d, v( L. m. N7 ^4 w* ]+ F! o w
}
# I8 ^1 w) u- a. O }6 j' A, R: g# G. e& ^
}0 ?# g2 B- M: d/ d/ V. e, ~6 s0 r8 m3 [
</script>: k R. v r3 g
</body>
c& I& L: D3 y
* \% k' M0 H6 {1 L% u( ^</html>[/mw_shl_code], R, E r3 |9 C6 S. B R8 x! Q
|
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号 )
