|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
9 M s/ y h) U0 P, I; A' R
JavaScript 搜索框自动提示+ Z" n# i" y' b% I/ M `( s% `
. F3 i+ Z+ n V: I
. U% ^6 z% T/ ^+ G) m1 E! E
! a' v* n% c- C( D+ Z+ E# r& R! d- ~6 S0 j( T [* `2 g# E
[mw_shl_code=html,true]<html lang="en">
! o8 R- S$ ^9 U8 n/ J1 ^' J
) c0 Z! @' I& W- j" I<head>8 K" A) \% I/ K5 i6 O, A
<meta charset="UTF-8">* ^- d! E* R/ m" C4 k
<meta name="viewport" content="width=device-width, initial-scale=1.0">
0 c6 p: `- ~9 v4 a# Q9 t <meta http-equiv="X-UA-Compatible" content="ie=edge">3 S, y6 k% B8 C' S/ P& m
<title>filter the value</title>1 J% T2 O7 \7 `6 Q, l5 s |( I( u
' a3 ^, Q) s A+ A ` <style>4 P( b# _1 r( E
#myInput {# v+ i& t+ q) Q' X2 p+ x+ A
background-image: url('/images/mix/searchicon.png');. B$ n U( j# S# i- d
/* 搜索按钮 */
" C7 g6 {) n+ L, n6 l background-position: 10px 12px;
3 Q& G- x8 Q6 ^* `( H& S' b /* 定位搜索按钮 */
+ M, g% g6 \+ k8 S% i background-repeat: no-repeat;/ H7 F. D( P8 Y, O
/* 不重复图片*/
% S1 N+ I# _# Z" S font-size: 16px;
0 @' ]+ C* V0 O) {8 H# F7 R width: 100%;9 o! S4 X/ f& a/ F, R3 K5 _! y
border: 1px solid #dddddd;
& g' x' L# ~# |6 k padding: 12px 20px 20px 40px;
" I0 `* {, h9 x( j9 W( z margin-bottom: 12px;
* e$ Z, h4 k& w }
" f k8 X- _) t) S9 q, s0 ~3 K( k3 X( X& Q- ^3 Q" T
#myUL {. i3 O3 I7 `) o6 q8 P( a* ^
list-style-type: none;
* U- W W) L4 B7 O9 Y1 F- X padding: 0px;
& R( H$ u, i! g& K, J/ X f) j margin: 0px;/ ]; V$ h, T+ w8 @: d
}/ i$ \0 x e# c/ k" @+ k9 \
& m& H- V. k) j8 k) ^, v #myUL li a {9 E2 v; J" F) f& U1 e' q3 R q
border: 1px solid #ddd;7 T p+ L, j" i" X( n5 [6 M% i
margin-top: -1px;
0 z! q6 q% o( r4 o% V9 @* \ background-color: #f6f6f6;
t! G' j9 X( }6 L/ Y7 W padding: 12px;
- {; O: o/ H) J1 [: ]9 F" Y/ Z% t/ p text-decoration: none;
; @ @$ {$ b$ | font-size: 18px;5 J( N. Z& l; r8 P1 m& ]# X% H
color: black;
5 g6 A( h3 V5 T display: block;
$ v: K2 J* U+ e/ v9 h/ u* b# M }
' ?4 o1 ~* t, u0 J* ?7 M: g" j. P
/ L3 a# E; A$ F7 x; a #myUL li a.header {
0 d+ A. X; B7 H+ i2 x' o font-weight: bold;+ [! d y4 n* j/ n, i
background-color: #e2e2e2;" P% m# I' i* I$ L* G! }6 j- ]
cursor: default;
$ u5 b0 `# o- P2 J/ W }
0 Q+ S( K6 ?2 j: J# M
) ]7 @8 o4 ^, _; K5 L9 O #myUL li a:hover:not(.header) {
% U- J2 x9 }5 V background-color: #eee;
+ g; W5 ^# d7 g' V! w, b/ [ }: z; N, _3 w4 V* I; M
</style>
3 `: |* ]0 @9 n C</head>) c+ Z0 }( ]& x( n; R; S- a w9 F
( `: t% I x# n# f3 a$ E
<body>3 V8 y- {% X6 X' D8 t/ ?
N+ T% Z4 z5 K/ F) ^8 ] <input id="myInput" type="text" placeholder="Search....">
! ]/ n' o# r+ r0 j) {3 F { K <ul id="myUL">9 S$ F- p8 _% O& E
<li><a href="#" class="header">A</a></li>
5 w: p2 Q. {4 ~& c <li><a href="#">abc</a></li>
U* V( Q% u0 e2 Y6 |+ H- z <li><a href="#">abort</a></li>
' E! q4 @+ ~/ v9 `4 N! ?0 L5 C$ N <li><a href="#">abandon</a></li>
$ H0 Q% h" ], ~4 l* A& o/ Y0 Y' d6 o. j2 V
<li><a href="#" class="header">B</a></li>1 k5 K( T8 d5 X4 f% l' Y9 z8 t
<li><a href="#">baby</a></li>
# U0 M4 T8 k* W' r <li><a href="#">bird</a></li>
# |) Z* x6 a4 m- g0 b3 b2 o <li><a href="#">bin</a></li>- ^9 l, S8 W' B0 t
1 b7 D5 K/ g$ N. O <li><a href="#" class="header">C</a></li>2 E6 _! {' c) u" J! u6 g9 z
<li><a href="#">car</a></li>' @ S+ e! r8 |
<li><a href="#">card</a></li> _; ]/ P' y! y9 ]( P& ^3 J- [
<li><a href="#">cavans</a></li>
! D0 n6 x" X" R( u6 s; C </ul>& _# |+ q' [0 |# X
" }' `5 g7 q( [% x
3 ]) m2 F$ l7 w& q <script>1 H$ u# D2 U" L& h
function myFunction() {
3 k$ q" r/ l) w& l4 I. |; J) U) \! {# K7 o var input, ul, li, a1 m3 i7 V6 R9 S% \- F; U* @
input = document.getElementById("myInput")6 } h% T( e0 k0 |% b( H
ul = document.getElementById("myUL")% _; w; x& o n7 d
li = document.getElementsByTagName("li")
5 x$ ] X/ J; e1 U( i. | var inputvalue = input.value.toUpperCase()* {6 B$ N- d& [2 ~
for (var i = 0; i < li.length; i++) {0 c. z1 z3 |( l( a( |9 l+ v; n) ~2 t
a = li.getElementsByTagName("a")[0]( @5 k1 a I$ M+ g8 a) x8 }( H2 I
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
0 q: g. y. g4 T# I# a# j li.style.display = ""
' A: M( K1 w( n9 A- B }
& F/ [) \( X v X& | else {
1 s7 C+ V7 \7 w8 L$ V* @ li.style.display = "None";' l. _, P: _, \% x# U
}8 \* S- |% m% S
}/ K5 m1 k( t. ~
}# } N% K: y. I; k4 f: g
</script>. Z' x+ v4 n& B2 D4 i* v; o6 ^
</body>1 X, n0 `! ]9 I, j$ U. h, p
8 D1 O6 s. ]9 {! v6 `
</html>[/mw_shl_code]
& \2 u$ a" ?* g) I& C) H |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
