|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
: L7 m' m# @' V* s, Y) O. c& {JavaScript 搜索框自动提示
: ?% O. V, _2 b" w3 R+ K! _ C. ^6 Q8 {9 b# H
" Q/ w8 t4 S) |2 W8 D* u3 H3 Q8 m+ i) V6 j; b- ]6 V" |! A
C9 @0 P0 {, ^) a. C[mw_shl_code=html,true]<html lang="en">
! U# C& Y! S8 D- O& A- t( f. Z1 D! j5 M
<head> P' `. M3 D- \ r3 S. N
<meta charset="UTF-8">6 h, r2 A* p# f
<meta name="viewport" content="width=device-width, initial-scale=1.0">) `5 |# G+ F1 Z/ q3 _2 G+ G
<meta http-equiv="X-UA-Compatible" content="ie=edge">7 ]+ e1 |2 v: K+ V$ N" r) f, `2 ?
<title>filter the value</title>3 _6 ]6 V7 K4 Q: o/ \
2 [6 M% p+ f+ \: Y1 s% d9 V
<style>
. f9 @8 N ]1 K8 ]. @0 \- s) @& Q #myInput {
& S( R6 K( x( c/ V' Z background-image: url('/images/mix/searchicon.png');, e) z6 i' i8 I
/* 搜索按钮 */0 [ B8 ?. t( N8 j* L, V) b+ J
background-position: 10px 12px;* ^" c$ w! F# g% c. f8 @/ M7 T4 a6 ~
/* 定位搜索按钮 */! A# u- L: c9 q; o" G6 Y' r; Z; n
background-repeat: no-repeat;' B, G* H* u1 I* ?9 u
/* 不重复图片*// w! K( b7 D" z$ F" S# T E8 _) K
font-size: 16px;
" w; ^# u9 c. x }+ y7 |" U width: 100%;
! d T# u8 x- P3 H2 M7 P. Z q border: 1px solid #dddddd;
% t( D0 i' T$ Y' U% J8 P padding: 12px 20px 20px 40px;
* b# K/ o0 }9 S* Q+ Q4 R! c3 O7 _ margin-bottom: 12px;, _3 ?+ V4 S$ l% Y
}
3 P; ]* y! W2 F3 }' P' h! A
+ A, Y: x; r" M #myUL {
! @9 f9 }8 t: _' m/ e, C) Q- m list-style-type: none;0 B' v9 I: n6 f( p- ?
padding: 0px;
. X( q4 O; t& F' |& M3 H margin: 0px;
2 H2 d" ^. W: d2 D0 v) B6 t }
' `; H# T; r% E" {6 {3 T- q
" Y3 t0 d2 l3 s0 u. C #myUL li a {
7 P/ q$ U. C/ b, N. [8 H6 w border: 1px solid #ddd;8 o! z1 _8 D6 O2 Y! S. j
margin-top: -1px;
$ v5 r( F3 D" s9 H" Z background-color: #f6f6f6;
- l0 w+ d6 V6 R( r padding: 12px;
9 J" x$ n8 p2 a3 z" y* K4 ~. v text-decoration: none;" k2 _. W2 l7 [" }! I
font-size: 18px;$ D: X8 x7 |2 J0 s! N6 B
color: black;
5 u) A5 Y3 j6 L' C$ y/ i display: block;& Z0 h4 b: I6 U( K2 b
}0 N) e% _7 I" I2 U7 H
' [, g9 m: b) I* Q; l$ r$ I #myUL li a.header { a& e+ N4 d! B9 X
font-weight: bold;
" J F- g% z% _9 |& s background-color: #e2e2e2;$ }0 R7 [6 c: }$ M! l
cursor: default;$ @) A* |% y1 t* P" S5 e4 ]( U
} i% T/ W$ D3 A: m" g
+ U5 ?. H2 U1 v5 S3 M5 N #myUL li a:hover:not(.header) {
1 A: Z) k$ c3 Y- S Y7 O background-color: #eee;4 D0 [ M6 `3 a7 ~
}
5 G1 `; Y) |! q2 [/ h) o </style>" G0 @7 k* d4 g; D) {" H; t
</head>
# I, E v# c6 u' @2 `; n
" v* I9 @8 H4 `: x6 t<body>
# A; g6 ?1 H9 z8 m5 n% R" P9 r# r) u! M
<input id="myInput" type="text" placeholder="Search....">/ ?0 p6 Z, P* a) Q q: [
<ul id="myUL">$ S: w) K4 r& q# ~) L* m
<li><a href="#" class="header">A</a></li>: @5 x; \3 K9 q7 t
<li><a href="#">abc</a></li>; U8 Q" M$ A( l1 K+ M6 n( J
<li><a href="#">abort</a></li>
8 O& K/ q$ b$ y4 Q' j! | <li><a href="#">abandon</a></li>, r& f! V: G9 N( E4 J/ z
' q6 t: Y! ?( J
<li><a href="#" class="header">B</a></li>
; x2 F3 p9 l$ ]3 A5 M; F8 x <li><a href="#">baby</a></li>
" |% x+ W+ I$ l: Z' b8 h$ v <li><a href="#">bird</a></li>
# j* D; }. \) W( A/ }8 M <li><a href="#">bin</a></li>6 j; Z( V1 d) h) {; A7 _
) \& k, S9 A! y" H) Z
<li><a href="#" class="header">C</a></li>1 R; |- X5 [3 `! v# U
<li><a href="#">car</a></li>
' L2 T* U7 I6 G4 H9 ]! V0 \+ a. K <li><a href="#">card</a></li>% S" X" w4 ]& h/ w) [# Y5 a1 ~
<li><a href="#">cavans</a></li>
6 n* `$ B# G% ] </ul>
5 z6 C" `6 x8 b, d2 {5 U" E& T \3 i/ c% d
' k( y- L* }) m4 y
<script>7 z/ F' D( b5 F! R t. ~
function myFunction() {# v7 r, V1 R' g; c$ Y6 \: g. E
var input, ul, li, a) d2 U9 h: ]5 W, e
input = document.getElementById("myInput")
$ K; ]; t( M9 p& [! \4 Y/ W ul = document.getElementById("myUL")1 o. C) J/ p2 A+ f: i
li = document.getElementsByTagName("li")
% S2 o' I' \8 n0 \! A9 c3 `- R1 M var inputvalue = input.value.toUpperCase()
& ~5 S: f" W8 N4 `+ w! y' F for (var i = 0; i < li.length; i++) {, Y) W3 S/ V+ D, x
a = li.getElementsByTagName("a")[0]0 o4 N9 ~4 S& U+ p. B3 L4 a5 K
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {& S/ U1 {. A7 X6 ` E
li.style.display = ""
) Q: D9 ?8 v/ l6 v, e9 N }
5 d9 k a% t3 o- p |4 j7 r8 D4 D: V else {
' j/ t& X; w9 b+ W li.style.display = "None";8 N4 C4 W" M) G/ E7 t* E
}
. `% }0 M7 R# T2 T* v }4 }. s F. J$ W2 i' y
}. ]' ?$ @; @# u
</script>+ Y; f# G) y( K# }* R
</body>
0 }8 G0 l5 P) ]/ z
' o5 N, B" Z' \1 {# c/ C</html>[/mw_shl_code]# m) t! y. L9 @+ c9 e' T5 N
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
