|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
% s) u& t j1 G- R1 ]$ A
JavaScript 搜索框自动提示 u' P. F; E% a
7 o) q: F- V0 n+ @
9 ~& n, c$ O: |+ X8 {/ k: e& K9 ]
2 K; ^# Z* e/ W8 }; Z0 a2 R9 c4 G9 }9 w- w0 d; I
[mw_shl_code=html,true]<html lang="en">9 j' K/ a+ G- @' o
. r4 Z3 \# J( y& P. Y( U! A<head>5 C5 ~4 z' U+ Z+ k& y. B3 j
<meta charset="UTF-8">
5 n/ F3 i& f) F4 ?4 [+ ~ <meta name="viewport" content="width=device-width, initial-scale=1.0">
& C" o3 w6 h3 G( X8 M <meta http-equiv="X-UA-Compatible" content="ie=edge">: q' R& _2 S, T4 F6 W
<title>filter the value</title>
; c8 G/ P: W# \- [& V. n6 `' _9 \. X* \! f6 e6 m# [5 C" n
<style>
3 F* |- |2 ?' h0 Y# C8 _9 @; T #myInput {6 D* A9 d+ V5 H
background-image: url('/images/mix/searchicon.png');
$ g0 z/ D. C3 B7 H& k /* 搜索按钮 */
: V, d; n% O% P7 }1 [ background-position: 10px 12px;
/ ~$ K+ [2 [6 f6 m. i /* 定位搜索按钮 */
! V5 |4 h" D+ T7 K U4 w. Z background-repeat: no-repeat;3 h( Y( W9 C) ^: `' ~5 E
/* 不重复图片*/
! g1 H+ P- d5 b4 E$ ^2 ?( E font-size: 16px;3 H9 r$ L2 u$ `# }' j" b: P
width: 100%;( m0 K& S: t! v
border: 1px solid #dddddd;. k! s9 {, j2 l1 ?
padding: 12px 20px 20px 40px;
3 y1 G6 Y: g0 W n: j! U margin-bottom: 12px;) W# E1 B: N, q9 x$ N i3 ~
}
: z: r3 C7 E- F! y; u& \, E5 H; y
$ K: p+ |. I2 D6 g #myUL {0 u0 A$ c7 x3 T+ ]' e
list-style-type: none;
+ P" o) P$ @- o padding: 0px;
% p8 ?1 K `3 ?9 V+ V6 z2 A margin: 0px;
5 ^" c1 H. k" c. }4 a( S }
, Y% b. |2 Z" C2 {2 P/ r% h, i: D. A
#myUL li a {
( R+ V. w) r; i. s0 y! e border: 1px solid #ddd; k; |6 E- j% r. z& a
margin-top: -1px;) h# Z m2 X' @. R! G% w
background-color: #f6f6f6;2 O# ]& |5 {% c7 d* l- [+ Y
padding: 12px;5 J% {' l9 W3 v+ [
text-decoration: none;! n P! U" z [. B% [7 w3 |" \# i& j
font-size: 18px;# I: w& h; L& b% T+ D4 P& M
color: black;
# _. S' ~, O; L display: block;5 P' b' E I4 Z. K
}5 k- `& N" u( c
, _" ]1 ?& B Y0 @( n
#myUL li a.header {$ q& S# N3 F, U" M
font-weight: bold;
9 V7 q# P6 a7 a; y1 Z background-color: #e2e2e2;# X4 Q5 {# E. ]7 ^4 [4 n- v9 T
cursor: default;* \# Q; S9 ~. ]) |" ?- W
}! }/ i+ C# X, H. Z& w8 j% C0 G
2 j& ?6 z3 B0 f; e0 N, A6 m #myUL li a:hover:not(.header) {
[. M+ L) d8 r0 k; |4 d% X background-color: #eee;5 ~9 W5 T" C0 w2 ^
}$ }7 ]/ L0 m+ B. p# e$ U5 J& v0 L0 j" N
</style>2 y1 Y1 Q- C& v
</head>
% Y U- @4 {# @2 I6 q, S, Z
- M+ o( [6 P& D! }; \* H! k3 H<body>0 T! i% x( R O% Y
* @# C& i2 r: I8 n% ~ <input id="myInput" type="text" placeholder="Search....">. C- P* V. F& L! H
<ul id="myUL">
& _/ x/ {/ P" J: ]0 b <li><a href="#" class="header">A</a></li>
1 J/ D6 i+ E( o6 q+ _4 b4 { <li><a href="#">abc</a></li>0 v& |9 `7 x* l! j+ j3 J
<li><a href="#">abort</a></li>
) B; K o4 ^6 T# y# [ <li><a href="#">abandon</a></li>
8 l. J1 r! f1 C$ k! f- ^9 _# f4 b9 J- U% `
<li><a href="#" class="header">B</a></li>
8 L+ y# V' u" |) c2 V |& D <li><a href="#">baby</a></li>, t9 X- }- x& {! ^, C* @
<li><a href="#">bird</a></li>3 P1 d3 j# O$ C0 |2 U
<li><a href="#">bin</a></li>
6 L$ e# i+ C4 l$ \9 x" m1 J4 \$ p! ?& C; R# b5 j! t
<li><a href="#" class="header">C</a></li>
I! ^& A- B/ `) ~& m, f <li><a href="#">car</a></li>
- B$ M2 W% U3 l k <li><a href="#">card</a></li>
# v1 L/ x* @7 T <li><a href="#">cavans</a></li># Q2 f5 D, C/ u- b% i. Z
</ul>
4 |# @( U: _- b$ ]! ^/ @( \6 F4 \( y
, D. T, O/ E5 f# P/ ~% h' N9 t" A% t
<script>- d( T% M3 m% a2 ?" k
function myFunction() {
# f( w* {0 t" _( ?7 m8 b var input, ul, li, a, t0 @4 Y6 Q; H& b9 ~3 B
input = document.getElementById("myInput")
1 @- g9 T R {& O a' E ul = document.getElementById("myUL")
, R5 w' U1 _6 ?( T) g li = document.getElementsByTagName("li")
2 Q% O# K5 f$ U; }+ c var inputvalue = input.value.toUpperCase()
! ^. k" `2 f7 q. {. p for (var i = 0; i < li.length; i++) {
( `( r# W& R3 m# ~" ~3 C5 R0 } a = li.getElementsByTagName("a")[0]" t& B4 N& O: C Y. ?$ `3 B
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
. R9 D( G4 G: S! C$ c7 x. w' p1 Y li.style.display = "") [7 O9 ]4 U& e8 j$ i: Y4 O
}
; \) H0 F1 z P else {3 w& a& ]' l. g8 a- \+ k
li.style.display = "None";
F" D* J( \' S2 s R+ O }: u6 z( G: J! K3 A2 g/ t+ [/ z+ z f
}
, ^# O- V& }* L" ^, D! ]. X# h }
/ L* S* g( I Z: N5 o' | </script># N6 e5 i$ j9 L# F& ?
</body>/ A/ ~) t& }2 Z, y) w+ J) Z. D" W
5 R! s% |2 e8 g7 i
</html>[/mw_shl_code]
1 O& c6 Q7 @8 u# W0 X2 L |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
