|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
+ e: t! R, G! @+ K8 BJavaScript 搜索框自动提示" {- o( X% B$ o0 M+ r
6 W2 o' Q$ _9 A
3 z+ `& a" I% E7 N
5 h2 A/ L4 V( l5 L8 @8 F: {* z1 H' r
$ ?/ I. w- @& U8 K8 x
[mw_shl_code=html,true]<html lang="en">
7 E% M6 B* @4 m6 w G1 I9 _5 f! X) [( v5 U* i
<head>7 B- o/ H: Y3 q( }
<meta charset="UTF-8"># f/ k* i3 D, c! N( W
<meta name="viewport" content="width=device-width, initial-scale=1.0">$ z1 K. f' \/ Q& U( `
<meta http-equiv="X-UA-Compatible" content="ie=edge">& K( C4 _ G/ _3 f( ?7 s
<title>filter the value</title>
+ e; O6 ?: Q8 j$ T" j5 k/ p" T" `0 v( l
<style>
; c& w' X1 V3 j B/ o" ?# d #myInput {
0 P0 c) C5 A) E background-image: url('/images/mix/searchicon.png');
4 P7 b: @: R; d& t2 o; G /* 搜索按钮 */
2 ?% O5 J. @7 ~9 \ background-position: 10px 12px;
( @. G' M% e6 o/ ^ /* 定位搜索按钮 *// w$ z5 y# l3 E! R$ Y" ?* _( \+ v
background-repeat: no-repeat;
4 ^: L. G% H: k9 j /* 不重复图片*/; b! ^! a8 R2 I+ E0 P
font-size: 16px;
( y2 e# D: A3 h$ V- @ width: 100%;
$ R% V A8 `; Y* m% C border: 1px solid #dddddd;2 H; F( u! {4 C" l: T, c0 m
padding: 12px 20px 20px 40px;1 J/ a; N" [( ~8 H8 N
margin-bottom: 12px;
" W6 e6 D: o, [+ ~2 {: B/ Z }
) L! L; S3 E+ y6 h h
& i; M+ O$ A1 F. s1 C9 h #myUL {
+ a. Z( p5 \7 i' V0 } list-style-type: none;+ k- v0 w% A4 B
padding: 0px;
5 }. P% \5 M ?; {5 q( a2 c7 U margin: 0px;
7 S; @' I4 ~6 w2 p }
7 v. Y! A% P1 r, f5 a2 g! n7 [5 M% }7 B5 z: N& W, j) m
#myUL li a {
6 ~. h% t, ~% O6 @9 c" e border: 1px solid #ddd;
4 v: k; H0 x/ Z7 y- V1 _0 s9 o1 y margin-top: -1px;
; o- U' L7 C9 r( \0 f; s; N( N background-color: #f6f6f6;. }& @* R% T s( V8 L1 D5 M
padding: 12px;( O q9 _+ _6 i2 P5 r# m& \# V# e
text-decoration: none;' r" | m3 o& u1 k+ P
font-size: 18px;
C: b8 `- X* u/ x" M" t" Z color: black;
: L8 P8 v: q/ ?* A7 B display: block;
7 u8 K% V, y+ n2 `9 S R' T }. P7 c5 g) G+ n$ b- k: R) L6 k
4 w/ |4 Q& ?. b* c6 p* g( q
#myUL li a.header {+ J# |2 }/ A# Y, T# k! [
font-weight: bold;
8 Q" P' u5 Q& a4 U2 z: T8 O# Q8 O background-color: #e2e2e2;
) B! n! n; t; g- u cursor: default;0 s) s4 Y: a+ ^# B4 ]( a$ G
}
% M' d7 t2 ^' x
) O" ~5 @% q; ^0 v4 e$ a" H- e #myUL li a:hover:not(.header) { c9 r+ O5 v5 E" d" G$ s
background-color: #eee;# i3 [$ Y8 [6 j: h+ ~% a
}
0 z; {# d2 `* l </style>' @" J% W( E9 g5 _! D2 t
</head>
$ Z$ I5 j; }! ~, b# l; c
: W; X0 K! X) T# R<body># X) x0 ~+ k* l/ }: L; J- v
1 R1 b! Z8 E' W9 b
<input id="myInput" type="text" placeholder="Search....">
7 z% x0 T: F4 f8 U' F! N: K# Q7 T <ul id="myUL">, M& S) E2 }, z6 d N# I8 ]& [2 B
<li><a href="#" class="header">A</a></li>" ?$ l: [& j! {' z8 a
<li><a href="#">abc</a></li>
7 F0 l6 W; z. [ <li><a href="#">abort</a></li>$ _7 F) Q; m5 e% k: g9 Z4 @ g
<li><a href="#">abandon</a></li>7 V" T2 s% L, ?2 D- Z4 w, f2 Y$ j
# K0 [8 q& ?* s3 z. I
<li><a href="#" class="header">B</a></li>
2 V$ A! U; H8 ]" d; h, f <li><a href="#">baby</a></li>3 K2 o. u: s# m5 E0 G, T
<li><a href="#">bird</a></li>( X3 i, y# i% |8 @+ f- P
<li><a href="#">bin</a></li>
$ x) X5 L/ s w; R' D' e4 p
; Y# S( k+ e9 u$ F& d <li><a href="#" class="header">C</a></li>, c: _4 F1 k7 g3 e7 l
<li><a href="#">car</a></li>: L3 y1 W* @( u% h1 ^, L
<li><a href="#">card</a></li>* a% ?5 x; ?1 Y% c& ?& X" s
<li><a href="#">cavans</a></li>1 @, v4 l. `. d. W3 @
</ul>: z7 x" `" `" x8 H1 I
3 W( Z `% w7 o) B4 ]0 J
6 A: X w' K% j# d! v <script>, m3 v( ]. U* `1 f. } H
function myFunction() {. J+ l5 X5 y/ x
var input, ul, li, a/ I, H* v- K9 z+ O
input = document.getElementById("myInput")
' `8 I/ v+ Q! V8 S1 \ ul = document.getElementById("myUL")( w3 @" W/ \6 @, s6 f
li = document.getElementsByTagName("li")
2 f$ p' Y6 E2 c) J# `; t4 \, D var inputvalue = input.value.toUpperCase(): m' h6 E" D+ X; f. S
for (var i = 0; i < li.length; i++) {
) w2 x$ \. ?5 N$ b: r a = li.getElementsByTagName("a")[0]/ Q* C# c7 X- m( R: d4 B
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
+ g$ ^% f4 K: E0 Q0 Z li.style.display = ""
- y' O5 K7 H! ]" \8 Y9 T. O( F }
7 [4 t. J* ?/ U- A3 V else {
4 }9 H a& N0 ^) r* P2 o li.style.display = "None";0 Z+ _& H8 b. L2 Y5 L" a
}& E/ {$ I# ~: Q G+ w" _$ B! p9 S; K
}
8 O' f8 @# ?2 A% L }$ {9 C" a) G* V6 e/ C
</script>
/ } I, n7 m9 d$ e% f</body>5 v8 ]3 ^& J5 v l8 ?
4 D7 n9 J/ T6 \8 B2 A" N</html>[/mw_shl_code]2 Q: _2 ~( ?, R$ S, n
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
