|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
& x* w% t6 n# j; a" O
JavaScript 搜索框自动提示* C$ B4 Z# I, U3 F1 [
# ~0 y* Y) l0 M8 ]
' A& `: X- u0 U- q3 ?) M
1 ]: H% o8 k1 |- j
! @! M7 I, s+ s! N9 v/ l# {* E[mw_shl_code=html,true]<html lang="en">+ v0 \2 d/ o% {7 v0 f9 e
) W* K0 R& z# M G r. }2 ~2 g<head>
! Q7 m# W9 ]4 H0 ^6 l2 C8 b8 L! d <meta charset="UTF-8">
# b/ d, u; ~- c' G& e <meta name="viewport" content="width=device-width, initial-scale=1.0">
* b" w4 ~1 F* G. F <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 Z/ E% a( P' y9 A9 D ]. X4 w <title>filter the value</title>- ^, y- T: H( u5 Z9 s7 m$ O7 Y
6 R( G/ p2 V# G3 e8 |% |! R1 V <style>
1 B, T( C- J. y5 D( l #myInput {* T+ J; i9 j9 n" A& d4 E
background-image: url('/images/mix/searchicon.png');! i" Q% _1 {1 ]4 Y; n8 O
/* 搜索按钮 */
]7 n% {5 C# r" b* |/ ^% t8 r$ v background-position: 10px 12px;
2 D5 |" |! U: ` /* 定位搜索按钮 */; [ z, q% B0 E- T6 D" B T, @0 K
background-repeat: no-repeat;
" D6 k0 p! y9 @! P+ H! ^* p9 e- H. g /* 不重复图片*/
$ l" A+ B4 ]6 T9 t: x1 w! b$ U font-size: 16px;; [3 f) t! u2 f) X. C: A
width: 100%;
i/ f: \2 U) `9 c1 L8 m border: 1px solid #dddddd;) M8 z ^. M' {
padding: 12px 20px 20px 40px;6 H0 Y* K& f0 y/ s. E5 [& T3 Q9 l e
margin-bottom: 12px;
4 E5 R! S5 a7 ~8 _ }8 ]8 D9 F' g$ @8 C# v
1 d! D# d0 x) C8 ` Y/ R #myUL {
1 D" G1 u& z& i6 b list-style-type: none;
* s8 @( O: Z7 W/ k* J% w# | padding: 0px;
, o2 D5 C1 P- B! y% q- O margin: 0px;& o" T3 n/ j7 r* i* }/ e4 D, z
}0 u# {/ }; s( p. ?1 F
5 v5 A# Z. T8 Z3 z; l8 P
#myUL li a {
/ s4 _, l5 E2 v/ ]' b border: 1px solid #ddd;' S) ?4 X* R' v8 m) Z
margin-top: -1px;% J. D6 x4 X# O9 j
background-color: #f6f6f6;" v5 G" _3 ~3 c9 n
padding: 12px;
) B6 |6 d- m3 S+ R6 h, T. d$ L text-decoration: none;, A$ M2 V' Z3 S7 M, P5 J
font-size: 18px;
5 {$ j+ V* v* e9 W: {$ Y color: black;; h! I" w; x6 K* K/ g
display: block;
5 {+ `6 }. c* L2 M+ [1 g3 a. x }
' j3 e* b' z6 b' Q! U8 o, E6 `' u8 ~
$ {3 D3 T1 @7 d% z- a #myUL li a.header {8 O* Y: p) _) f g; a. h
font-weight: bold;
5 G' |1 S: u4 N7 L4 v( d background-color: #e2e2e2;: o$ t$ S/ G% Q8 `+ b- k% W" I
cursor: default;
- S: O b1 D! l }' {9 z0 @8 O7 H/ S9 ?+ [
% b2 ?% g9 p. X/ t #myUL li a:hover:not(.header) {
( ~ v) \" W+ k; [8 x# ]% [ background-color: #eee;# }# R2 h, @' w* B7 J
}2 [: K3 k# M1 W+ q
</style>
: ^3 s/ V: Q: W2 `6 @</head>+ b. e5 @- Q% k
; T7 w$ f% G c1 @6 }) ~( P<body>
1 a9 @' j& ]$ g2 o3 q
4 H! E4 Y+ m% t% J# U' A1 B <input id="myInput" type="text" placeholder="Search....">$ d( O4 } p" f1 U! {0 B7 P
<ul id="myUL">
9 M3 |, T9 O3 r+ G <li><a href="#" class="header">A</a></li>
+ X4 Y5 Z9 L: G0 C <li><a href="#">abc</a></li>" T* \ G5 J7 I, P0 R/ \: M, J+ S
<li><a href="#">abort</a></li>
9 |' r- P; m: ~ <li><a href="#">abandon</a></li>( u2 P9 r$ z' Q
$ V# Z7 K% Z+ T2 r, r <li><a href="#" class="header">B</a></li>
@( ]/ Q* N6 B2 ]* c5 }( v <li><a href="#">baby</a></li>
' ]6 _- A6 Y. @& J <li><a href="#">bird</a></li>6 x B A( M- y/ ]8 _7 Z" N
<li><a href="#">bin</a></li>' `1 x/ j" s0 X6 ]
" g" \) C( n7 Z, o <li><a href="#" class="header">C</a></li>4 c* N( Z F! j* G3 Y* Y
<li><a href="#">car</a></li>
4 [4 J8 j( R r( }. u7 s6 h1 S <li><a href="#">card</a></li>6 P( Q, t1 d/ A0 j6 R8 v
<li><a href="#">cavans</a></li>
+ l! F. J5 |, x# F: v4 X5 Z2 J </ul>
7 a1 W; f; r# p5 k, F1 \1 s8 h/ K0 U; b0 f! D
3 u2 ]2 i9 ]5 I1 |- C/ } <script>
: t; B3 O% ^9 _6 y8 N/ a% r0 X function myFunction() {
4 Y b3 ?+ j9 z- M9 V; @ var input, ul, li, a
, ]3 k& J, _, C( R- X+ S# |( e2 @ input = document.getElementById("myInput")9 M0 P. ?% r9 ?! V3 p$ S
ul = document.getElementById("myUL")
5 r r) T+ r4 ^, o9 B/ k2 L- x* O li = document.getElementsByTagName("li")
2 |2 s, u8 _1 U5 z var inputvalue = input.value.toUpperCase()
, R. h8 V7 G ? for (var i = 0; i < li.length; i++) {. z' n, B% A o# b
a = li.getElementsByTagName("a")[0]' N# F9 J. M0 u- n
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {6 f" K* z$ {0 b P1 w; o8 ?& m+ B& R
li.style.display = ""
/ N. Q. z7 W) U$ t1 t }
9 t( @$ `9 y8 s else {4 {& x- e3 C1 k* c" V& a+ t' Q+ {, R
li.style.display = "None";
& a, ~+ V# O( C8 Q6 R$ z5 Z8 |' n }# M B L. k/ l5 d; v/ H9 ~
}
: m! N. B2 @& @4 c3 w3 f }
( f2 I X& I4 v </script>& I1 Y6 R' d: D* G" u
</body>
$ _$ [- M' ?5 j% [0 w
, o) B" M: P5 J+ \$ b& B3 x& Q. O</html>[/mw_shl_code]
2 c: W' t' R& r4 K3 F |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
