|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
, m; F: C* g5 O; \9 b* g( [
JavaScript 搜索框自动提示
1 y6 t7 m! y _4 `9 s& f
, ~% J8 _6 w+ q0 J; i0 M) a3 k5 y* K e" c! H, H
0 W% v1 l. g& @2 t( b4 I
) {/ r3 u' K/ y$ R8 ?[mw_shl_code=html,true]<html lang="en">* }) Y( Y) r Y. X8 t; e
* R0 f7 x5 i Y# f( L3 R, H
<head>
; ^. d# f$ W" n" l <meta charset="UTF-8">0 ]1 P& w6 G; X
<meta name="viewport" content="width=device-width, initial-scale=1.0">
) `+ ]8 s& A( e3 P. a, L <meta http-equiv="X-UA-Compatible" content="ie=edge">8 p2 w) ]4 O d0 W: H' y- d
<title>filter the value</title>
$ g" ~: W* ?3 a, S8 G5 x
" ^- _$ T- ?9 u' f, Q5 [# w% q <style>
1 @& ]) w4 N+ [+ p9 D5 }+ A #myInput {
6 t3 a9 z* g' h- H- w9 U Y background-image: url('/images/mix/searchicon.png');0 L+ |8 `8 k- a
/* 搜索按钮 */
( g) }) o) y3 Q7 M background-position: 10px 12px;
4 F( s1 w. ^' I- o; A: o. V: V /* 定位搜索按钮 */
/ X. \" t3 }. V. S# Q" E+ ~ background-repeat: no-repeat;
9 O$ J5 ^6 m1 s; N$ o/ ` /* 不重复图片*/' W+ q. T1 ]7 _3 {
font-size: 16px;
0 n" Z" H9 Y- [- [ width: 100%;
1 {5 Y, c8 j G/ r7 y border: 1px solid #dddddd;
4 _ B; |: J, P m8 x7 k' k padding: 12px 20px 20px 40px;. W& w" ]* J2 X! Z" B' l$ n
margin-bottom: 12px;
* A6 c9 x0 @/ T) ?, S2 v }
" Q- n, p5 t; }$ b+ H5 |2 w1 \- T0 `% G4 k6 p/ p
#myUL {3 `1 j5 n6 s6 B) T
list-style-type: none;. r8 l: W+ K5 J$ J+ Y0 T
padding: 0px;
# N5 C( v4 A3 v! u+ I margin: 0px;* U/ s- l$ |% t/ J. V9 v
}# I1 R, Y0 F0 e: h# Y3 I' G
1 A2 w0 t3 g" ]: N! h
#myUL li a {7 h, G+ @7 S" S0 h' V# I3 H* x
border: 1px solid #ddd;5 }' {& s5 a# D6 h6 a+ o' T
margin-top: -1px;" W! K0 u! z/ ]6 U8 U
background-color: #f6f6f6;% I. [+ `6 U* s# m$ @
padding: 12px;
5 |5 r7 t1 u5 |6 N text-decoration: none;" E% j/ h+ @( Z3 R. i5 N
font-size: 18px;$ n, s; }& O( n" m: d
color: black; X% a- Q+ B0 L7 T3 T! ?4 }; R
display: block;
. ^7 {( k2 j) U. T* u0 D( d7 t }/ X9 V; l1 F/ `. t% O( _
5 Y$ {1 ~2 m4 G* i
#myUL li a.header {) @ s# _! g4 {$ P0 g7 r
font-weight: bold;7 s1 M4 @. k/ [, r8 F# ^
background-color: #e2e2e2;6 P. m: F& W6 J. `! z6 x
cursor: default;
+ @: _; M; ^3 [ }1 z3 C }
0 m# {7 S7 y2 b4 `" A/ B. S3 ~3 v& j8 D8 S" {
#myUL li a:hover:not(.header) {
; X0 p/ k- u% l' a% `; Z background-color: #eee;
H- G0 E& D1 k' i* t }9 h. K7 e. ? k/ Z* O( m
</style>
4 {9 y! R3 I% \' U/ t6 u: z5 h</head>: W: W/ o6 L: _3 _. Q
! x* {0 |( c8 q1 O) X
<body>+ ` S% \6 v5 x$ r+ ~
( v3 d' E* V0 O! }9 ]& e4 G+ ?1 c <input id="myInput" type="text" placeholder="Search....">$ w$ V* }/ j( o1 }* b
<ul id="myUL">& Y2 B- D, Q: r* W8 ^& e
<li><a href="#" class="header">A</a></li>
4 [" y+ E1 Y! L; o L1 ~ <li><a href="#">abc</a></li>$ j5 l# t% i4 O+ Z0 x4 r) {
<li><a href="#">abort</a></li>
) N' \0 d* F$ [ <li><a href="#">abandon</a></li>
( Z3 f( l3 o" U& \9 e+ H2 [
! ~! r: [/ q+ V: n% I4 f <li><a href="#" class="header">B</a></li>2 d. F0 j, m8 X: a+ ^( @7 K; A$ u6 _
<li><a href="#">baby</a></li>5 @- U, _0 ], V7 _5 R0 d& w
<li><a href="#">bird</a></li>- R5 [! U6 T% ^' y8 L# K
<li><a href="#">bin</a></li>
3 x1 q1 m3 c5 m$ e+ F! x* U& m) k/ R+ Z- F
<li><a href="#" class="header">C</a></li>
& j% S- y1 S5 I+ `$ v1 t <li><a href="#">car</a></li>3 P3 p. e/ P! J9 j _ \
<li><a href="#">card</a></li>3 x- @1 P6 ~3 l- `0 E& @7 v; X3 e
<li><a href="#">cavans</a></li>, p/ _1 R3 P& ?# {( E0 p
</ul>
. J" [$ G2 a& W
5 g( ?9 q% h( G6 ^3 _* |! K# C! E h+ H2 Y
<script>
. [: [% r, N" B$ ^/ p! L3 F# x: H function myFunction() {; L( w/ o- j$ f t1 Y
var input, ul, li, a
$ z1 \& X+ @2 _+ A* S O input = document.getElementById("myInput"); P" E) P) i Y4 Y
ul = document.getElementById("myUL")
$ {4 {; z+ e- v$ B' G5 ~ li = document.getElementsByTagName("li")6 f" ~7 n( {( _! ]; E* F
var inputvalue = input.value.toUpperCase()! }4 c4 B! s! B7 ?* F
for (var i = 0; i < li.length; i++) {2 g, Z9 r% Z W# T& G% l9 ^
a = li.getElementsByTagName("a")[0]
; i0 i* F7 A+ W0 o if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
5 a W0 h) h: E% |. Y4 q4 }3 R li.style.display = ""
% N5 e3 F% H7 V$ R$ e% ` }
" n- D. Z' I, o% |; `& _ else {, T G. x- ~' r1 N/ p K0 T" }6 m0 t
li.style.display = "None";% K6 `6 ~! s+ L& c& i! I0 E; D2 h
}: A1 k/ x; B8 t. |/ e. a9 `1 y
}
) Z" e2 q/ Q5 m. e& |# I }; d, m5 n6 x6 g2 Z" W5 `. ] A) [
</script> D- {! Z# k6 a3 M5 ]
</body>9 B% r2 x) H/ } W8 \9 B
$ A! E, ~; B" F6 J% C</html>[/mw_shl_code]- |9 S {% ] G. O
|
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
发表于 2019-11-7 19:24:08
发表于 2019-11-14 09:05:00
