|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
) x( O. ~4 F9 K, G1 _/ _JavaScript 搜索框自动提示5 S4 z6 z8 \1 Q+ U3 `! B; C8 p+ q
1 i: m( z7 L3 L+ T$ W( e; x7 O+ J" U0 p5 g
2 p% m' v# A& R! h/ w+ Y) K0 i% l5 v$ B) Y/ Y! x
[mw_shl_code=html,true]<html lang="en">. B7 ]) y5 M9 F) P
4 }4 I% Y: w) e. H% a<head>
6 h& e, T2 C! g; X4 O9 ? <meta charset="UTF-8">
$ d# H$ e7 j5 q7 e" @ <meta name="viewport" content="width=device-width, initial-scale=1.0">+ m6 W- W3 b& A3 L, l2 _0 l
<meta http-equiv="X-UA-Compatible" content="ie=edge">8 Z+ ^. I* |8 \, s
<title>filter the value</title>+ X( H( e8 V2 k
! q! H/ r1 ^2 r <style>1 P; D) C* I& \0 l, i: i5 F4 Z, K
#myInput {* I" t& Q: @& U- @) v- B8 f
background-image: url('/images/mix/searchicon.png');
8 F4 |6 A5 k3 w: g& H ]7 } /* 搜索按钮 */. |" ]! V. W# J4 k
background-position: 10px 12px;
4 W# R! l7 u7 Z0 }% u$ c l# V$ @ /* 定位搜索按钮 */2 i, ~- z$ H" b* N
background-repeat: no-repeat;# e% c9 T* i ^0 j
/* 不重复图片*/
x- W; J6 ]7 {' C3 a) y8 { font-size: 16px;
4 l' |3 t. o! ?# v width: 100%;7 x! X- P- w6 P6 Z y
border: 1px solid #dddddd;
, j0 Z4 O! w0 y9 c: D/ M' ?3 ^ padding: 12px 20px 20px 40px;
( o4 [9 @# }: X( O margin-bottom: 12px;
+ a5 C% a0 i& g* I( ? }& ]! k4 G0 L& z" ~- l
) P/ o0 Z& Q: y #myUL {8 V' [# c' Q! W( G
list-style-type: none;
+ ?+ S( B# a$ s* s7 E8 S padding: 0px;
7 d& b r* W/ M) `8 g) Y margin: 0px;
2 H4 S6 ^1 [6 Z }# N% l0 d2 |/ N7 ^8 u7 }
! V) b1 q. C0 L; ]# q# k! Q #myUL li a {
/ v1 `7 z$ m2 V& p! J border: 1px solid #ddd;
3 X& \; M: q" [. l; [ margin-top: -1px;
) O7 j# z( x7 l9 C& l$ H% ]6 A1 A$ ? background-color: #f6f6f6;
L0 C' p$ n9 b5 _6 z7 `1 l4 M* H padding: 12px;
e) F% h% t& B- J9 W) p text-decoration: none;
* {! q" Z# ?7 Q- L& ?& Y font-size: 18px;" E8 H; G/ l, e& y) T
color: black;* M3 y% Q2 P4 c
display: block;
! h" P: S7 d5 i- s. Z }
: N; z w+ X- M/ G+ Z0 x; J5 Y% y3 X9 C# j3 Q! \' H$ Z) Z
#myUL li a.header {( _# F @: l2 d7 L6 O, Z7 y
font-weight: bold;. ^3 _6 e, |8 P" y" f2 [
background-color: #e2e2e2;
: Y0 V4 ]. W) W cursor: default;
; y( C' b+ ^: B! C$ f# E) U }
+ I3 D$ ?% l7 s, t: R/ l3 m+ O* m+ s9 e8 _5 V: X6 C, s0 ]
#myUL li a:hover:not(.header) {* c* K1 v3 p# W6 {0 F7 |
background-color: #eee;/ k! Q$ `" c2 I5 T7 t# w
}
- z* L2 ?. ?5 _0 L' ~ </style>
( i0 V4 l! D# P( ?1 S, q% ?</head>
! Q9 s+ P' g7 q" j: P) r/ l( H$ M& ~, V0 q N: c# W
<body>+ G" G, A9 K5 F9 v9 q" k
+ ]5 L8 I4 k P5 `3 |4 ^
<input id="myInput" type="text" placeholder="Search....">
3 Y' k0 s( O- N7 I3 q5 ? <ul id="myUL">& P" m) @$ I! x9 J. n1 B1 Z
<li><a href="#" class="header">A</a></li>
! w. A* G/ ?7 Q <li><a href="#">abc</a></li>
8 M" ]7 x% E' g, S1 d: F/ Z <li><a href="#">abort</a></li>2 W- S& j2 Y1 i8 m, k( _
<li><a href="#">abandon</a></li>+ B3 Y( o4 n# s: n/ I
0 M7 [4 u7 g! h. R/ \& w; c/ h# [
<li><a href="#" class="header">B</a></li>+ A) h7 q, X5 l" d! _. D
<li><a href="#">baby</a></li>: T5 m3 J+ }: L& r& h$ u2 d9 z0 c2 L
<li><a href="#">bird</a></li> m/ |# q2 T& I9 D
<li><a href="#">bin</a></li>
5 H, X& k0 `. D1 p# ~6 ` H* g
( f! j% n& p: E7 `2 ? <li><a href="#" class="header">C</a></li>; a5 S0 g# V6 ^, l
<li><a href="#">car</a></li>" c/ N ]5 T' b; i0 P/ u: j0 Z7 j
<li><a href="#">card</a></li>
/ ]8 x2 j D3 q* _5 Z1 r <li><a href="#">cavans</a></li>! y! V8 z, P2 q6 z
</ul>% E& l' z$ S- K( S1 a+ ^( w
( c, R2 m( y8 X. S* E
+ L$ g( \; Q4 @% ]6 O& q <script>8 [$ z. M) Q$ T, o# k* j
function myFunction() {+ O+ e+ R: z$ H5 D
var input, ul, li, a, G: c. I- L. S0 E. u
input = document.getElementById("myInput"), b& r, W! L: G9 R+ _) {
ul = document.getElementById("myUL"), \4 a: B" I# Q& C- {2 M7 s% x% z3 N
li = document.getElementsByTagName("li")
4 p D' U! [: i, s var inputvalue = input.value.toUpperCase()* g! ~- o. D9 y. m7 F6 Y" ?
for (var i = 0; i < li.length; i++) {# J9 U' D) m: ^
a = li.getElementsByTagName("a")[0]# q8 K0 u, k; a8 R* Z! k
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {! E8 q* p8 Q* u( [; F) c. j
li.style.display = "" K- |$ g7 o' d# W; w C1 A
}
/ L% P& V9 m* ? else {, d- L3 ^1 G& y* t: R! U; G! R5 p
li.style.display = "None";
" a$ R( S# A, `* \/ G# z }3 O" B3 ]" H: V" K# r' Y
}
7 D1 l& \# ^- U- \! e }% A3 y& b: D: W3 U& ^2 g
</script>0 e% A1 I+ H# q. X
</body>) Z1 ]/ m2 E& v7 t/ G
; p3 T) N B9 I' @4 K, P# Y8 ?</html>[/mw_shl_code]9 s! ?1 R5 Q) d# i3 N( ?
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
