|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
- A% m* u- G( |
JavaScript 搜索框自动提示
0 O5 U9 W* L1 ^( U& R& z! w' x5 ]$ k& b2 d' Q
: [2 I4 N; d9 B% ^; c' M5 a( r6 z9 [( |6 ]+ }0 q
1 b9 B$ K( C& H+ A
[mw_shl_code=html,true]<html lang="en"># [' u+ k! e: r f6 y1 f
" W% l% U, C+ W: |<head>
+ L7 S( U% d* I& X4 L <meta charset="UTF-8">
' Q8 k7 G6 N- A2 J2 g <meta name="viewport" content="width=device-width, initial-scale=1.0">2 H$ D- Q* y. t' m4 C4 C
<meta http-equiv="X-UA-Compatible" content="ie=edge">( O# `( G! w+ K7 I, h; y
<title>filter the value</title>2 M! ~& r: h( v/ p% j" z
; g; ?: d `! n
<style>
* ~* c7 e$ A7 w% O0 _4 N7 o #myInput {
3 q& l5 O; r% K- _$ N' f background-image: url('/images/mix/searchicon.png');1 ]* A8 V8 {, D2 b& M4 f
/* 搜索按钮 */% Y/ S/ Y/ r# d, Z
background-position: 10px 12px;6 q/ l _* y& D1 T a: A
/* 定位搜索按钮 */& i4 ?+ F( h" X/ \' V- N
background-repeat: no-repeat;$ l& U: K7 ^ ?) A/ j! Q* L
/* 不重复图片*/
6 p- S, J2 z3 X. [/ [" n& d font-size: 16px;6 w4 Y5 V! A9 r# M. I$ i/ J
width: 100%;
% k% ~2 ^' n( \2 _: u/ C/ }( ? border: 1px solid #dddddd;
2 X1 l% z) T2 F% X4 d padding: 12px 20px 20px 40px;& @ ~& h3 W3 J1 f, T0 T
margin-bottom: 12px;
! _2 l2 N" R1 Z$ C" V6 B }$ J! p* p& D8 c/ N
\. X& Z$ V/ A9 c7 @ #myUL {
o2 F( ~5 o( I0 p6 e. Q list-style-type: none;: y" ] A, E5 f% F
padding: 0px;- o: N% y* j6 u K/ L( j
margin: 0px;9 a, F- a& A; ?( o$ i9 ^5 H p7 b
}5 F8 n5 g5 D( x" R
2 m! i! X; \2 W3 p- j) n. d3 K #myUL li a {: C9 o6 j( v- v! |+ x
border: 1px solid #ddd;0 p# D3 |3 a) D4 Y1 Q- L
margin-top: -1px;
9 ~9 v/ H1 ?1 ]2 a7 Z1 H2 L background-color: #f6f6f6;
2 }6 m5 l4 }4 K; W padding: 12px;/ d, V9 `7 t7 t6 ]+ J
text-decoration: none;
/ ~% g* {8 ?8 |0 H* g font-size: 18px;
]4 A) Y3 A% c# R! | color: black;
( U$ r+ c2 ]$ x display: block;% I0 r$ w* h/ s2 a9 o
}
6 ? @' z. C# C/ f' z0 b- D7 F2 \! L, j7 i( ~5 q) c
#myUL li a.header {" \: U! G5 N6 \" V; N
font-weight: bold;
# @+ q) \$ R0 z% X background-color: #e2e2e2;1 l) o- W Q9 k" E% A7 A, E
cursor: default;
! r+ v9 Q) }6 m+ P* e }
7 f6 G. F/ F7 g! K' n: Y
% H1 O( Y W8 E, L8 q( i #myUL li a:hover:not(.header) {- t C2 s! ^) k) \4 b. P
background-color: #eee;
% i& Y; U3 v5 d; A0 a } \5 U" F( @, U/ O
</style>
) P! E- T3 a. h8 X2 j</head>; _% ?9 _1 f" H+ _
( x0 K# t1 t$ N8 {; k" N<body>" a) l' a. q5 p7 N# A; o
& I. e' V$ i6 h
<input id="myInput" type="text" placeholder="Search....">
! i6 ] q7 C4 B <ul id="myUL">' B! M3 |9 O: l9 w
<li><a href="#" class="header">A</a></li>
+ b2 x2 s2 A) v3 A <li><a href="#">abc</a></li>
: J1 Y6 s0 ]6 i3 F+ r) U0 D: ` <li><a href="#">abort</a></li>
3 j' A" p4 a( G9 y6 w# u% t- m( v <li><a href="#">abandon</a></li>
; K# [1 c; G% T: f
/ [, x. v) i, V: \: q# K, j {4 L <li><a href="#" class="header">B</a></li>9 G, c& T: K- q7 n8 `: m O
<li><a href="#">baby</a></li>
7 ^7 l* U; n5 q5 G Z <li><a href="#">bird</a></li>
9 S8 Z7 F+ e- g7 O8 d* A8 x <li><a href="#">bin</a></li>$ v3 m$ C8 c/ g9 V
5 Q# D9 e9 j$ B0 ~& F: _ }
<li><a href="#" class="header">C</a></li>
# Y; |4 T2 H$ ]2 E" [ W <li><a href="#">car</a></li>
# ? m7 u& N8 ]$ R <li><a href="#">card</a></li># g1 r' K0 I2 T- U. ?
<li><a href="#">cavans</a></li>
; v+ l* u2 O( ^. ^ </ul>" w+ C& l0 E* D+ m; f
* [8 `! m! I* ]( J* }
?# ~7 E) O" W8 s
<script>( d1 o, n W9 h
function myFunction() {+ i3 S- u. E* h" t/ o0 s
var input, ul, li, a
' A! R& O: A& V4 S input = document.getElementById("myInput")
" Q! c+ _& q! f- q! E9 X ul = document.getElementById("myUL")+ l* t+ e& _; E- B5 Z
li = document.getElementsByTagName("li")7 O' m6 z5 W9 @; i
var inputvalue = input.value.toUpperCase()0 h5 X, O& Y4 C9 B- T- K, h# _
for (var i = 0; i < li.length; i++) {. L+ g1 [' T) d
a = li.getElementsByTagName("a")[0]
6 F# Z& c4 {: D; d1 s if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {8 a+ m* g+ g2 n: K m% w0 _
li.style.display = ""$ _! @$ Q! d' f% }) s' y
}8 B! W; p1 W6 ]0 h! h
else {3 C+ T" P4 N! v$ F, Z
li.style.display = "None";& K9 Y5 A9 i+ c* x# I
}
! B* |# |6 p( V% ~ }1 Q6 j: _; t0 x( D
}! D% }- Q6 v% q; a9 V- B2 n
</script>; M L3 V/ l+ @7 ]) s5 ?, `$ l1 R+ c. C. H
</body>
8 k3 N& L4 b+ P0 {/ J# }
+ I* W2 f$ a: a) U! L6 R</html>[/mw_shl_code]
9 `* {; x0 m; z. M |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
