|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
$ Z) m! H% b* QJavaScript 搜索框自动提示
( ]( M2 Z) k0 w+ O1 X' O* b/ c/ Z. m( j
" R: x6 ?* d9 S* z( I
; Z% R5 \5 v- c" k
( G5 i* h# q& R# b, P[mw_shl_code=html,true]<html lang="en">
! c" G3 x; ]6 b% }, o3 u4 s( m7 l' C0 x; h7 ?( j1 I
<head>8 _( H/ H: m3 u8 {) n# f) j( f
<meta charset="UTF-8">9 W% H; U& J) @1 J/ C X: a! T
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- w* n" u( ^# v2 W <meta http-equiv="X-UA-Compatible" content="ie=edge">
4 u+ \ A; F N0 E. \/ w6 p% W4 [ <title>filter the value</title>
+ p4 d; c K; _1 ^" l+ l
0 O5 B; Z2 Q! a! ? <style>
% o2 h1 Y8 e4 q% o #myInput {
! X% G# c/ v4 W background-image: url('/images/mix/searchicon.png');+ o$ o& Y! G5 b$ Y4 M
/* 搜索按钮 */
) D" L- q2 G! Z, e! D background-position: 10px 12px;
e1 g$ n0 O9 X$ h3 G6 k /* 定位搜索按钮 */
& t- k% Q3 p3 l" t( W' h background-repeat: no-repeat;
# o8 M3 L' S5 z1 ~ /* 不重复图片*/
! @/ l3 |. l8 i, P; U$ u font-size: 16px;5 k) A6 k& [7 ?
width: 100%;* {# e; L" O4 U, Q% \( M$ j
border: 1px solid #dddddd;; Q; N c1 B% O ]" A
padding: 12px 20px 20px 40px;
0 n! Q6 X! C" T; | margin-bottom: 12px;, r, e5 m1 c0 F0 C; z4 \
}" | f( b7 Z9 G
; k/ n2 u8 G* c5 H) f7 i #myUL {
( j# d+ D- E1 ?& F' a list-style-type: none;
# q+ d( [) Y( Q1 f/ D" u padding: 0px;
7 R! h/ m2 b9 m4 W margin: 0px;
) N) f2 t; [: ^. D5 \8 b }
7 M! C* z' J. w6 n
0 L0 ?. N* i8 D: [6 V/ [8 q #myUL li a {6 H9 z) }. q0 h
border: 1px solid #ddd;: `, K9 {' m! b" ?$ m8 P
margin-top: -1px;
- _' q6 I" B9 A8 n$ b: g' r# I# Z background-color: #f6f6f6;! y# ^) u" r" {
padding: 12px;
& Z6 _6 C" F# V1 X' [9 {- k text-decoration: none;/ e) X) e t/ X# m( s, g/ Q" g ^. |
font-size: 18px;& ~# H1 [& E) S- `8 Q
color: black;( `! I3 w9 X0 Y/ ] F; m
display: block;& s, I! x' A" _; ^; G. [/ R( t8 w
}3 }) c: b1 j2 x, l/ z
5 q; `- ~" p9 c9 @9 @$ Y
#myUL li a.header {$ }3 y' y, x/ M% G! N# u
font-weight: bold;
/ M, V! D' j0 L; r" b8 x) | background-color: #e2e2e2;" T0 P* x/ N! K& q9 T- k
cursor: default;. @9 f3 O' p0 ]) x9 n& d
}
# A; A2 F. `% D2 d( H7 G0 ]. Y
5 t8 e9 C0 t3 z8 Q+ m# Y/ q. x #myUL li a:hover:not(.header) {) S+ L! m6 P. o; W' I' H4 h5 y t
background-color: #eee;
( t' o# O; _" I3 d8 N+ Z% F- [9 L3 { }) C& q0 `0 `2 r/ M
</style>! _8 U& _4 D" |4 i3 M5 E+ U. _+ e% R! {
</head>
6 \! p, l+ p' g
K+ a6 L1 d# |5 E/ |<body>
$ E& X F5 L- [! K
6 x; y: z) g! c, p# R <input id="myInput" type="text" placeholder="Search....">6 A3 n. Z, j" y
<ul id="myUL">0 o+ e- u- C! k% m. M
<li><a href="#" class="header">A</a></li>
7 K( E6 X8 [7 n2 q <li><a href="#">abc</a></li>) W* b/ p ]$ j$ H1 C6 }( _
<li><a href="#">abort</a></li>. \& r1 ^" }; G! n8 Y: V% N
<li><a href="#">abandon</a></li>
{+ m2 n8 w- V- I, e4 |5 W/ T1 D2 Z3 L$ E* n5 z; P ?/ t/ f
<li><a href="#" class="header">B</a></li>
/ j8 w: G8 x' v, h9 W <li><a href="#">baby</a></li>7 m' X. Q7 i: F2 o5 R, W6 n
<li><a href="#">bird</a></li>+ z' g! m8 e! w. O
<li><a href="#">bin</a></li>
) i8 i. L: g$ e1 T' G2 q- [: a( I" D) O; @, h+ L0 ?
<li><a href="#" class="header">C</a></li>
\$ b/ \) W1 ]/ L1 M <li><a href="#">car</a></li>
) k2 [* r% w6 G4 e+ H3 S4 v <li><a href="#">card</a></li>) l i9 O3 P' a) I9 h
<li><a href="#">cavans</a></li>) G( t( s+ V$ N% |
</ul>5 z { a5 A" C9 O7 i0 d
* P1 j, ^8 Q8 l
- Z# M2 E! u- q8 [9 l <script>
5 L4 A. X2 c7 K/ L/ n4 s3 D, H function myFunction() {! R/ b) W8 v" k/ Z
var input, ul, li, a
! b; u) H+ i* D' P( I& b, G+ @) L" z input = document.getElementById("myInput")
4 c. i8 Q( g/ w, ?& g8 t ul = document.getElementById("myUL")
' s& D' g u5 n7 k8 m. l, ] li = document.getElementsByTagName("li")7 R" I& k9 q9 }, d4 c' d5 M
var inputvalue = input.value.toUpperCase(); G: `; X7 @7 a% }3 M9 j
for (var i = 0; i < li.length; i++) {
4 O: \! M1 g/ L8 T* C7 @* b2 H% l' i a = li.getElementsByTagName("a")[0]
! o: |6 g* \) ? if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
% S$ j0 l( I! K7 U7 z li.style.display = ""; }7 K8 |/ Z5 q/ s( ]
}
4 I0 {) \: W. e+ i+ |" Y else {
# ?8 `! l( e5 y* c0 o4 w li.style.display = "None";
- m+ L' \: h+ d1 s ^ }3 f- t4 e/ e; |0 G% k) n, D( u% p) h
}
' h- @* ?- |+ K }
% f5 L) w3 ~, Q8 T! ] </script>: d6 ^* z5 u4 N$ S
</body>2 M' _8 c' j# P. i( ]4 M; F
7 N, F: r D9 d</html>[/mw_shl_code]
8 T4 ?9 ^) Y7 z! D6 X# u |
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号 )
