|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
* |6 J0 k* I" G( T1 S+ n6 j
JavaScript 搜索框自动提示
( W( ~ l4 y% L9 V) S8 Y6 v. Q8 q7 |$ k% {
+ x+ v* g% i0 G, `9 G5 \* i2 [8 e+ S: @4 u6 A l! v7 d
1 M1 ]# ]% S o1 `* C
[mw_shl_code=html,true]<html lang="en">+ R9 N. ?" @9 e$ E
! J# n) _# Y, R* A. @<head>
4 x. ^' D/ U$ o% a <meta charset="UTF-8">
0 r ?' L% C+ B2 V9 [' K4 W <meta name="viewport" content="width=device-width, initial-scale=1.0">
0 F' x& o0 @$ k <meta http-equiv="X-UA-Compatible" content="ie=edge"> h* X7 |3 ~! r3 D$ o
<title>filter the value</title>% b9 r u7 {" {' U" X% a0 f
) z% |# w& c. o# D, W. v* R" |
<style>
1 _2 Z/ a, F. I' E! Z# B #myInput {% B3 S' ~* q. j5 a0 N$ O9 R7 P
background-image: url('/images/mix/searchicon.png');
- f) A& }, [1 E! n2 q' M /* 搜索按钮 */$ _/ m) b+ X( z5 d
background-position: 10px 12px;
1 H; P8 H/ j) X; F5 M; F" H /* 定位搜索按钮 */
$ E& ]1 J- I3 R3 V4 b6 l background-repeat: no-repeat;
& V5 N: u" j0 H9 t; X+ R* w /* 不重复图片*/4 N$ a8 i% F; u- p2 x8 B
font-size: 16px;1 g8 t' R2 Z& b8 `8 k5 B+ o
width: 100%;
. O! _5 @1 C" [$ }+ x @7 G border: 1px solid #dddddd;7 u1 |+ a6 M/ @. v, t- T" M
padding: 12px 20px 20px 40px;
( a( W: F* ?# z2 T9 n/ Y* r margin-bottom: 12px;9 n" N1 n$ \& g
}* W& c/ v7 _* R, n, O9 [
/ A1 X8 U( K0 I, r9 T
#myUL {
* g( L/ R1 J/ F( N7 ~7 ?# p& G/ Z. K list-style-type: none;6 p/ J- ^, O- I; z
padding: 0px;% {, A o2 i t9 r4 @) k
margin: 0px;0 a9 k/ z; G8 u& l$ {
}
$ |6 `3 l( h: b& d# G: v) X) l# F8 K0 @5 y2 t
#myUL li a {
x' X! X0 ?* ]5 c border: 1px solid #ddd;
) Z, H0 I8 v" v/ H3 H2 D margin-top: -1px;/ c# I6 b/ x1 y2 Z
background-color: #f6f6f6;
+ S9 n# S- P4 b+ _% J4 H padding: 12px;
( v! M0 P& q4 Z text-decoration: none;
% o) U, B! `6 v. ? font-size: 18px;
# ^3 B+ f# p8 Y, v- [+ x color: black;9 J& h) ~5 N) I! q7 e3 s+ E
display: block;
( i; ~8 }. f2 g& m& B% D } L, K2 V/ O" e" m' [0 d! k$ Z
; X1 ~& }' I4 ^' j& I
#myUL li a.header {
. t8 P9 P( o: ]+ C2 P' Z- ^ font-weight: bold;$ l$ k4 P1 L3 O1 c5 [) l; `& s
background-color: #e2e2e2;
& v& @; o# N8 x- c* |, Y cursor: default;
0 h' Y2 k; [& f3 U } x, [2 c+ X4 ^1 [
: ~ X/ k- W* P) D0 G #myUL li a:hover:not(.header) {
2 L L* Q8 K6 Y8 Y background-color: #eee;
& I( S6 o) M: N! M }$ u4 O. n, s/ _5 x5 G2 y2 w! I
</style>/ S0 i2 v) B& G/ L' z0 K7 v7 K
</head>
5 M$ { u; z/ M* q$ u0 g
3 T! X1 q; f" [9 {$ p/ {<body>$ E* e* k9 y% \1 L- V
! D F# H- |* F/ J7 O' q; W3 H! Y% E <input id="myInput" type="text" placeholder="Search....">
3 L% K( n! t, I n$ F" \ <ul id="myUL">
; ?8 }2 ]( V: W; f <li><a href="#" class="header">A</a></li>, z0 G( d6 J' q0 R' V
<li><a href="#">abc</a></li>
: O* {& L2 d7 E/ b* |2 m <li><a href="#">abort</a></li>9 ?. F3 l9 J7 `2 @6 J
<li><a href="#">abandon</a></li>; a1 j7 r# q$ u# j" X
/ c) j( F. {; I6 L1 v" V
<li><a href="#" class="header">B</a></li>! w* v) c( y$ f( M& J
<li><a href="#">baby</a></li>
# i( O0 Y \! C3 g: s( j <li><a href="#">bird</a></li>, v* D' w4 R5 @ b" T( c( y
<li><a href="#">bin</a></li>
' i1 {; R) \+ O9 Y3 f
5 W+ D) x/ i4 G6 a4 k& o <li><a href="#" class="header">C</a></li>2 S* d' d0 ^, _: }* Z. c# [
<li><a href="#">car</a></li>
0 r8 c3 [, Y, X2 ~' Z3 X$ {4 u- X <li><a href="#">card</a></li>" Q. u% L( t1 Z+ k
<li><a href="#">cavans</a></li>
* I6 x. ]* G1 K+ }" [ </ul>4 R1 z$ g' Y! L' L' d
2 ~! N7 H5 L1 B4 I4 n, C" d) w$ L3 F. K. \$ a4 f( t
<script>8 |: ?, f! c7 Z, s
function myFunction() {
" `$ L% Q/ b& q; U var input, ul, li, a! g! d) B! p( u/ b: _
input = document.getElementById("myInput")
1 R7 K& Z1 {5 O. I1 P ul = document.getElementById("myUL")* O/ m& M" A: q, w* z7 ] T9 Q
li = document.getElementsByTagName("li")% j; I, z# `6 b8 [
var inputvalue = input.value.toUpperCase()
( w; E [( t2 R3 k2 l q0 v5 B/ r for (var i = 0; i < li.length; i++) {6 f% x) B* i9 R9 l+ Z0 b' U! S
a = li.getElementsByTagName("a")[0]" s# A4 F6 d( q
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
? }' d7 v i% t- | li.style.display = ""& h# |2 Z. H, @7 ]+ l- I& o" f
}9 e, c% C; [! w& v
else {
8 D7 l8 J' n+ Q6 @! L" b" Q0 o li.style.display = "None";
, D# N7 |9 E9 x/ G1 @" v }
9 \! O. d& b1 ?, y }6 |, X! X8 E2 u' e! o6 i
}; |& b j8 \+ p3 w+ G1 J& t- p
</script>5 S, ~1 b3 k# p; I. _1 ]( D: G% Y% I
</body>
( \) e( k. J( v- i6 @* i% g0 C" }6 m
</html>[/mw_shl_code]
+ m( w: L. Y. ^9 K' ], o: M5 [( r! F |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
