|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
( s: E6 R d2 P( v: P7 cJavaScript 搜索框自动提示
, Z, S; `: {8 o7 d8 K- O, q
7 X4 c# B) x6 s( C$ e0 C8 R8 G& a( y& h# t& A0 ?2 [
+ F4 B; p- { r4 q
1 P' w0 Q4 N5 O1 p& M3 m[mw_shl_code=html,true]<html lang="en">
( }* H1 A! |( J9 R0 z4 o, X' F. W- d p3 G1 E# O
<head>7 B# Y( a' O# F. \
<meta charset="UTF-8">- z/ G. o8 P% F$ y
<meta name="viewport" content="width=device-width, initial-scale=1.0">
( N( N! q+ P$ t, G ?4 j <meta http-equiv="X-UA-Compatible" content="ie=edge">
P: H( N8 ~8 W9 Z5 F <title>filter the value</title>; Y: V+ e0 B0 A; \" H
' i. @2 M( X" B
<style>3 T. t3 @9 X+ }' ?8 |, s
#myInput {5 }- u. c1 ?/ Z& C5 u
background-image: url('/images/mix/searchicon.png');9 L/ ^& D2 n8 ~$ V( V
/* 搜索按钮 */) z" \' K! W" f% o% T. f* o6 G
background-position: 10px 12px;5 I5 r0 R$ F# K* A U' v
/* 定位搜索按钮 */9 A$ n1 V( {1 n2 Y9 d
background-repeat: no-repeat;5 o- @: o* R& Q' u
/* 不重复图片*/4 N' U9 ^' D/ k% K& }; D+ w
font-size: 16px; a4 K$ ^' g! g
width: 100%;) H V% p* g+ L! v6 K0 C. d
border: 1px solid #dddddd;
/ G# _" ^9 V0 t, |6 [1 @, | padding: 12px 20px 20px 40px;
5 @; Z! _" m+ N7 ~* v margin-bottom: 12px;
" p" O# j. P: C0 G }% }! y# T! h2 c, I+ z6 a
; L3 S" ?1 L. Z) k. u, {4 {! B% K #myUL {/ Q2 E: B5 R/ z9 Y7 w8 P
list-style-type: none;5 X2 a w, B1 ^/ b" m/ I7 l
padding: 0px;
2 q* s- |5 t( b8 J margin: 0px;- k- G- O5 Z4 m( l* @" m
}
9 d2 }3 {8 a) a+ C7 y" V V; E: }
#myUL li a { W) K7 c, e+ E- ]
border: 1px solid #ddd;% u( P. b0 A* X
margin-top: -1px;
$ m0 \, g3 K) H background-color: #f6f6f6;, C( g- G( r% t- j$ m
padding: 12px;
8 ~1 a" g2 _" j% _6 @2 H! F) [ text-decoration: none;1 M! E8 E6 n E1 o
font-size: 18px;
s. T0 H2 g7 O& [ color: black;
8 b- l; y" Y8 @- q- a! u display: block;
$ Z2 I. P- F% b q# D }. W1 H. ?( x3 o
9 B8 x, S2 |. ]+ S4 i7 _1 J6 L #myUL li a.header {7 Z7 b* _. L# a3 V
font-weight: bold;
( k/ I9 S1 p( j1 L! ?2 V* J$ w background-color: #e2e2e2;& d u( _. `/ g4 Z$ X# e$ u" E
cursor: default;) o" M! |9 z5 Y2 ?) N
}# |! }5 X7 W; v
5 X/ ~0 F$ S0 N
#myUL li a:hover:not(.header) {
: y) q o3 z; e background-color: #eee;. f r" |, k0 D
}
! L6 M9 ?. |- x3 e1 I </style>, Q# n8 z4 U3 K1 k* |, }6 A; {
</head>" ?! Q7 C: ]2 H+ Z! X
5 ?1 E2 _9 F: ?( H8 ]) Q; ?+ \, x B<body>
& o @& q2 ]& {+ }/ ^: D4 C+ Z' P k
<input id="myInput" type="text" placeholder="Search....">
" D& a/ Z" X! q# R <ul id="myUL">1 u5 w8 `: Q: }, x3 P/ ]
<li><a href="#" class="header">A</a></li>
( V, I0 v H$ O$ e9 G. y A3 u6 p <li><a href="#">abc</a></li>
/ `4 u7 U3 B; t( y) z <li><a href="#">abort</a></li>
% u6 x" Y; X$ r$ \4 O0 H/ [, d# H <li><a href="#">abandon</a></li>2 k0 ^/ S% _5 e8 w
4 W' e( ~7 v+ _* [$ T) e
<li><a href="#" class="header">B</a></li>
4 L' L6 h* ]$ j1 K: k6 ? <li><a href="#">baby</a></li>
3 j+ ^& U$ a1 ^$ {7 f, y <li><a href="#">bird</a></li>
, _: K* t }* g0 ^ F) G6 F <li><a href="#">bin</a></li>
" n; n% E0 |& q. I0 z1 W6 H: y& E! a4 ]' W9 l. \7 q) N. V
<li><a href="#" class="header">C</a></li>2 D% T+ s3 y* G, s4 _
<li><a href="#">car</a></li>8 R# T2 q8 ?( x+ V9 ~
<li><a href="#">card</a></li># S Z1 v* ?1 \3 s2 q& @: Z# j
<li><a href="#">cavans</a></li>/ m( E% H* v" D' p
</ul>
& h: Y6 s/ `0 f& T) t
' h& O- \" v+ l: n( B# U7 B8 Y8 q! `8 r# _
<script>! ~0 x5 \+ D( A
function myFunction() {4 D& R7 a8 s9 c5 a
var input, ul, li, a& v; M% L) L6 M" l0 H- c
input = document.getElementById("myInput")
: k8 b1 ^4 J W! ^ ul = document.getElementById("myUL")! b" E k/ W8 T" M1 `2 ?9 O9 t
li = document.getElementsByTagName("li")
( U" |3 _% k+ P% d8 ^) M var inputvalue = input.value.toUpperCase()8 H$ |1 J/ r. @ q6 E
for (var i = 0; i < li.length; i++) {7 \1 x3 A% M0 b" c$ P* a" m
a = li.getElementsByTagName("a")[0]% {( N* `0 I* m& t& l: Z
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
- a' Z! s5 H* J li.style.display = "": ^) V; s3 D) V. h6 `5 P
}
5 E. `8 L) m! r$ \+ L else {
+ S( P- e. R' K5 m& |/ n' Q" ` li.style.display = "None";$ _; M, {9 s# R! f
}( P0 _" ?5 |6 ]: ~- u1 F
}7 P4 M: g# @( U ^8 \, W
}9 h y9 L! j, k. Q% w# N* [( R5 J5 g5 e
</script>
' ~- h& ]1 T! C: U</body>; ~6 N' p3 H, I" _
% ?- J4 V' A" M: S8 f</html>[/mw_shl_code]& e4 ~) c7 G: S0 \& y
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
