|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
$ D+ v7 q2 C, R" |# S" C' W: @7 tJavaScript 搜索框自动提示* c$ [! r% `+ d& P
5 a$ a3 z! z1 |
: Z% ^0 W3 g- j: w8 U# C, T2 l4 b8 e7 v* L6 e! B7 E
9 y# c0 e& L$ v9 p
[mw_shl_code=html,true]<html lang="en">6 O" A1 V* A5 o' ^5 s
- ]# M' I$ u6 k<head>6 Q+ x0 A; `5 r. i8 | }/ Y
<meta charset="UTF-8">' P( T( ]7 y3 T; j
<meta name="viewport" content="width=device-width, initial-scale=1.0">/ b3 J) \9 ?6 n2 f1 z$ h( H7 x* e
<meta http-equiv="X-UA-Compatible" content="ie=edge">. N. N& \- \+ `6 ~: }8 b0 G' a
<title>filter the value</title>
) Z. T9 o/ w. O. `! J: m
& i6 K2 W% O5 l6 H <style># n/ }3 K* @7 G; Y7 Q* Y1 Z
#myInput {
' v$ O! Y: P1 p; _6 l6 R background-image: url('/images/mix/searchicon.png');
) C) y) V2 o, |8 r+ _7 ?9 z /* 搜索按钮 */
2 F) i$ S* p+ Q; g background-position: 10px 12px;
) t& a7 S( T$ V /* 定位搜索按钮 */
2 [" d3 A7 a8 M6 b5 o; @5 G background-repeat: no-repeat;
2 `: G9 k: U# T /* 不重复图片*/9 W* L9 ?. e0 t# C; z0 I8 E
font-size: 16px;
+ ^' ^/ Y0 K- \, s width: 100%;
; L$ B; f1 v: M; W6 J" Y' G border: 1px solid #dddddd;
% w& {1 H5 ?4 {& [9 F4 Y% M padding: 12px 20px 20px 40px;
& b S" K U0 l margin-bottom: 12px;6 e* w! l6 e1 [: _+ _1 \
}( A9 z9 q5 H9 Z+ j
& ?6 o& l8 \' M# N# X- r
#myUL {
- J) D9 p! ?5 B1 N list-style-type: none;, z- K' M# {6 }% f
padding: 0px;
& M6 ]! `+ x7 a* ~; ]. z/ \$ C margin: 0px;% s: Z+ j d+ Y! {
}
% S; ^0 `4 D7 D+ U5 R. f
3 J% Y9 I ?0 W' ^ #myUL li a {" ^2 w5 y) l2 o1 h' a0 r$ h
border: 1px solid #ddd;% y# J3 T( Q+ L! e5 b1 M
margin-top: -1px;
0 U* c! B9 E7 }3 \ background-color: #f6f6f6;
0 C }% G+ h( l" s8 A2 r, [ padding: 12px;
0 C2 z* b3 R' k4 {+ L, B text-decoration: none;
6 t4 ~# t% \/ D7 ]0 u$ A# F( [+ A/ J font-size: 18px;* Z, M5 {% M8 G1 r4 D: C' a: s
color: black;
. b7 f |! P. m" z7 V1 G display: block;) M( s, ^8 l# f3 J
}% X3 @2 U+ ], E
. t4 z j( o0 j& N
#myUL li a.header {7 P6 u H" ?/ ^; J* P- A
font-weight: bold;3 z0 }: B% \! F: e, c
background-color: #e2e2e2;
+ E/ w; ?' L: n$ O7 [6 |$ x! f cursor: default;* G0 S$ C0 ~) N
}
% p3 e* e/ H: J% x: G- P& T! D# s
8 d6 w8 I( Q& `# Q: B) @ #myUL li a:hover:not(.header) {
2 B9 D5 ?( G9 ?' p background-color: #eee;2 `/ }- F% e* i! w
}9 D) g) f2 y8 I/ O
</style>5 E( s% c: z6 v" f; k( q
</head>
' t2 E# i$ N" U; x& Z, D
: _* Z4 j. t1 y& g$ K4 Q<body>7 o; E* U8 ~: u A' m, C2 v3 B
3 j0 W) n( m g. v9 X <input id="myInput" type="text" placeholder="Search....">2 w( e! P9 J% |8 Z( i* {" K
<ul id="myUL">
+ O ?% |; b6 I6 v <li><a href="#" class="header">A</a></li>
7 ^4 b5 _( W4 n8 s+ E, v9 C0 P6 D <li><a href="#">abc</a></li>- m2 P4 L% n7 B* h4 L6 N0 v! D+ z8 r
<li><a href="#">abort</a></li>
# \# I! v( N2 G% E& [1 P <li><a href="#">abandon</a></li>. T4 W- s: v" T
$ w$ [# [# m/ _4 G4 u& x' c3 ?3 H <li><a href="#" class="header">B</a></li>
- k K5 P' Q- H" ?# E/ G' T <li><a href="#">baby</a></li>
: T5 l0 d; L- m' P0 V2 p9 M <li><a href="#">bird</a></li>0 N( W4 X4 Q) s$ G" \/ H
<li><a href="#">bin</a></li>
3 s' M' s" z5 L
- W, h# ~) H& B) X, p <li><a href="#" class="header">C</a></li>
4 x& D* M6 w# l& O9 X- j4 X <li><a href="#">car</a></li>% q+ ?4 I. h1 i
<li><a href="#">card</a></li>6 r) y, h- b/ W& s& }* _
<li><a href="#">cavans</a></li>6 C5 a; E/ q2 R1 R
</ul>" u3 v* C1 e" v+ I: Y3 c. \
5 p" l8 j+ q; D7 j- L
: q" `& `& Z, a6 `4 f* K* d <script>
6 R: y( e8 D* V. U) O) t: p function myFunction() {
- |+ \3 K% J! E* r var input, ul, li, a
% e v6 T! r7 _# _: e9 E input = document.getElementById("myInput")) ~7 ]9 G; Z4 W/ J, L0 H7 P
ul = document.getElementById("myUL")6 }2 C- p6 S: V+ p, u2 D1 k" F
li = document.getElementsByTagName("li")4 K: S& X) a' o. ]& o
var inputvalue = input.value.toUpperCase()
7 J1 o3 L; K' t. h+ j for (var i = 0; i < li.length; i++) {0 H0 {& r# m: y
a = li.getElementsByTagName("a")[0]8 t g; v3 A9 [/ r; E7 G' W
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {% r5 e" D( R& y$ L, _3 J* B
li.style.display = "" g+ s5 t3 K& M+ R6 N, ~
}2 z, a2 U' z) J1 b+ Q5 W6 }7 x
else {
0 M$ f' u, m+ g; ? li.style.display = "None";
% C0 u; ]" `" J' @5 ] }
2 l5 r8 p$ ]$ k5 ~4 l" u5 |/ B1 Z }0 V C5 o& y8 D9 \. S
}
! H7 J% {: K5 l! T& { </script>; ]! ?* Q1 |/ U- X
</body>& B( A2 Q8 `3 W# `$ l0 w4 v
6 R! J) V. P7 \ }0 ^* L, l) M</html>[/mw_shl_code]7 v9 K- q/ | a
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
