|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
8 _4 c; ^" N# [/ n3 E3 x- I" p
JavaScript 搜索框自动提示
8 ]( Z) m! V, d4 [. J6 `
U3 ^+ {* Q& U# g
1 i7 o# G3 C. ]! C5 U; ` {* h2 l8 s; { j
- }8 i( g& i6 S+ T9 ^8 O
[mw_shl_code=html,true]<html lang="en">
$ }" y8 F; {4 Q0 Q# `0 I, n3 _
8 }5 N. }+ m% s<head>7 w7 j0 Y9 ~! T- _$ {8 I6 d+ a6 R% K
<meta charset="UTF-8">
" s/ Z2 L( W o% |# { <meta name="viewport" content="width=device-width, initial-scale=1.0">8 L& B8 w4 z: Q: Z; R: L. Q) k2 l
<meta http-equiv="X-UA-Compatible" content="ie=edge">
& J: m. R' Y) c9 c7 p <title>filter the value</title>
7 Z* S( l9 Q( F% o3 O, l% U" G* z' Q# N1 ]) d x: P9 K
<style>
; t5 @) \+ i n, s" [4 A #myInput {0 ?0 V$ h9 Q; U9 O& ]$ b( O4 A
background-image: url('/images/mix/searchicon.png');9 Y" V% n5 Y% ~2 F4 J3 ?0 B, U
/* 搜索按钮 */% d/ e) s- x: k$ H
background-position: 10px 12px;
5 y3 m8 M# j& ~9 _/ [7 ^4 { /* 定位搜索按钮 */
" }% n- _0 k( F( t; d background-repeat: no-repeat;
; q" `4 [0 j! j8 y /* 不重复图片*/
/ V% D8 G6 f! B3 } font-size: 16px;
) t/ T0 w9 O: } width: 100%;
) s2 N8 I/ K2 ^) K& r border: 1px solid #dddddd;. B3 N$ G2 D f H3 I
padding: 12px 20px 20px 40px;
7 e- y' }7 t, j8 w$ N9 t1 q margin-bottom: 12px;2 a1 D7 l6 V$ r" p0 F
}
7 H( W4 i" v* l9 W+ d& s' S9 ]) g0 K `5 `$ d
#myUL { F6 z* d# B. w# L# F3 k
list-style-type: none;
1 T+ x" X2 E [: m padding: 0px;
6 K9 D- g6 R/ p margin: 0px;
( v i% \# m8 w0 g. G }, c# ^/ Y$ Q5 {: k
) G- J8 ]% p0 Z2 {' H: ^2 { #myUL li a {% D: z/ t! J$ d) \% k8 B# n
border: 1px solid #ddd;$ o: F& ^; d8 o, x2 F& {4 [) S
margin-top: -1px;
; `/ y0 k7 I) s. c- m background-color: #f6f6f6;# X& p k; Q* _, v
padding: 12px;0 F# L( l; {) H: S+ C/ ~
text-decoration: none;
( b+ m& a# H& x. M, {8 m font-size: 18px;( M8 N7 N# A) X; y1 m) p
color: black;- V& b+ O+ q) p' l
display: block;0 c' i' `; V3 S5 @% {# x
}: D- E/ i7 X! n1 W3 @
" v: K. F# z3 E7 B; ~, W% Q9 m
#myUL li a.header {/ O' D5 |! R: |' `( n2 W0 @& [: H
font-weight: bold;, n7 h' w$ }( S
background-color: #e2e2e2;& G! H1 j9 q" l' x7 S p% o, e* ?. w
cursor: default;
3 G; t7 q, C! U8 z }
4 S! @: y3 h/ u+ `9 V# ?- G; U3 M5 U0 J
#myUL li a:hover:not(.header) {
1 ^- h- A2 W3 e$ Z' q }/ I background-color: #eee;
: { p; `5 j, G. I) U) d* B }
/ i2 s) k' ]" h R! j </style>
( f0 R' H) e% q- H: d9 @</head>+ H( R. @+ e- a% {6 B
) N' \% D$ Z8 I- j* v& C% ?
<body>, h& |7 _* Z2 r5 \2 y6 d
+ g I( q5 O8 t5 j1 `4 w
<input id="myInput" type="text" placeholder="Search....">
y4 z9 g* X& Y* P3 |) M <ul id="myUL">
& n" J: N3 W ^1 }2 R <li><a href="#" class="header">A</a></li>9 v8 C' I2 e, E2 {# h4 B- f; D
<li><a href="#">abc</a></li>
3 B0 V- L0 F& g% ] <li><a href="#">abort</a></li>& p4 g. t0 Z8 G% c- k6 H! O0 J
<li><a href="#">abandon</a></li>' \+ ?5 ?- e2 k, G. h* [$ h
: [9 F& t, G" \4 c7 R <li><a href="#" class="header">B</a></li>
7 j4 _$ D1 V0 k4 @/ q6 O <li><a href="#">baby</a></li>! b% f( \0 c# N
<li><a href="#">bird</a></li>7 P- x1 j7 Y3 q5 v) j4 h; {
<li><a href="#">bin</a></li>
Z8 N3 V$ n! e4 r0 t7 ^; ^2 u- I E, @) M, i
<li><a href="#" class="header">C</a></li>& o$ p0 m& O) u0 Y+ K$ K D
<li><a href="#">car</a></li>
0 \6 p% J) r4 m% E <li><a href="#">card</a></li>0 j8 k" E5 ~6 I; O; r1 h/ G! z0 r
<li><a href="#">cavans</a></li>
" \' I- L' x7 z7 a </ul>
; \# @5 a( B# Y2 ]. K/ f* s+ k! f2 ]4 ~
e6 M3 V8 K: R( A <script>
. ^1 O$ D; S0 m- r- {2 w. ? function myFunction() {
+ Q& z) j2 N$ b+ K* \/ H* F# a7 P var input, ul, li, a
+ q1 h" i3 u. B& Z. S input = document.getElementById("myInput")# ]/ ^: j! R$ v* j, X
ul = document.getElementById("myUL")
- i: g; y0 H9 L4 ?* m1 ^6 I4 q li = document.getElementsByTagName("li")
# h1 D* _# b! @% l var inputvalue = input.value.toUpperCase()
9 K" C( h. I) B8 K for (var i = 0; i < li.length; i++) {
3 ~: Q2 @3 |. @% u% ^/ {1 g a = li.getElementsByTagName("a")[0]
( } C8 o0 ]: i2 _" r5 }+ \ if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
- w% R+ ^4 c+ `, k v1 W: ` li.style.display = ""2 D4 ~3 E8 S0 Q2 |% x3 D, Y+ a" j
}
* f m3 V, M, e( Z% r$ h; E+ i else {
4 v2 |' ?! O A- ~ k% o: e li.style.display = "None";
: z3 [2 o1 M: N0 x }
% D5 z' Y8 t5 y }- d4 b; n: m* ?8 [4 i0 x N
}4 J, R3 A1 j, Z5 D" ]
</script>
% L# V- U2 O5 \( |' l" Z* J6 t! `</body>; W: O' B$ ^- ~0 `
0 V5 N6 l% \) D- J: u' K$ L6 d# y</html>[/mw_shl_code] R/ y0 e- D2 }1 s7 b8 ?7 ]# k
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
