|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
" x5 p5 K0 Z# S gJavaScript 搜索框自动提示5 u5 i! J: W4 Q; {
; O2 J8 _3 X1 S$ y+ _* }
# L- S1 z8 O* A# Y) N
, C4 I# Q$ \% X1 i
0 [: q4 @- N% H Y0 ~[mw_shl_code=html,true]<html lang="en">
- q7 T0 V y( N. c2 _
# {/ b" F; d* X7 m+ `<head>; U! O6 Y; U0 a Y
<meta charset="UTF-8">5 O) `& R' a' o( ~! h2 X5 l5 m, w
<meta name="viewport" content="width=device-width, initial-scale=1.0">
; F( K; q: p: z5 |" E* d% |3 h <meta http-equiv="X-UA-Compatible" content="ie=edge"> K5 T6 L, z, d/ b
<title>filter the value</title>( T, b% h7 B/ }* ?
4 P( t' ?1 O$ _! K6 c <style>
% }# A f) j- _; O #myInput {& A6 r. k0 E0 N9 T! @1 }8 j) h
background-image: url('/images/mix/searchicon.png');" n. l$ S$ ^* J; |
/* 搜索按钮 */
, S5 M5 r( q8 Y5 n background-position: 10px 12px;
6 S) p: `) r8 o. Q# C8 \- C" } /* 定位搜索按钮 */4 u7 w. `% b6 g4 _) ~- z
background-repeat: no-repeat;1 e8 A2 q: [1 e. w& {$ ~
/* 不重复图片*/
% X" ^1 ~2 e4 C6 } font-size: 16px;
; [ d9 C- ^8 P% ` width: 100%;
0 t e( ~% m4 |$ ?( j1 d9 ^ border: 1px solid #dddddd;4 o9 o3 o& `; z$ J2 Y7 @
padding: 12px 20px 20px 40px;
3 J- ~+ W6 v/ P7 h* L5 y8 l+ x/ P margin-bottom: 12px;0 P0 M4 y/ o7 z. ^
}' O0 X3 C/ V L2 l
7 I2 ?; x. H; u7 B. t6 v3 Y #myUL { I. a; w: Z7 ]
list-style-type: none;* C4 q* ]* T( s' B
padding: 0px;
G) j! A" t O margin: 0px;
+ s5 B/ W" C9 B1 O# ?" O }7 [( w, I$ V# k* W7 B
" Z' U* u2 N0 L3 ]
#myUL li a {6 G, i1 I9 `2 W& l6 @
border: 1px solid #ddd;
3 T% _' x1 `8 [) v0 } ]/ x3 } margin-top: -1px;7 B' j* x8 E" T9 ^8 S' q
background-color: #f6f6f6;/ E) I$ W7 [: k7 d
padding: 12px;$ Y$ k9 T; U |1 g4 Y/ D
text-decoration: none;
; X. }# x* |* U y1 i! n% z font-size: 18px;6 w! W# [5 E8 e
color: black;
- X! K3 P8 y+ R' P5 ~ display: block;
: ]) V- I0 W- S' E- I% w# { }5 z; w' B+ H& d# A$ D1 ?
, { i/ m% k7 W! c5 J: ^& R2 L" M* ` #myUL li a.header {
2 y: I2 q4 N2 D- L font-weight: bold;
5 ^& B2 C$ g; I2 k background-color: #e2e2e2;! Y& _: ~4 R' E. v! y3 z! f
cursor: default;& G$ P* a- K7 |; j; O' C
}4 b4 h$ N! x" ~" |0 Q
( w+ j6 `4 a# j) C7 ~& ^ D9 ?7 G
#myUL li a:hover:not(.header) {
! l' r1 |7 n1 t9 L background-color: #eee;
5 ^& S. y% |% Y0 O7 @) ?2 Z }1 A( ?6 s2 n9 R4 P" C# ]5 \/ v& _0 \! }
</style>9 ?4 A, t" v7 D# a
</head>* ^' ~3 O; |1 P$ i" Q
d& I% ?4 V! E$ y8 c+ n5 |<body>/ r+ q: M# n" X9 y# H' K. Q9 g
) m. f9 O; ~0 l1 M1 i4 X0 G
<input id="myInput" type="text" placeholder="Search....">
: {( d) p/ B* T' [3 i! | <ul id="myUL">$ L: ?! e7 g2 R t* ^( \
<li><a href="#" class="header">A</a></li>, |9 i. S' s) Q1 l
<li><a href="#">abc</a></li>! g9 K/ L; l, `* N
<li><a href="#">abort</a></li>
8 q% Q* a9 X6 a" D1 d/ F5 | <li><a href="#">abandon</a></li>
, K5 A+ l1 F' V) Q! s! y! u) c5 T& b4 ?. t4 X
<li><a href="#" class="header">B</a></li>; @% H( y7 M: v' ]! u- v$ p6 Q
<li><a href="#">baby</a></li>4 T5 g9 F. h5 s% v/ @6 Z) v0 }/ J( v: B
<li><a href="#">bird</a></li>
5 s6 K+ \+ ?. }' `' F <li><a href="#">bin</a></li>4 I% v% @ F+ b) b; l& L, i. ?
* d, a8 i; V5 Z Y4 @9 X
<li><a href="#" class="header">C</a></li>
I9 v$ p" B5 ~8 _ <li><a href="#">car</a></li>" w1 }. W7 }# Z# j
<li><a href="#">card</a></li>
( |! S/ c8 I% M; c8 j7 n( Y <li><a href="#">cavans</a></li>/ k/ l* M* t& i u. ~
</ul>8 E' r' o8 N- V' ~8 u( H
& [2 f# T" l p5 n* Y/ h
, z9 F' o# L3 F7 Q% n6 _ <script>
. O# o' R, e; g" C/ A function myFunction() {- ^0 ?! f& B/ t3 x
var input, ul, li, a6 G9 e7 H0 y% k) F4 [ w
input = document.getElementById("myInput")$ [# M4 q% I. z: [$ ^
ul = document.getElementById("myUL")
6 P9 y8 ^& [: O4 R9 S3 W, r li = document.getElementsByTagName("li")2 }- A | b& C9 y* C9 \- {
var inputvalue = input.value.toUpperCase()
0 R! j7 ]: @, |/ P for (var i = 0; i < li.length; i++) {' ?1 M6 y/ ~6 {& }7 D% j$ m
a = li.getElementsByTagName("a")[0]
) V6 z/ ?* G/ S) z9 T9 D if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
1 h* { Q$ Q6 q4 Y li.style.display = ""
) U6 I5 R Y2 ^ }
9 \; |0 D- J1 X8 D9 s( Z else {
2 k' d4 r6 T4 a6 _ li.style.display = "None";
; i3 c- k8 [ \8 k! D& c; q& T }: g/ O% ]) q6 f
}
7 J* s5 S# u% c }+ b4 N6 |! Q6 l# Q2 |
</script>
3 _3 J9 y+ D d. k- h</body>
4 O/ z0 _7 w, s, r E% z# W# y5 Q* ?$ a& I- o
</html>[/mw_shl_code]
$ x& l0 f5 {. B w; m# [ |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
