|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
1 q3 Y, P7 M2 |1 j
JavaScript 搜索框自动提示
: R+ L% K" h* r: }( t9 L$ q4 e0 A& i T" N$ t1 C
/ j( y/ p5 n1 v. d c) m: v" D
) K; F z1 y& e- \8 |3 S% U" V
9 }* m2 K/ z6 E; i& L3 a- `[mw_shl_code=html,true]<html lang="en">/ j2 o; h- t; Y+ X
' _) D1 u9 }9 `7 c' p( [0 E |
<head>) q5 |; P6 e' \6 }& N
<meta charset="UTF-8">2 ~ G- L$ X% J" a- r
<meta name="viewport" content="width=device-width, initial-scale=1.0"># w4 L, l `8 }
<meta http-equiv="X-UA-Compatible" content="ie=edge">2 I/ J8 X( U; n( ^3 V1 Q0 f
<title>filter the value</title>
: t; N5 |- b& d/ o6 p
2 i2 M6 Q% `* _' e <style>
4 A. J/ X- b. M0 U& T #myInput {
. x4 P3 k/ X1 h% K5 s U6 E( \ background-image: url('/images/mix/searchicon.png');& ]; L! b: H4 J$ D) f
/* 搜索按钮 */8 o; l% y C( ]; K9 K' _
background-position: 10px 12px;$ B8 i& l4 L7 U ~1 m
/* 定位搜索按钮 */% Z- e) L- x# J1 X! a9 d, y+ I
background-repeat: no-repeat;9 }+ { x# {+ U3 [
/* 不重复图片*/
* Q$ I9 n& _1 @: a. E# o( X( k font-size: 16px;
) @+ B5 h4 @. L0 G* i9 E width: 100%;
9 G; ?+ w1 X+ H, V' j r border: 1px solid #dddddd;
& ^; C3 a# D+ p7 }9 b" \ padding: 12px 20px 20px 40px;# p7 u& |9 t; y# _' p: W P& I
margin-bottom: 12px;2 m, ]- s% |: u% G8 A+ [
}
. k( M/ b3 `6 n" _" U3 S( N( p
% I$ V& z+ J0 ?0 q #myUL {% s$ Q6 u+ A5 W0 r7 m
list-style-type: none;
0 F3 u2 v1 W1 [2 {# y' r padding: 0px;
' v* m: n3 X$ k margin: 0px;
K' g9 J! u' |6 a( i( I }
, q- W, ~- G3 [1 P/ O5 [7 {4 k9 h5 |) `8 M5 M# K7 s1 @$ p( G
#myUL li a {3 R* H" s# U: J& s1 E0 }
border: 1px solid #ddd;! p3 [5 T4 Z' _
margin-top: -1px;
) ^9 a! W' R1 T2 w% y background-color: #f6f6f6;, h; m0 p5 k% O. {
padding: 12px;
7 B& k6 r3 B( h, b! G text-decoration: none;, R1 E) @# T( c! h
font-size: 18px;
; V2 {# K: c3 P6 ]* U color: black;* X9 v3 d3 ~) {1 V6 G: N
display: block;
. H# Z' S* ]) p! @$ z& [4 N$ X }4 g, M1 Z- Z* R8 M- B: l
* F1 l+ V3 q, x3 y/ M0 h9 U
#myUL li a.header {
. |) o7 p; C! K9 Y. V font-weight: bold;
1 @! ~ w' L7 ^$ P. g/ s! q background-color: #e2e2e2;" B( B" _/ L4 o
cursor: default;
! E3 T, ?6 m7 K3 E: M }3 v$ T- e# s# N7 P5 K9 Y+ D; r5 }
' F1 q2 e! P% A0 X4 v/ v
#myUL li a:hover:not(.header) {. ^& j/ x- L5 H ?, G: }
background-color: #eee;+ o% Y+ K% o. x# W
}) P' J' J1 K8 j( ^6 Q
</style>
" |3 u/ w+ n6 |</head>+ M8 Y$ h/ A, W. F& m
4 r- I8 M, j9 E( w! \/ V
<body>
% N) A& L: M0 v5 d% Y% j( ~$ k: l/ e w) j9 V& Y' h
<input id="myInput" type="text" placeholder="Search....">) L, \" ?6 _# _6 q+ Y7 A# K/ [ g ?
<ul id="myUL">; W2 `- f6 b' C0 H( L6 ~. S9 `* p7 g
<li><a href="#" class="header">A</a></li>) j6 u9 ~4 t/ R4 d* m6 b s
<li><a href="#">abc</a></li>. y2 G/ O) G8 h1 E, ^
<li><a href="#">abort</a></li>" I9 S' T: o* S4 Y
<li><a href="#">abandon</a></li>
" r1 X; K: ?8 z# a( u; T3 s+ ?7 ]8 L9 j2 f
<li><a href="#" class="header">B</a></li>- l; Q/ R& b" d( S
<li><a href="#">baby</a></li>
1 Q/ q7 _4 I8 Z3 W- C n <li><a href="#">bird</a></li>! F, \8 E6 p6 T5 M- f3 P
<li><a href="#">bin</a></li>4 C/ ^! {# I Y: F6 n9 V! w) p! h8 f
5 Z( {7 [; }" `' V3 i" Y+ ~$ h; Q <li><a href="#" class="header">C</a></li>* U! u2 z' o- U7 m
<li><a href="#">car</a></li>
1 W5 Z3 b& e$ a1 L! K <li><a href="#">card</a></li>, W/ O9 `9 A c% B$ d. D% N
<li><a href="#">cavans</a></li>6 H" C! ?: }* J- | j% Y7 k
</ul>
/ n- r5 G( m: S% z$ O* ?! t+ S$ P( J
0 y5 `8 F* W) h V
<script>5 U, ]/ E6 u" C6 P. u
function myFunction() {
0 b8 O7 K4 C* A5 l3 x var input, ul, li, a2 t4 a; c" }6 e
input = document.getElementById("myInput")
9 ~& w: ^, Z6 e0 ~ ul = document.getElementById("myUL")
5 P) q f$ x8 Z c- m li = document.getElementsByTagName("li")" O. d3 X7 ^& ?, w! R M* r* |: C
var inputvalue = input.value.toUpperCase()
. S$ q/ `, V3 w5 i# j) z. G for (var i = 0; i < li.length; i++) {1 \4 |8 _6 `+ E+ [- c( q
a = li.getElementsByTagName("a")[0]
9 c' {0 N* |: l% c if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
5 N) p- f8 Z V$ Q8 `2 Q. [ li.style.display = ""9 n0 n! ?/ T9 z7 M
}
0 }* d* J/ w% u+ m/ s else {
$ i% V9 Q5 }0 X+ ?! E% T; O li.style.display = "None";& b; j0 i5 z' t1 s# ^" m" _$ M
}( Z' m% p6 i- X) `1 T0 V
}2 ]& V# b1 g T, Q6 a
}3 S3 t) v" f1 |8 v' D5 t/ _5 o
</script>
) t. C# q" H, i</body>
* G! u+ u) K% x* b9 Y U5 b+ _
4 K4 O/ N' J+ I" W</html>[/mw_shl_code]
. A- v. t( h6 E6 _& k |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
