|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
8 Y( t5 o4 T2 ]" [% ]JavaScript 搜索框自动提示
1 `6 M) J$ [; L! t4 E) l: F4 q& ?1 `
" u* b2 \4 E# T& Y
" t- A2 b0 s) l3 }3 Z4 E' N
* u Z9 U1 A3 f; w5 L) i* s[mw_shl_code=html,true]<html lang="en">
1 E% b; V" W `# f: e3 t" p# c! B! P* R
<head>0 {; g( j" R$ }$ z4 m8 w4 P/ v
<meta charset="UTF-8">
( J; ?3 E; b( O$ O5 n <meta name="viewport" content="width=device-width, initial-scale=1.0">4 P5 T' A% x' C) H, X" s
<meta http-equiv="X-UA-Compatible" content="ie=edge">, C* W0 x1 L2 b% b$ g
<title>filter the value</title>- I; l# g1 }' ?; j/ P: o1 R
1 v" U& }6 f3 a
<style>1 N5 @9 x: u( [. }* n
#myInput {3 {9 e5 J! O' \8 S
background-image: url('/images/mix/searchicon.png');6 ^: h* P% @& h( }
/* 搜索按钮 */
; e: R& `) `4 v5 O* p2 u" M background-position: 10px 12px;& F5 p) N7 F h9 E6 `' a
/* 定位搜索按钮 */# R+ K& t! K4 p* J J
background-repeat: no-repeat;4 k2 I: J& a1 Q8 ? R: z' t
/* 不重复图片*/
- J2 l1 q0 d7 f1 N+ q font-size: 16px;
5 E, E q- `7 K1 K width: 100%;
, _- n/ A6 |! |9 q border: 1px solid #dddddd;
: T5 a% P! u4 ~) t: Y padding: 12px 20px 20px 40px;
; N2 r5 ]$ w5 ~* y margin-bottom: 12px;- v: U6 S+ h( p* r9 ` f, I8 l
}
$ u8 e5 K/ B( m; q! {: q8 W) l6 j" T0 M9 ]8 c P" h
#myUL {* q8 Q3 U. I/ O- m0 ^
list-style-type: none;
' A3 ~( v4 S+ |+ c padding: 0px;' W( Q0 p3 ]" S1 x
margin: 0px;# e: w7 s- `# }, W$ L& p% T$ p. |
}
3 R6 k) S. k! }5 }/ h6 l( p% i; J% n6 n3 y, i( i
#myUL li a {
6 K8 C6 E* e6 Q3 U border: 1px solid #ddd;
6 ^0 M2 y+ I4 }- g1 a( ?6 o margin-top: -1px;4 V% ~4 R# n: ^# z! [2 E
background-color: #f6f6f6;
7 z- h( Y5 w6 I* W l) N; [ padding: 12px;5 \2 [7 q$ b+ v5 p3 o% H9 z* l t
text-decoration: none;
7 v' D4 L/ i) x: ` E font-size: 18px;
+ z( u2 N, l) i0 \# D) o color: black;
S5 @( C$ @4 n* `/ [2 d display: block;
+ N6 r" U' n5 A* K7 u" |- l( [ }, X7 k# C0 X% P* n
( C- h3 B$ O# Z% h
#myUL li a.header {0 V* {* M- r+ |" }5 h
font-weight: bold;+ W7 U' N. u4 J4 S2 ]( R: V' V
background-color: #e2e2e2;
$ l5 w; C8 u: [* a* r3 Z cursor: default;
( u/ P5 l& X3 n, c3 u }
; s" ?; n0 a2 X6 a7 {$ E
* _& E7 P/ w& c7 } [4 w% w2 @' w #myUL li a:hover:not(.header) {
6 _( {& l) i+ W% l% o2 H background-color: #eee;5 [- C8 u) v3 h3 E1 b( I7 P- Y) M( y
}0 s* a9 B: Q$ ~; U6 k0 M% z
</style>
: z; m d1 r3 B# s</head>6 b, y8 ? Y- w& k
' ^. u' g* R: a' X3 J% F: o<body>
0 [) b* F9 W P, Y3 ?6 Z4 Q
" a2 t. S( i. z r8 y <input id="myInput" type="text" placeholder="Search....">
4 k9 b! H! @7 N! ?7 e0 R8 ~, @ <ul id="myUL">( ~/ z- M; l! P2 l( j
<li><a href="#" class="header">A</a></li>4 W$ D' ^% ?! E/ q" [! U
<li><a href="#">abc</a></li>
" e6 m" M. }* t, F( s <li><a href="#">abort</a></li>% J6 B8 |+ p# Y+ d
<li><a href="#">abandon</a></li>
& {4 D+ x p+ Q& ^3 V! r. D% o: O y
<li><a href="#" class="header">B</a></li>
y& S, M5 Q, `. G9 V- k <li><a href="#">baby</a></li>
* H5 F; w7 G, k <li><a href="#">bird</a></li>
5 U! L$ U& q$ B, ~ <li><a href="#">bin</a></li>7 y- d9 _* {- W0 `' w/ S
) a6 t1 q; O" L1 U
<li><a href="#" class="header">C</a></li>
' k3 |& j+ H/ P$ Q ?% `6 o9 M <li><a href="#">car</a></li> ~# K( S$ \* S8 d0 f! y
<li><a href="#">card</a></li>$ }6 V3 s* X9 p
<li><a href="#">cavans</a></li>% u A1 Q( A. L5 u/ z
</ul>
, D8 f0 }* t' j* z1 D
' E% t1 c$ {7 m0 ?) e$ h1 d' @8 V) N; _0 s; H7 \
<script>9 X+ ?3 O2 u& s) a3 m
function myFunction() {
, j! l; R% W5 A: {1 U3 C% `6 e- P var input, ul, li, a, t0 H9 o0 r9 L8 R; U! ^9 T% r5 U
input = document.getElementById("myInput")' C1 [ w5 U) J+ c% _8 k: w
ul = document.getElementById("myUL")7 Q* Y& P- E- B
li = document.getElementsByTagName("li")* s( [ L5 n( `0 I* r/ ~
var inputvalue = input.value.toUpperCase(), B# ]5 z4 T/ D1 ?4 m3 t7 f3 r: d
for (var i = 0; i < li.length; i++) {% g E! O. h$ }' m
a = li.getElementsByTagName("a")[0]. i( `& D. H5 _0 n0 ~2 [' A
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
: P) Y ]2 D C8 G1 } li.style.display = ""
" D4 d' _7 I) h! n% c8 r }' @! A) l* S; H* ]
else {
, }* o' |5 M1 w8 ? li.style.display = "None";
& b9 [8 d" ~! n* @+ [! J }
# L8 X1 E0 h7 I+ R( h5 M }
& V$ w4 R+ ?. M }5 E. J! Q, t- Q9 H! Y8 o
</script>; D) x- a5 ^/ f: u8 {* p* z' q
</body>
" B1 H9 A: G4 E4 m5 S
% P/ b! O) _: F! ^% p$ N; _% N! Z</html>[/mw_shl_code]
- x9 y. L2 W6 X- K2 a |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
