|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
9 h5 ~) J |+ V% M; x2 \0 q5 I
JavaScript 搜索框自动提示
6 k) y H/ \/ x. }) R( L6 ?% f
7 {5 k! m8 A8 e6 K3 a6 z
; \4 \+ W! l( w9 H
3 ?+ N7 o1 X# R, o V- j4 v) b# [) g
[mw_shl_code=html,true]<html lang="en">
. g( h& e+ f6 p) [3 |9 S/ D; D i2 F$ g& e9 {
<head>) v3 Q% g; h- p
<meta charset="UTF-8">
1 c% ^" w0 E! L6 m <meta name="viewport" content="width=device-width, initial-scale=1.0">0 v+ Y0 F5 N+ W. S! Z8 ~
<meta http-equiv="X-UA-Compatible" content="ie=edge">
( Q: ^/ k$ y; O5 L <title>filter the value</title>
/ R7 D. w( Z! m J8 T9 n
# b: e/ n* _' v2 N6 h1 \5 Q& {- V" t- | <style>! T W) W, F% A' y- s! ]
#myInput {4 c" M/ e, P) N/ S9 }% a& L
background-image: url('/images/mix/searchicon.png');4 p% C* c4 W6 | W( \- x: n
/* 搜索按钮 */2 s6 x" E1 n/ k0 ]2 ~
background-position: 10px 12px;3 P# |6 o6 J+ r* z" m6 h/ F
/* 定位搜索按钮 */8 U- _& H/ n: E) E0 {* A
background-repeat: no-repeat;
6 p7 {% K/ [( g* t$ o6 @- Z /* 不重复图片*/
& V8 I& v* I! j9 w font-size: 16px;
- w+ |1 X2 c1 I7 t4 d0 \+ \0 G width: 100%;
* {5 t& V6 o) H- x3 a* z border: 1px solid #dddddd;3 G$ }5 Y; Y6 ?
padding: 12px 20px 20px 40px;6 n4 |! I0 k$ p; E2 z
margin-bottom: 12px;5 {1 h' ?% M% p
}
' c( Y) \! V- |, ~- c# g3 i$ `* R* z: f8 ^0 K# H9 Q2 L7 t U
#myUL {
3 d, W% g. K( l list-style-type: none;
0 h D4 q0 J0 j1 }$ y padding: 0px;/ t4 Y0 E6 I/ U
margin: 0px;3 \$ u$ @2 J5 q4 w1 F
}
4 q2 |- g1 S l4 }1 j( H( p9 c: v5 k M K
#myUL li a {- w/ O& ?2 P3 s' Z/ \# L$ F
border: 1px solid #ddd;
0 P9 S. e7 H7 f margin-top: -1px;- @& u9 l- V& |- g2 h
background-color: #f6f6f6;
0 b4 r* |+ k! Y% B2 o1 D) r padding: 12px;
3 B8 F( U) U) L- ^7 O text-decoration: none;8 y: Y+ J' y* z" `$ F2 K
font-size: 18px;
; p2 F! x1 w$ `5 e: F. C6 u color: black;# n: o0 O! J+ y; n: e: _# p( m
display: block;
W5 \4 J; d- I0 C1 I0 ~) @. L9 ^6 M }4 E! H3 P3 h: Z3 d$ }! m/ c6 c
3 X Y1 ^9 b7 Y H #myUL li a.header {
1 s9 L/ M$ @: U" n5 L0 l% T1 r font-weight: bold; m3 g& q/ }8 q$ W% F: P* V5 S
background-color: #e2e2e2;
4 j" S5 N7 l/ l& @+ f3 q. K- d cursor: default;: W( u0 C/ Z) A1 b( O v2 p8 f1 U
}
* c6 K8 e0 l; T& E: N7 X6 @. f/ j7 p$ ? a& O
#myUL li a:hover:not(.header) {5 c8 r5 q" v! u- b
background-color: #eee;: v% \; y8 D8 s% x6 o4 O
}
; s2 q# ^, h$ y- j7 D, V: q </style>
! \1 D1 E0 E) R3 S3 i</head>
( v; b- b1 t/ p" d; M3 _. I. ~
! Q; M% R% `- r6 g8 ~' X( W<body>
0 O1 ~/ b( n7 G
9 M' \9 D8 c0 n& p) _0 C <input id="myInput" type="text" placeholder="Search....">
: o( V3 J5 r0 s <ul id="myUL">
5 u" \5 l/ P- u <li><a href="#" class="header">A</a></li>
- j! i& x- t: z7 _$ ^8 X! B <li><a href="#">abc</a></li>) {) [" d( W. {, c! m. |
<li><a href="#">abort</a></li>
* A8 }: K8 k) n) b5 ^7 g <li><a href="#">abandon</a></li>- ]3 P2 h9 |& Z" B: d( F
4 p$ D* X) E( p6 x+ `! R- M: F, Q9 ? <li><a href="#" class="header">B</a></li>
. b* s" }! \' c' U <li><a href="#">baby</a></li>
0 F) ]! A: Y2 _- z7 N' }$ l <li><a href="#">bird</a></li>( F5 [5 e1 a+ t, n% v7 q
<li><a href="#">bin</a></li>
; j$ i% E& ?+ {( B/ `; j2 I+ ~; Q: C: n* J
<li><a href="#" class="header">C</a></li>
9 Z3 V, |/ L! C: J% _6 j2 U <li><a href="#">car</a></li>
. P; z m( k5 [$ ~ <li><a href="#">card</a></li>
n2 A2 c: L1 z; L <li><a href="#">cavans</a></li>- k4 D1 T& `, g
</ul>
3 V# Q" N( S; E! t* A7 P
! R% d# I# H9 e( @7 z7 f
, J7 B5 |% ?" \; n0 \6 E, N. S8 k& \ <script>
8 v6 A8 t( o3 u% W6 O8 ]+ n function myFunction() {' M! J/ [6 {/ @1 \ H+ D/ E
var input, ul, li, a8 y0 M8 z; e9 V% f! C2 R2 H. m
input = document.getElementById("myInput")1 [ t* ^' O8 e" h
ul = document.getElementById("myUL")
8 x) [. |6 U- p* m6 b li = document.getElementsByTagName("li")
) X- @) F. A$ I% M6 j var inputvalue = input.value.toUpperCase()
' h: r% |5 |8 {0 c3 u for (var i = 0; i < li.length; i++) {
i' u: n) y) { a = li.getElementsByTagName("a")[0]/ k4 j* N J# J7 V& c* l1 o
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
4 {' x% X" a6 Z) C+ c& h; \ li.style.display = ""& ~. N U$ I5 ?, y6 S. |+ Q f' M1 L
}
; c/ P+ `7 l$ B0 t& o# |% w else {9 j, n7 d3 T' }# p+ _3 Q
li.style.display = "None";8 H2 @" N$ [- O' b
}
# m) Y+ d8 z" U& S4 w }
/ K7 r5 P8 D! T8 { }
7 a4 w( ^2 W+ I$ i </script>
7 a; E) E) e5 F' z- ]</body>0 y# d- V! G( W
" ~* T8 d0 b5 Q2 }</html>[/mw_shl_code]
9 I" ~' L7 ] d7 g3 s8 g |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
