|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
7 I$ H- H& g0 n) J* f% t- g+ @: l8 B
JavaScript 搜索框自动提示
) V' Y& C) h9 R! d( }; B" D, z* z0 X. k' q) F4 N
& y. a: e5 Q# Z A
1 p; k# F, D2 J2 W2 H
0 N' n! N( F/ W( h/ [9 ?" k; H1 X[mw_shl_code=html,true]<html lang="en">
- }6 `- d" M9 C. R& T% g g- o& U2 v& V: V) N# \" }
<head>7 g+ S& Q, s" D' j
<meta charset="UTF-8">
1 u8 v+ y" \. P& R <meta name="viewport" content="width=device-width, initial-scale=1.0">( K% e5 n$ f6 G
<meta http-equiv="X-UA-Compatible" content="ie=edge">
5 |( N4 o: P; |" } L1 N4 g <title>filter the value</title>9 m, U9 `0 F# z
, k* C5 {% q6 k& @) J+ H
<style>0 j% ~. l3 C/ t2 @" Y+ _8 _3 R8 w
#myInput {
7 N+ I$ H7 ^* _0 T background-image: url('/images/mix/searchicon.png');
& M5 S: ^/ M. V: n+ c9 m$ @( g) z /* 搜索按钮 */
7 \6 o: H+ a% {6 Q, j. P7 ~ background-position: 10px 12px;
6 y* d6 Z8 l- u$ E( U /* 定位搜索按钮 */
, k3 O! k3 Y5 \6 g) D background-repeat: no-repeat;
: k2 V) x3 m1 Y" T- L* D* Z /* 不重复图片*/
q! ?5 {3 k7 d7 M font-size: 16px;
; ?3 F. w0 x0 |: o6 N width: 100%;
3 {6 G1 |8 N" K) ?$ p% [ border: 1px solid #dddddd;+ h3 r: O6 _% r( m* }9 K4 }5 F
padding: 12px 20px 20px 40px;; U; g4 N1 ] ?, Y2 Z. n
margin-bottom: 12px;
( B/ Y% G% j7 H! {& Y6 J }4 T$ {2 r4 d; T: b
, ~5 `8 p5 B+ W# F. h; {5 v #myUL {
4 |& L! I5 Q- Q3 x5 j2 q# n! G list-style-type: none;
, j' v8 l$ q! H$ H! E* h" e% k% j padding: 0px;) z2 `2 `3 X/ X* A% k* V" _$ j
margin: 0px;
. B' s- s( g* m; t& M' `/ l }2 h O7 o' Q6 P/ U8 z
9 c* e; ^/ |3 @" ]% J# \9 `- }
#myUL li a {
) Y! n7 c% ~. w" h1 D' v. D border: 1px solid #ddd;# W# k4 s2 H7 E r+ _5 s
margin-top: -1px;* B4 _7 b+ w% t1 v/ [
background-color: #f6f6f6;
5 E, u( |# w$ F padding: 12px;5 L! w$ V4 s# e' s
text-decoration: none;; M. W) w+ M' ?' @
font-size: 18px;
( F4 V+ w @* y* B. V$ C( v color: black;0 S f8 A" J! _, }4 ?2 u- ^
display: block;0 L' l* w& W Y) e
}
% o6 ^/ V3 |6 j7 @2 ^1 }* b7 j1 Q) y$ |- [+ m. [( J7 `
#myUL li a.header {# R" k" D( E6 K( V1 Q9 L
font-weight: bold;
+ L4 }+ L3 K: ?4 s8 }" r; m1 U5 y/ _ background-color: #e2e2e2;
/ U& A% t2 u4 T8 N0 M cursor: default;
; O+ K+ w3 R+ X. M. F1 Y0 Q }
& T- M5 e2 ]" Z" C3 r3 L$ d" r# h( a9 p
#myUL li a:hover:not(.header) {
9 q$ o0 n& x+ V4 \( c! } background-color: #eee;: P$ U( n* I# P6 K' R
}+ b6 r& ]! _! X% b
</style>
" n; T5 l. z3 y9 ~</head>
& S: d9 b- B! s9 A- a/ Z
5 v& V$ W' B( K. \8 L2 c/ ^" d<body>
& ^* O0 B5 x) E. ^/ ?. r& \* j# x; `; d
<input id="myInput" type="text" placeholder="Search....">; B) e0 Y3 ]- C$ |0 p9 Q
<ul id="myUL">
+ B9 A6 Y) `5 l0 C/ D1 y2 \- Z <li><a href="#" class="header">A</a></li># r. G1 \% e6 p" s1 g& y& n
<li><a href="#">abc</a></li>2 Q$ M1 @" w" A& v7 O
<li><a href="#">abort</a></li>
/ n1 p+ Y3 Y' ?+ s7 G8 T; `0 \ <li><a href="#">abandon</a></li>
4 ?, @, E# k F
3 w7 d* T% ^$ \4 \ <li><a href="#" class="header">B</a></li>
" O/ L j) i$ c5 x) T# R <li><a href="#">baby</a></li>$ }; @; r2 a- ~% l
<li><a href="#">bird</a></li>% W+ F k. X1 X9 U! w
<li><a href="#">bin</a></li>
! H- A; e' g6 A# q$ N0 k
* r5 h& w) l Q <li><a href="#" class="header">C</a></li>" F0 z2 `* w W1 ]: j9 }, M" k% [& V
<li><a href="#">car</a></li>
& G3 R# k H0 i- i <li><a href="#">card</a></li>
. d ^' f# n% h2 f! ]1 O; g <li><a href="#">cavans</a></li>4 j/ s! } B3 R% |3 v
</ul> t8 Y9 X4 X. f3 H3 c1 U
2 T# ^! ^; b. S& Y$ M3 b( T3 t4 F
4 A9 Z9 Z& ^0 n# w6 J <script>
) l( _6 s/ {& Q+ v: {0 L5 y function myFunction() {& G1 V1 h+ O( j8 ^; }3 Z
var input, ul, li, a6 k5 B. c# ~4 x. O& g# s
input = document.getElementById("myInput")
% Y: Z& B9 l9 C ul = document.getElementById("myUL")% K9 c2 @" w: |- a
li = document.getElementsByTagName("li")
- A3 v8 L% l9 k8 `* C var inputvalue = input.value.toUpperCase()- k& X4 M6 s5 v6 h
for (var i = 0; i < li.length; i++) {
! F8 [; v2 ~" @: q a = li.getElementsByTagName("a")[0]3 m+ q: ?3 ?' H- F8 Q6 C: Q, u
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {5 t& x* k+ D! C8 Y6 q; ?
li.style.display = ""
. Y, I6 v5 W1 l$ E7 d }
* P6 p+ v3 ~8 N4 b% `' J else {3 I. U6 f+ y3 Y+ _
li.style.display = "None";
2 L: B& R c0 O+ \3 E }, T' W! k/ \- e+ Y% A$ [
}. v- f! i$ {$ s" h
}
! E3 y; ]& X2 t2 I </script>/ C! w+ s _% U2 r. l* T2 |
</body>/ |# {7 f$ D( V( l p
# I1 y; C! T. S8 |4 J/ q/ y9 C) L</html>[/mw_shl_code]
" Z$ K* N0 ~' S& k0 n |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
