|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
6 ]6 r' h: |- q
JavaScript 搜索框自动提示
6 M5 S6 ^9 J2 E6 k: M# A! r) m2 h
$ T5 R! `/ z) Q: y7 b8 Y7 g/ O& R3 D( Z* v/ j3 ?
9 @5 [1 c3 P( A$ Q8 E% O. D3 {: m# {0 c; X
[mw_shl_code=html,true]<html lang="en">+ F) |5 H A& s* L9 e
, h. ~- c& l A% M<head>8 C* t% @) T6 e4 t1 f; Z) g
<meta charset="UTF-8">
( V- V: T* O+ w <meta name="viewport" content="width=device-width, initial-scale=1.0">
) o8 M: z1 a" q P) V7 ~7 ^ <meta http-equiv="X-UA-Compatible" content="ie=edge">$ l) O+ Z; G* J, g) {- d, z- _5 z1 y
<title>filter the value</title># l' @# X6 j! m: W
; j2 u$ K5 p$ P. J0 ] <style># Q/ e/ B* D- V" M; {
#myInput {
* @8 z# _ R6 r2 c) R) m2 ~; n background-image: url('/images/mix/searchicon.png');- z3 _" d- d1 }# E6 t
/* 搜索按钮 */
* N* }2 d! q7 d8 D5 }: \$ r' ? background-position: 10px 12px;9 u( ~& K8 J0 b- V" q/ n! G! G
/* 定位搜索按钮 */
) w' I& b u: t+ C/ g# @ background-repeat: no-repeat;
; z* G) C9 r# m1 F' A1 x: o8 ~! U /* 不重复图片*/
. w+ _$ N n9 {, y font-size: 16px;
, Z" F3 ?0 ]; `' J width: 100%;
) g+ \- {& m0 h2 o4 W- k border: 1px solid #dddddd;! b) t# B0 D, {" ]0 I
padding: 12px 20px 20px 40px;
, ^% g8 D# [& L margin-bottom: 12px;- b& T. V9 j2 ?7 L
}- Z% E0 o7 e' W4 I
/ }' I9 b& Y9 Q5 n# M8 T/ q* s" s
#myUL {& Y" ?5 @4 X+ d8 p. M
list-style-type: none;9 N7 j8 r7 \ E L
padding: 0px;1 {( x5 S9 Q3 n# _4 n
margin: 0px;
9 ^3 U9 j. M' @8 W o/ W) W }* G$ q) _& ^# g
( `6 N$ w8 T9 g! v #myUL li a {
1 N' }3 P0 w) p! I2 ~ border: 1px solid #ddd;
# S4 `- e7 ^1 F7 P a$ v margin-top: -1px;
" A5 a2 \% _ k) ~8 e2 D background-color: #f6f6f6;
4 n* W0 x' o# j9 }* I padding: 12px;. x( P0 M" B& |0 ]4 W
text-decoration: none;
: B. l c, K: G+ { font-size: 18px;6 G: `7 ]7 \3 Y0 F, l9 [
color: black;
! y# d! Y. l+ d( P3 m+ L' R( B; o2 h display: block;$ R' y7 S, K4 a2 ?" |5 Y: m0 Q2 B
}
6 l0 J# L2 v# ?6 x/ D( \
2 e, Q2 m! ?% E ?& ]/ k #myUL li a.header {
. G; |' p' B0 u6 |' H6 Z1 G font-weight: bold;
# W4 q' q/ K9 c% W+ r0 r* V background-color: #e2e2e2;
: u4 t* b! ~2 k& \ cursor: default;4 Z. Y$ N8 J! g" y* E
}, }2 M K$ z2 M( r3 a8 U: a
# A) J" H. H% V3 J
#myUL li a:hover:not(.header) {
8 g6 n; H( w3 c ]2 p background-color: #eee;
; `( H5 O9 I- N& I9 H( e6 A* a }
e1 W- h" m& C6 p# X+ [ </style>% m: Q$ V8 W! {9 d
</head>
/ E# A- v2 l' l
: a1 I# V1 N- i5 `- M' [<body>
7 V# T, L; z* R/ E1 @" B4 ?, Q) c) `. F: \
<input id="myInput" type="text" placeholder="Search....">
0 N E5 J* S* [5 `' C <ul id="myUL">
. }$ f# K) p5 T. q: _( E <li><a href="#" class="header">A</a></li>
6 ]9 ~. M9 f& T. p1 J t <li><a href="#">abc</a></li>$ @8 X" A" C1 ]( V2 _- s+ O3 E
<li><a href="#">abort</a></li>
" O! w, m; N& S0 t <li><a href="#">abandon</a></li>
, T8 }! B! x# ^! r7 P [! U" z9 @# K/ A D$ x% l, `& r0 n# `
<li><a href="#" class="header">B</a></li>
0 Y- V7 D) f8 u5 U5 }- f4 d <li><a href="#">baby</a></li>+ |6 P7 o, V' E! z$ S9 I
<li><a href="#">bird</a></li>5 V( Y( J; m7 V5 H
<li><a href="#">bin</a></li>
1 l: W' j' ^# i2 @' l& C" N5 [3 G1 \. ^ J
<li><a href="#" class="header">C</a></li>
( b j$ y: A: B; Q/ F3 b <li><a href="#">car</a></li>
# L) \# c# i- w8 G/ M <li><a href="#">card</a></li>
& @3 M& L2 M$ o& Y& y6 `0 Q$ a- ? <li><a href="#">cavans</a></li>
8 g( D$ Q: g$ L* D1 I. i </ul>
) a" Z9 Y- s0 z9 v2 _ P- u, n# ^1 n, v# D0 h7 v
# s! y. a, _6 \/ d* V" T& i <script>8 i2 o# ?! t3 J2 Z' u
function myFunction() {
8 N' ]8 y& t1 g* s t- h( n var input, ul, li, a
6 ^9 j3 w* q4 z input = document.getElementById("myInput")
9 Q1 g' n! X/ L6 f* m+ r' J ul = document.getElementById("myUL")
L% p0 _; y. E0 g5 z li = document.getElementsByTagName("li")
0 v% r+ P4 W" `; t) o8 P var inputvalue = input.value.toUpperCase()
( c4 ^- W$ F+ `1 } for (var i = 0; i < li.length; i++) {& T2 r G4 l* H" [
a = li.getElementsByTagName("a")[0]
5 m9 I# U8 P3 L1 i4 v0 ] if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {- m* G8 t2 P* q4 K
li.style.display = "": _! S0 w4 k. g
}( Y5 O' S8 A1 |
else {0 V0 D! D' X; D5 }2 x( ?/ s: J9 M$ U* J
li.style.display = "None";
/ E0 r; N1 N1 [ }
( N8 p: H- k& Q }6 j# _2 P1 A7 r' e* c
}9 a0 Y8 W2 ?1 j9 W1 }
</script>: t) t1 ?% `' J* J3 f' K5 k
</body>
1 Y+ e3 {. ?: V1 J9 l/ z6 B2 R; h& d6 j; f) M
</html>[/mw_shl_code]
' k( n- I" i2 c, x! W5 S9 V |
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
