|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
5 v" [; | c/ y( y3 t# N
JavaScript 搜索框自动提示
: e. q5 r, e! E$ X1 S9 k2 V1 X% d& {/ _
r' I- x6 m: H, u, k
5 X1 K" h% S) S q8 D6 A; a% B8 O% j
[mw_shl_code=html,true]<html lang="en">/ u% X/ |8 U$ [3 N
Y: W5 Y+ e, r: l<head>) P- q6 v1 P7 [) x9 g' ]2 h3 x
<meta charset="UTF-8">! F$ C5 u' p7 u4 v* F4 A+ D& [
<meta name="viewport" content="width=device-width, initial-scale=1.0">5 |+ A, T8 p- E9 _" [* b
<meta http-equiv="X-UA-Compatible" content="ie=edge">
4 h7 h/ h- f3 c4 l5 ~! K. \/ P; r <title>filter the value</title>% d& v- G4 Y: a7 ]
3 m1 L. `. Y* W# s
<style>
8 T0 h% [: o, \+ w4 G5 n. j' Z #myInput {( q) @, j9 K# f2 C& K0 P
background-image: url('/images/mix/searchicon.png');
3 o8 ~7 q& |, m /* 搜索按钮 */
0 m" J( c& ]; r4 U9 I background-position: 10px 12px;1 j' q1 D1 R: I" x
/* 定位搜索按钮 */
! Z% U8 M- h+ k& e& W: e background-repeat: no-repeat;
9 T% ?% X, F' z: X /* 不重复图片*/
: c, H5 h& d0 D5 T D) L font-size: 16px;
# y% g5 s6 J, g- @2 X- S width: 100%;
! k2 O; \" c+ d$ {7 p: J3 I border: 1px solid #dddddd;
$ h7 Z1 a" K/ o$ C& `/ W padding: 12px 20px 20px 40px;
Q6 V& R0 o! e/ O margin-bottom: 12px;3 n( c* D% F' E! Q+ s, W4 y
}
7 o; Q5 n* }7 b# k; z
4 i m. b8 X4 g- f; K1 t: g/ B& Q #myUL {
9 Z+ E- I* x+ y: q* E6 c list-style-type: none;4 ]5 P3 e( G5 }( O& I( U5 v6 j
padding: 0px;) C, P; s6 ^8 P0 {0 j/ J
margin: 0px;# v2 n3 ^) u8 V/ e/ f% s( M
}0 k+ J/ f' B, q; W# Z
3 x% D4 C* p2 u* l+ J) k* O8 e8 I. a
#myUL li a {
$ q. R$ x% U f7 R1 j border: 1px solid #ddd;( y S) ~& I3 q7 b6 j, i& a
margin-top: -1px;
& `0 x7 n% O/ u7 _& } background-color: #f6f6f6;
, M$ ^9 e- l0 q! A: U8 @ padding: 12px;
, H6 S" B \" `2 ~ text-decoration: none;
' U* j$ j9 p& f+ L u" r font-size: 18px;6 C! V G& `! S0 l
color: black;' Q( {/ S: z/ C: q! J* U
display: block;$ M Q; P% m4 G- ]) g
}- }# D$ m w9 P( ^9 m) F9 @
0 X9 ?% S7 I, y' U$ y0 n, L! r1 R6 ]8 H
#myUL li a.header {
+ E: O" T* X4 ]/ M font-weight: bold;# K" e7 |& H% p5 U* }$ k
background-color: #e2e2e2;
1 `; J1 s7 \7 R0 G cursor: default;8 |$ N/ {6 x7 @7 K) l$ ?& _1 A7 ?/ J
}
- }2 Y' h `7 Z* a2 ~& q" `1 y f( U1 K, v$ [- |
#myUL li a:hover:not(.header) {" s" m, {- Z/ g
background-color: #eee;
: v l1 r* j8 {5 W# `3 m }
. _3 h E5 v( J </style>
9 s5 q% K4 J: T2 t0 V+ w! v</head>
3 a1 T# H7 Q4 F- ^9 I. Y$ ]. B8 z4 O" k3 T. |
<body>' g' N8 [: N5 @- d2 c; M# V1 Y
1 \- b4 D" @6 q$ t& m2 D* ~
<input id="myInput" type="text" placeholder="Search....">( V; Q% I9 ^$ {, h+ w) e2 T
<ul id="myUL">
- z5 s/ Z* o& M, g3 k; N3 F7 H <li><a href="#" class="header">A</a></li>) c/ b$ u3 B: c6 Z
<li><a href="#">abc</a></li>
7 `: _# E& `0 W4 [: I | <li><a href="#">abort</a></li>4 b4 G1 e$ |9 A+ k% P
<li><a href="#">abandon</a></li>
\' H* A: `# R: G. x1 Z8 O, H% A2 b- X8 ~; J3 J4 _2 L
<li><a href="#" class="header">B</a></li>6 ^! N0 w/ }" E' { V
<li><a href="#">baby</a></li> w6 D' W: Q I$ I
<li><a href="#">bird</a></li>
/ \0 q. g: @# J5 G7 Q! ?4 | <li><a href="#">bin</a></li>
& m9 a& ~$ K; A/ A; Q0 C- q* P) k' Y/ c i6 R7 N9 a" l4 z2 C
<li><a href="#" class="header">C</a></li>
7 S- M# r8 b3 Y6 q/ ? <li><a href="#">car</a></li>
& p, u# t3 o0 H8 k+ T: G# C% J3 l <li><a href="#">card</a></li>7 }; ?- \' a+ p' `, b2 A
<li><a href="#">cavans</a></li>' T5 Y: ~" t* H: _" W- F8 r
</ul>* d4 v' @# [4 P1 w0 o3 E9 Y9 o
* Q% \- [# I7 o4 H3 t3 y& F7 C
7 C6 u7 Q! y5 h8 O% Q" r
<script>
7 b$ L r3 z4 ]6 _* u function myFunction() {( T B& Q! u6 k$ n: _& l# w
var input, ul, li, a! o: R+ X$ O* P! t% T6 Z
input = document.getElementById("myInput")( o# _0 i( m% a0 H# v r
ul = document.getElementById("myUL")
. ^( G( t3 [+ k li = document.getElementsByTagName("li")
$ G* I0 D; B& f& u7 r( ~, o. S var inputvalue = input.value.toUpperCase()
0 o6 F2 @: O2 J8 f/ \2 F2 Q( C for (var i = 0; i < li.length; i++) {
' u/ r) R8 r7 ]% H. B! w a = li.getElementsByTagName("a")[0]( Q+ c" g9 r# N" M
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
0 V6 m- L8 _5 l- f8 }' A li.style.display = ""
8 r+ r' W. D) c+ r' b2 {$ ^ }! g! y/ m1 Y1 U2 P- M3 Y
else {( x& U0 t4 ?, E1 N; u4 @2 _
li.style.display = "None";
7 D. D% N( y& a/ L& R9 ?$ C }
( e6 l. L7 ~: Q6 h- M }
0 }: _- |: W8 H8 y0 j& [ }
" e) ~/ y! n' c7 j ^6 `3 G( F, Z) K </script>" W! D! E& s! o7 ?
</body>
* ]( A o! W2 S- L) Q% ^
) E1 q. G; Q7 N0 _</html>[/mw_shl_code]
; p% g; J# M4 u4 q! y |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
