|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
7 m3 A5 d; k! z _3 JJavaScript 搜索框自动提示
l# |/ y+ Y& r0 C2 Q. S" `- ?2 X! }6 e# j0 X8 M
0 @1 G7 C/ Y4 Y- J
. }* l3 k; v! o# R+ C! h; y, K3 j% D7 [) j( A5 ^
[mw_shl_code=html,true]<html lang="en">/ b+ n* f# W/ W" ?' e
4 I8 p) g- W$ V* u<head>) C! \- _+ ? k8 k
<meta charset="UTF-8">$ e$ J; g0 N0 c
<meta name="viewport" content="width=device-width, initial-scale=1.0">8 I, r( K3 M4 A: s2 a, W
<meta http-equiv="X-UA-Compatible" content="ie=edge">6 B+ Q5 l9 u: D6 d; O. ]
<title>filter the value</title>
) F3 v: F; R- }9 v. R9 y- w6 L& d7 D) l
<style>
6 F! E* S& \+ T0 d1 P #myInput {
+ p3 `$ \% b$ H1 Q' }) ^( L background-image: url('/images/mix/searchicon.png');4 i* v" r' Q- r
/* 搜索按钮 */5 U% ]) m& O2 W
background-position: 10px 12px;4 l( k w% b; e, U1 J5 `! \. q8 b
/* 定位搜索按钮 */
( e% S! ?* P S. I z background-repeat: no-repeat;
$ x3 n! u% t5 w/ s/ @0 E' i /* 不重复图片*/* F6 B: Z2 c) ]% B
font-size: 16px; V( W! A2 Y: E$ r* i
width: 100%;/ K# ?1 r8 C/ M" m
border: 1px solid #dddddd;
% s( E1 h3 o7 o/ d, R& C( A4 {4 ] padding: 12px 20px 20px 40px;
( s; r' {; b% v margin-bottom: 12px;
# d% l4 I. e5 S" Y }
+ L- x4 B4 n! H4 n
7 ^+ m5 V8 d, L! ] #myUL {
1 M6 q+ G* I) u: } list-style-type: none;
& W7 {3 ]' }1 Q; G9 H padding: 0px;+ e0 T1 d- d3 h+ D/ T8 K3 r
margin: 0px;5 [( |; f; h9 ^# b S6 }
}
: T9 T, Q& [- ~/ [( N: B5 }9 P8 _- e5 w* H" P h: ?" `: Y* m
#myUL li a {
) \" F+ x3 f4 ?9 ] border: 1px solid #ddd;$ {4 Y) `, X2 c |
margin-top: -1px;5 \5 h- k9 t! q+ k- W! B l
background-color: #f6f6f6;
; p i% N/ D, H! ~; X! D {* g padding: 12px;2 H" E4 n) _& D
text-decoration: none;+ c a* m+ P% R& @% Y* h. E3 r, }- W% f
font-size: 18px;
" d9 s; N0 ]2 R7 b: c0 p* p8 C color: black;
- A2 D" b4 w3 `! y display: block;8 x; K% u: f! P) z3 ^2 ?
}* i- Z/ H" b# H! A- Q) F s, s
1 b& O" s) f2 `' N& e. |& z #myUL li a.header {
. c2 j) D7 W0 P8 S font-weight: bold;; g* m! K- d0 M- g$ ]. ^
background-color: #e2e2e2;
- }+ ]$ Y! U! m: T6 z. N+ } cursor: default;
( N1 |5 C7 B: O5 p% v. \$ g" y }5 y+ y% q( r* j* F- f9 f; `5 y+ n
7 m8 p* b- C! x$ {/ w f- c2 ` #myUL li a:hover:not(.header) {/ W5 w0 p" j! q+ I& @: o% z
background-color: #eee;- I6 a9 B0 }2 O: ]# Q, `
}5 O& d( T1 B- s5 I; d0 W
</style>
5 c$ ~- y& ^! R5 k3 t7 Z</head>
/ g3 l+ @5 G m, e8 g0 M
; {* K8 R, A% [3 G$ `) E; t<body>
6 q6 U0 Z% i, Q! E/ \8 B3 S
6 I9 h4 q2 F1 B; |7 o( f; E4 C <input id="myInput" type="text" placeholder="Search....">* n; d( C) N2 g. E
<ul id="myUL">
0 Z# p* |# W D9 ?& @. j6 a4 ^ <li><a href="#" class="header">A</a></li>/ f" f6 U; S3 v% j' H! ] }- C
<li><a href="#">abc</a></li>
4 g: b9 n5 l% y' T <li><a href="#">abort</a></li>8 r+ u- u9 ]# p# t; Q
<li><a href="#">abandon</a></li>' S! {3 Z. I9 `" b
' Z* G* }% z& x- L, c <li><a href="#" class="header">B</a></li>) A6 S/ {9 P' I- [& _( m
<li><a href="#">baby</a></li>' ~, k/ _1 ]# h( Q. R
<li><a href="#">bird</a></li>% f6 t6 ]" e) N: M0 D$ I, M
<li><a href="#">bin</a></li>& A4 w) J& Y) t% A+ n8 S9 C8 |1 Y
" H1 P( N% b& v f; K/ w <li><a href="#" class="header">C</a></li>
4 y# ?( Y' T) o# y/ p <li><a href="#">car</a></li>
8 b) K% f9 D, t. ]) c: h8 l5 A <li><a href="#">card</a></li>
0 [+ C/ E# V0 y6 I' x8 f+ f <li><a href="#">cavans</a></li>. \! E1 a# _9 k1 z# m ~' O" O
</ul>
0 e8 `) L+ ?2 `
! j( C7 N1 z2 k3 e7 a( G L! s- j9 w2 r
<script>
" M. ^. h2 G! H' Y7 r" m; \ function myFunction() {9 }0 ]8 Z$ S) ^
var input, ul, li, a
; C5 |9 ~9 P7 o- d4 U/ e% o input = document.getElementById("myInput")9 I( _% J- L1 J! k0 e
ul = document.getElementById("myUL")( [7 u' d, m2 I' ?
li = document.getElementsByTagName("li")
2 F5 s6 Z% n, b U( x+ I var inputvalue = input.value.toUpperCase()
) ?% l; L) f0 I1 e for (var i = 0; i < li.length; i++) {
. _' x* X4 [' H, r a = li.getElementsByTagName("a")[0]
: a9 D- k( }8 G5 N6 x if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
5 P2 ^5 \/ F. W) N+ }6 } li.style.display = "", e& C0 l5 n. P; M* {* s% G6 ^5 M
}
& z! y ^+ P" ?, [ else {
C, N8 c5 u# B z) M9 j) t li.style.display = "None";
4 T5 D% I! p7 X3 e }
& u5 d8 l) H3 t9 q- E2 l }( d v- W, W: K0 u ]- t3 o
}. u4 j, g' m) d. `" t6 W
</script>
* s& C2 ]5 S+ `6 T. c& _) B</body>
# w" _5 A! G) `" M/ {0 e! T1 H9 t2 y, O$ g, m) p7 `! L
</html>[/mw_shl_code]- P" s h8 n& e" A B
|
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号 )
