|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
7 E: {& J% G* C4 Q; g' Y% ~9 aJavaScript 搜索框自动提示
3 x8 U* L& U1 }3 V) P7 x
1 k% n) t2 o2 `$ y7 F! j: |+ r7 D, H" i2 C3 q4 r
: @: d: i3 c0 ^2 ?4 o5 \3 ^/ {. p
[mw_shl_code=html,true]<html lang="en">. d& {' B! t; b2 D; D* }
* H% T! q, n, F' a! j2 E- |% g
<head>* c% T$ q7 i, X" d+ ^
<meta charset="UTF-8">' P; _7 @ {- V
<meta name="viewport" content="width=device-width, initial-scale=1.0">
% V0 U5 h2 |; G" R/ C- E2 K3 x <meta http-equiv="X-UA-Compatible" content="ie=edge">
% x& t- p0 A% e' K& M, D6 Y <title>filter the value</title>
3 o' A4 s5 D3 F Y
# D j; b8 P8 p3 r1 R <style>" Y N" B% K" G+ @3 |
#myInput {3 J1 M: D- j( B. C& m
background-image: url('/images/mix/searchicon.png');1 v5 d4 J7 ~* ^. m: r6 A* {
/* 搜索按钮 */- e* b3 T' B Y7 L
background-position: 10px 12px;
3 S5 \4 d3 |6 ^7 |$ W, V' m /* 定位搜索按钮 */6 y9 h* t; G" N# y
background-repeat: no-repeat;
& V' Z. G2 T& M8 F6 C, A /* 不重复图片*/
/ s3 |3 M6 R1 a+ U$ J* V. }1 U font-size: 16px;8 H( G: @# A# U/ f5 s6 R" n7 L
width: 100%;
0 s( q- a+ y+ O border: 1px solid #dddddd;
{1 K a( w3 m% q padding: 12px 20px 20px 40px;
4 W9 b1 _6 B! m2 q, U margin-bottom: 12px;
2 \/ \+ ?# H& t# }- N0 [/ ~ }
5 D3 S* j# _+ A, P5 c/ W+ z
5 e1 n/ g+ q# C4 U+ O8 j. Y #myUL {
8 G5 N) Z, l5 c# y' h list-style-type: none;
# G( t0 q/ q3 ^1 g) p9 y$ ?8 g padding: 0px;
6 [# u$ `2 D6 f9 @/ A9 J margin: 0px;
4 g3 K5 Q: E4 A J) _1 b; `5 t }
, y+ S4 k; l! F" _& X e& M- x+ L8 U2 H0 L! a8 j
#myUL li a {
r% y# g& [7 u3 J7 s! b0 l0 Q border: 1px solid #ddd;: M4 ], O0 i: W
margin-top: -1px;
! n3 J+ P4 @/ U% L2 N( f: g background-color: #f6f6f6;7 Z, O$ z6 n. C
padding: 12px;4 W* d# w8 H9 A( q0 r7 a" Y9 n
text-decoration: none;
" f% u1 }: k3 A3 ^- F# ?. Z font-size: 18px;
( u9 D$ R, w, m3 L color: black;
; } {1 K' J4 s2 e display: block;3 P8 r* A; }6 l- @# X* U9 H. i
}! [3 O. ]. R( a/ ]1 G0 h/ J
/ l y5 L. R7 j# t #myUL li a.header {* q3 f4 V2 v" o2 H
font-weight: bold;5 z& W- w- \; e
background-color: #e2e2e2;/ K2 u/ t+ t i0 e' a# M- O, r
cursor: default;
: d# r) K6 b7 t4 T _$ S6 ?# _ }6 j3 E; `) R- X$ R. H
; d8 [/ ?: D9 _) k0 ?# a
#myUL li a:hover:not(.header) {0 P' a8 {# C6 B" o6 W! C
background-color: #eee;1 N- a% p; c) R K
}
7 K" O2 I% j! P* q: K f$ ^ </style>5 S2 h1 O8 O( n6 m, q
</head>
8 [! B" T+ Z1 q% _
( `+ H7 k: R9 @1 w$ z/ r! J# p: _<body>
9 l" v, C& R9 h5 f
% Q2 Q$ ^) {- |9 b <input id="myInput" type="text" placeholder="Search....">! c y% e1 I k) G
<ul id="myUL">
7 Z4 }; r& C" }/ R* p6 T2 e <li><a href="#" class="header">A</a></li>
/ e( ]9 n4 o* a: V( ^ <li><a href="#">abc</a></li>8 z' L3 y$ z! M5 j' o( m0 v
<li><a href="#">abort</a></li>. c4 k/ _1 M/ g+ a& z
<li><a href="#">abandon</a></li>
; G& u8 C1 O. ^" @# ^ D; c" S+ ]& `4 ]
<li><a href="#" class="header">B</a></li>+ t4 h3 W2 |+ G
<li><a href="#">baby</a></li>8 S. W z- }0 `1 Y: k) O( P
<li><a href="#">bird</a></li>! e1 t5 v- C n% ]/ M
<li><a href="#">bin</a></li>: b4 e5 [* {. Q/ v- _( V
0 ~4 Q" ^1 M6 o7 O2 E4 V) ~
<li><a href="#" class="header">C</a></li>4 g, o# E# g% |; B$ [
<li><a href="#">car</a></li>
& v) k5 g W$ I2 `4 q9 `/ q2 o; @ <li><a href="#">card</a></li>+ u; N, O/ M+ O! W3 ], V$ E( L
<li><a href="#">cavans</a></li>4 X' X1 g# e: y' M
</ul>9 x0 s5 x4 R R% M0 O
) `! U9 K8 O0 u. S. s* l( Z# t+ g
; M' J9 u+ f+ w& s <script>
6 B5 W, ?2 M9 { B! M' \1 I+ r function myFunction() {. U% m$ K, b& A8 l) v* Y
var input, ul, li, a2 z7 l C R j- A) W
input = document.getElementById("myInput")
5 ~% `8 u* L4 `5 F% J) m' t0 I ul = document.getElementById("myUL")
S4 \+ R' A6 t3 o) i, |/ L& p$ ? li = document.getElementsByTagName("li")
' b4 _+ Z8 O4 g& v: n3 Y9 w$ L) z var inputvalue = input.value.toUpperCase()& g' T( |6 Y9 k* O$ z
for (var i = 0; i < li.length; i++) {
, Z6 g5 f0 X+ a* [3 T, V2 g d a = li.getElementsByTagName("a")[0]
0 D, ?, q9 u. V# \) G( ^" O/ Z. H if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {- ^7 H* Y. q5 m- B: q
li.style.display = "". ?5 o% p5 K$ ]6 ^% `* T+ [
}
! u0 r; Q3 v3 g/ d$ n else {
' u+ @* M' _8 r) } li.style.display = "None";
% G. c" n0 S3 J9 O& ^; L }
. b- @0 }, d, H& E, } \. k( \ }
" s( |' y' s! z, J/ u# d2 p7 f }+ T, Q1 F; H/ v# V: r( I! H
</script>& T2 `5 T# |& y, N* c9 U6 L
</body>
/ c$ D2 s6 \1 v8 J/ h: e
( U1 r3 A7 D3 v0 i% Q</html>[/mw_shl_code]
- D: G" V0 U) v0 L" p |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
