|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
: W" `1 s+ [* y- B4 Y4 K! `
JavaScript 搜索框自动提示 O& q5 u& a2 x, `6 u
U! {2 H+ K1 A9 w( i, |
5 J/ I+ }+ C; P/ d; p' b( p/ }8 v+ r* `+ ^+ @5 r
; n# B1 b/ F1 @, ?+ P2 G[mw_shl_code=html,true]<html lang="en">
% h l, {' K Z6 l% ?
) x0 e& w" s! S# I, {& @<head>' H h* A0 O G. F
<meta charset="UTF-8">
; l* ?4 u" `9 g: m, h: i3 U) | <meta name="viewport" content="width=device-width, initial-scale=1.0">7 r* ^( I- z% z- k
<meta http-equiv="X-UA-Compatible" content="ie=edge">8 P9 H$ C3 T" x# M* L6 p
<title>filter the value</title>- k' n4 ^" Y, S8 [. C6 g
! L; R! e/ h6 p, y- M
<style>
) M6 p( f& D/ s; {* |4 n #myInput {& u" }3 N& r8 x" i. Z7 g
background-image: url('/images/mix/searchicon.png');( e4 }, M; G/ G; v
/* 搜索按钮 */
: C* q; g& v$ _) }& ^% p# V background-position: 10px 12px;
* ~( ^/ {9 C7 u( }9 [+ u /* 定位搜索按钮 */
5 ^) L% o6 e# q8 }5 v2 F8 Z2 M. T background-repeat: no-repeat;. g' A8 Y0 g$ ?
/* 不重复图片*/" y; ~5 j. D: I; V
font-size: 16px;
$ q" ]' L% {6 X3 w width: 100%;- @, F; E2 l. u- H
border: 1px solid #dddddd;( y; ^6 z/ \) X! l2 u3 y
padding: 12px 20px 20px 40px;
2 t% M" V5 x6 S4 S7 \; ^, q margin-bottom: 12px;# w$ `/ e( x% F, e" o( T1 g
}1 L- `( D! ] z5 Z2 Q) ]; a3 J/ ~
, X9 p% R. U7 X0 n% _' @6 b #myUL {' T, r1 G* I! U1 q! m- S
list-style-type: none;% V' ~9 G4 U5 E, n& `7 n4 M6 B3 _& C0 l
padding: 0px;1 G! E$ o0 [* X8 q0 F
margin: 0px;" E& s7 ~, ?2 S p# {
}$ G4 } g3 Y; }- N% j
0 ~$ I% J* C2 P" w; T" \
#myUL li a {
, |$ x+ \" ]1 K border: 1px solid #ddd;) Y9 ?( l( i; H: G! y# P9 j
margin-top: -1px;
4 a) {! t( Y$ t, p; H background-color: #f6f6f6;! t% W+ j! c- e& y& L3 W5 e
padding: 12px;
+ V0 G# k& w* D+ ?3 M text-decoration: none;
- h6 w: K# t; }0 T3 v4 x/ O font-size: 18px;' U9 \3 |* v) ~. ?
color: black;
5 U: E4 p. q# E$ N7 Y display: block;5 L' F4 M! X4 \9 e9 D# ?
}6 Y6 ~* J2 W- m* j# Z% \
* s! h p a3 d5 X2 P #myUL li a.header {
+ N1 T& v/ R) Q i* w font-weight: bold;6 k! t; j% N0 o: d4 }
background-color: #e2e2e2;
% n' ?+ F: p) ` cursor: default;
: e# g5 v0 J$ S& q8 p/ F- N$ t- e }
" b3 l. n" S4 }. ~ Y5 d/ x; k5 S
#myUL li a:hover:not(.header) {
4 t9 S8 y$ T2 i# v, ? background-color: #eee;4 U' j# Y" ^9 f: V0 n
}; I: Q1 P) V3 O
</style>5 O9 t& K. C+ v/ m, y
</head>
$ ?+ q, a* V6 h4 N) Q' {5 n
7 U: y" w9 D3 G4 G5 m<body>
% E! h; p* Y5 m: d5 b
1 }" O1 H N4 }( i3 u, r <input id="myInput" type="text" placeholder="Search....">1 F% D s# L' X4 x9 ?
<ul id="myUL">
9 c9 q1 Y9 M- _ y, B; N1 R9 h <li><a href="#" class="header">A</a></li>
7 C5 ` ^4 q4 G9 ^, z" L5 S9 U <li><a href="#">abc</a></li>
. A" c% ~* X- I9 I* D/ z4 Y: u <li><a href="#">abort</a></li>, t1 [- C: J$ V( n; ]" a( n* z
<li><a href="#">abandon</a></li>
+ }0 |9 Q0 t: e0 O$ I) a$ N5 a# h9 m, ]6 F: m* i* L
<li><a href="#" class="header">B</a></li>' K5 Q, H/ a+ S5 R3 Z) w
<li><a href="#">baby</a></li>) M0 b0 L, B2 u& R- m
<li><a href="#">bird</a></li>5 {( G. a0 I3 [4 _- z
<li><a href="#">bin</a></li>
6 L& ^, N( Q n0 k I9 P5 Y0 h H2 K) t
<li><a href="#" class="header">C</a></li>/ z8 {* @+ R/ G9 I. C2 V$ u3 x
<li><a href="#">car</a></li>
@$ e: I4 k L4 e- \0 N, j <li><a href="#">card</a></li>" I) o; M2 j1 z1 R" }
<li><a href="#">cavans</a></li>
0 ]! ?: M* ^: C: a5 v </ul>' P$ \8 s3 `2 A$ f' A& _( m. N
0 p0 m& x' k) w2 U2 d. T, G" {& `, M* [; c# M7 e
<script>( U7 ~2 s+ L5 t4 v z; \
function myFunction() {
; R2 t5 M4 @1 F2 r var input, ul, li, a! x3 [3 s: y' A8 W; r: X
input = document.getElementById("myInput")6 W+ w) h/ O4 O6 l/ m
ul = document.getElementById("myUL")
# Y% d9 U2 q* s: b0 P" {3 B li = document.getElementsByTagName("li")
* x& x* ?7 k' T( l2 g$ t0 z var inputvalue = input.value.toUpperCase()( z6 @9 z+ T' x$ ~8 D4 L, g7 \7 q# f
for (var i = 0; i < li.length; i++) {
! c4 J) e+ r! D& P a = li.getElementsByTagName("a")[0]/ P; `7 }; i7 Y! e+ f( V
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {2 A/ |) ]6 E. K7 R" E
li.style.display = ""
5 }( b% p! K# W, ~% H }
8 T, s! S. m5 ?/ ]- S else { R' ~- Y3 w" k* J7 {% f3 o9 k
li.style.display = "None";8 i' x3 G2 o8 v4 W
}! S/ ?. R7 b, Y2 a9 s" ~% \
}3 ^* Q% C z* j+ i0 X
}
, H! N& R( V7 |# a& t </script>! W/ S# F6 }7 f* F0 K9 ]& Q
</body>
. F8 t) Y; i' f
+ a6 n$ j& Z( E) c7 L</html>[/mw_shl_code]1 o0 ]' e! y5 H8 K
|
|
|小黑屋|手机版|PLM之家-企业数字化转型工业软件学习平台
