|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
+ J$ k4 o& F1 i& X0 KJavaScript 搜索框自动提示, G' Y1 C, }! y4 s7 N
P/ \- J9 S4 ^1 \7 X
5 d& e' m5 @" Q
+ ?5 `% ~3 N7 O1 G4 i
2 [9 e/ g( ?% e[mw_shl_code=html,true]<html lang="en">
% u3 V$ \$ K! S3 C4 x
! u1 X- N. I \- i) x6 `<head>" t' X& m9 {4 u! a/ D. N" m
<meta charset="UTF-8">2 ~- {/ u: p2 I! r/ ?4 B
<meta name="viewport" content="width=device-width, initial-scale=1.0">- M# j0 ^9 M8 y9 X
<meta http-equiv="X-UA-Compatible" content="ie=edge">
h+ Y9 M% \3 Q9 B$ L <title>filter the value</title>+ g; \# }* o" q+ f5 r6 y2 y/ d2 \
9 }' [( _: w# h$ z8 r% Y
<style>8 w% ?' j" Q$ M: X* _ u$ l
#myInput {
1 l; B" w9 c7 z9 ?6 ~+ ~( ~- @ background-image: url('/images/mix/searchicon.png');9 A- U! ?$ O' c
/* 搜索按钮 */4 }% \% F9 _) V$ [ }6 |* A2 k! {
background-position: 10px 12px;
' O2 G# ]# G7 n /* 定位搜索按钮 */9 ~- D0 m. w* p
background-repeat: no-repeat;
: {$ X7 }# M4 X* U' E" w /* 不重复图片*/$ T' z: d) {. ^% a
font-size: 16px;
$ n# y. m" H- H2 R width: 100%;* P' @) |! @! z0 Z4 `5 V0 b' a* V! E
border: 1px solid #dddddd;+ ]# n! Z% y. F/ y3 w9 W- Z' q
padding: 12px 20px 20px 40px;2 Z4 X0 J/ Z6 e& r! H
margin-bottom: 12px;3 c8 F- f% q1 I. l7 u% S
}$ k: {* y+ a0 Y
) q, B% Z2 p# X: W- e #myUL {
, z/ S6 U5 \& P list-style-type: none;, B; s: \: `4 s! r# ?; c
padding: 0px;" ^( H8 _ z5 n, G( T( K$ [
margin: 0px;# i/ g, X) R) ]8 T
}
( p3 \8 E! `: q2 S) v
" D& q3 }0 A( Q$ Y #myUL li a {
/ E& ]6 v; [* y5 y* D border: 1px solid #ddd;, j8 O/ M$ d& q( C% B7 M, p" X
margin-top: -1px;
# _0 C4 v* C# D) R3 U background-color: #f6f6f6;
% a! u7 C* ^2 \* n9 T padding: 12px;; p; K4 P7 K5 `5 x1 P5 M! T" J
text-decoration: none;
4 C) f% k( Y+ ?7 V2 | font-size: 18px;/ S$ h5 ^! ~- ]5 B, g! w
color: black;# ~6 M% q2 M D2 s3 I. j
display: block;1 l* ^3 l- b6 G2 z. Q
} u8 |+ S- l' T2 X- ^5 q3 p
6 S# {! C& i' ^9 Y5 u1 t #myUL li a.header {
5 x: S. M- a- p0 n! V# W2 x font-weight: bold;
5 y% k$ R; `! s3 a. b background-color: #e2e2e2;
" V& v9 \. G) F( @ cursor: default;
$ j9 [* p9 B+ m Y* S0 V }8 \/ i; E# q6 m0 @- e! x
" F( Z. S3 t& \7 f
#myUL li a:hover:not(.header) {6 S4 B$ d& a+ Y/ S0 m
background-color: #eee;
0 `, k5 z c: ?9 h' P }
2 _" M) J$ f- e# \0 ^: N- j* D </style>; d% e% n }! S" c- u0 \! U
</head>: O1 Y5 t: S2 T8 r7 }1 M# l& n
# ?! T6 |/ } W) Y9 u, F2 Q/ w3 Y$ \<body>
- [: N( R* w4 V# D+ ~. c+ q5 Q. Y+ |
) P2 a m' u! o) `0 q <input id="myInput" type="text" placeholder="Search....">0 T% Y; D, B1 w1 H
<ul id="myUL">
) ?* A7 m& W, n6 g3 ^8 ~/ N <li><a href="#" class="header">A</a></li>! }! i: p5 N. d+ l# z
<li><a href="#">abc</a></li>
8 d1 t7 j, P, f, U4 t7 ~! u& d" f <li><a href="#">abort</a></li>8 X! d1 G; V) S8 t( {% o; G4 e
<li><a href="#">abandon</a></li>. l0 K( }7 V, z( e, p
; T- r8 @% R8 U* \1 E! [/ K
<li><a href="#" class="header">B</a></li>8 L9 d8 H. w- z) Z& N
<li><a href="#">baby</a></li>5 t# m/ D# W X$ w: e: a2 l
<li><a href="#">bird</a></li>6 \7 C: H1 Z0 f; W7 `7 W
<li><a href="#">bin</a></li>
3 u; m, E0 I7 D7 d* c# ]7 f. d9 k; n/ V b& I
<li><a href="#" class="header">C</a></li>
1 x) `/ u1 J2 U2 A# j* D <li><a href="#">car</a></li>' O6 P7 _" a; G& R9 [9 n. f
<li><a href="#">card</a></li>
8 m5 ~5 C! l' n& [ <li><a href="#">cavans</a></li>
- P6 a0 i/ f9 a7 O5 F. O5 x </ul>
4 Q, a9 a& e- \' U. w9 g" o ]
% w9 d" K9 ?. u- |0 q4 k5 V% h; ~- [( {' f# k
<script>. @) {6 m- ^6 q
function myFunction() {
/ O! p, i- O' t# `9 i8 x2 l var input, ul, li, a
t6 ~5 p3 a/ d input = document.getElementById("myInput")! |! P T$ a1 b* o8 y7 g8 D
ul = document.getElementById("myUL")
# ~8 P2 G6 R& `* D) |( a' f li = document.getElementsByTagName("li")
7 @+ X9 ^( a2 V' M6 c; z) w var inputvalue = input.value.toUpperCase()
6 K [# `* C6 P for (var i = 0; i < li.length; i++) {
0 B3 V: l; m1 B+ G9 O6 }* {" k a = li.getElementsByTagName("a")[0]
) c; S9 P% S* t* _$ a/ x. \: O; J$ K if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {( | z' `9 R4 J
li.style.display = ""' F3 ]5 Z7 ?, ?* A& }; L' B9 s
}
; h1 M2 c6 n0 L. ]9 B else {. W; A/ ]9 O4 t% q& x
li.style.display = "None";2 W0 S0 I! `4 A; t! \, w/ A
} z! z5 X2 n' N' ]& q
}+ G b8 a& @) _
}
' Z6 l1 \( T+ J0 k" v! [ </script>. Q, d) y* X$ ^* s
</body>* u- c* C5 J; g9 s8 |
! v/ m& F( ?! Y2 I! }
</html>[/mw_shl_code]
# ^) `8 g5 a0 W4 b; ]) _+ A |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
