|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
" {2 Z. t1 D$ e# q) jJavaScript 搜索框自动提示) m! o+ h8 o2 j7 F. n
" Q5 `5 a0 v) |2 l0 ?- l, e* ^* I9 V
, l. V* x2 ^# U1 S$ w9 u! ]
- t5 @7 p. ^& k
; b% T; e4 F+ l5 V& o
[mw_shl_code=html,true]<html lang="en">* M* W8 U% v8 j# P) w2 D2 J2 B
$ k1 H. e4 K6 y& \% Q<head>
6 W* @4 R1 W: q1 n <meta charset="UTF-8">
+ p7 ~$ L9 q4 v0 x4 A* p/ q <meta name="viewport" content="width=device-width, initial-scale=1.0">
/ \9 U- z3 U* n <meta http-equiv="X-UA-Compatible" content="ie=edge">
! M+ d! s( @$ p <title>filter the value</title>4 P3 L' I" G; h+ i0 F' P
0 W3 T: J2 F# w9 d8 o <style>
$ y0 J" n, B; [0 s8 t; R, o5 n" I #myInput {
8 q* s/ u' r$ Q0 a, g3 \ background-image: url('/images/mix/searchicon.png');
5 |' N) r- G J" i# w) ` /* 搜索按钮 */1 g5 G8 h+ }+ a- M
background-position: 10px 12px;
9 r% s1 i- b! O* K: Q/ ~ /* 定位搜索按钮 */
! A* s4 F& ~3 w7 L; p background-repeat: no-repeat;
" n1 e6 D' }& L4 l6 {" `# o( F /* 不重复图片*/1 N4 m! `1 t+ _3 P$ f5 M/ r
font-size: 16px;
5 x/ M9 B1 `" j) C$ i7 k/ J& d/ ^ width: 100%; Z1 g+ T+ m4 d* b7 M) h
border: 1px solid #dddddd;
+ a/ ^' k7 U8 \ |/ j* j2 z padding: 12px 20px 20px 40px;
" U& g8 u4 Q8 r# M% O9 M' n margin-bottom: 12px;
* ~* V+ z8 m' n! V) O }
; }6 h* V8 }# Z V" ?! W) h5 b6 T; G
#myUL {, N2 H2 {3 c; B* B1 q% z" r, w
list-style-type: none;
( ]" W& d& {6 z7 x padding: 0px;+ c( F8 C, C/ m1 U: V6 E/ P
margin: 0px;# u h4 u9 `9 K r9 f5 k" V3 L
}
- c" Q3 i) s$ z+ I" E7 Y
4 M* D+ P, e) G0 h# \; |/ @ #myUL li a {3 ^5 z0 k. u( m! D# k) `
border: 1px solid #ddd;
0 w7 u' A; N" P3 G1 L+ n. ] margin-top: -1px;; ]8 N' `5 d- S. c0 x" L
background-color: #f6f6f6;
- N! e+ d1 [7 n* x padding: 12px;+ c' W9 ] C* ~1 b4 m$ q* Z, X
text-decoration: none;. w1 W% D: m2 q2 C
font-size: 18px;3 M* y+ U- q, ?8 R X
color: black;
& n, d) ~) M1 C+ L" `8 d, x display: block;3 x, z8 I7 o2 r K. t
}
& D( y# c; r- g% E$ k; A
5 X: e. {$ a$ @0 l; y4 @ #myUL li a.header {
* E) E, Z. I0 k6 } { font-weight: bold;, ?% L+ B; K# V ^/ ?6 A
background-color: #e2e2e2;* v9 c C6 d* a& R) s4 |
cursor: default;
& g' {! r2 A' _ }% G2 n8 W1 p& H ?9 \1 P
1 o# ^# Y* d; ^! I9 e #myUL li a:hover:not(.header) {# C# K5 }4 x$ k' h* K
background-color: #eee;2 d2 y* h2 v* ]1 G: J, K# M+ y
}
. E3 C. C+ \+ h0 W </style>
" w. w) A$ t2 f6 [2 @- z0 B</head>& P6 f. H( |" `- V
t, W. J2 P U( l' F
<body>
8 s- f5 N/ F+ f4 Y3 D
8 E0 Q [( ]$ W( U, ] <input id="myInput" type="text" placeholder="Search....">2 H- ~9 ]! t& Q5 ?6 e2 u
<ul id="myUL">/ X+ M- w# j3 n6 \6 D* H% t; I
<li><a href="#" class="header">A</a></li>
7 D* T1 |% X: h2 K9 |$ U' X <li><a href="#">abc</a></li>
7 L. V% C2 i1 m2 m- ^% m <li><a href="#">abort</a></li>7 q. A9 p1 j4 ~
<li><a href="#">abandon</a></li>
# u# s' S0 S$ e* L, D; v* b/ U
: u" x8 Z# t% B! _. g" W. w4 `1 B1 \ <li><a href="#" class="header">B</a></li>" ]" h# s2 H1 l" c% k" {
<li><a href="#">baby</a></li>* U. {- M' j1 i( u' r
<li><a href="#">bird</a></li>! g+ ]# ^2 ?9 y
<li><a href="#">bin</a></li>
& n) B# ~( y5 Q' M- c
: r* a( e/ L' m N5 g <li><a href="#" class="header">C</a></li>
! ]# ]& J/ k1 v/ z6 m8 c <li><a href="#">car</a></li>
; U; A# e0 i5 |+ u% {" s. v I <li><a href="#">card</a></li>/ U. A9 ? o* ~: E! U0 R l
<li><a href="#">cavans</a></li>
) Q: S W! m, }, l6 w </ul>. H8 b. @3 [ z8 v) ~$ x
9 O/ ]6 d7 v( R' N& [0 M
; D2 b& ~6 {8 y- q2 ^ <script>9 W% A/ Y0 l Z0 q
function myFunction() {/ G0 |4 E+ X/ C; E
var input, ul, li, a
% X6 u' t6 r6 F; h input = document.getElementById("myInput")3 J7 d2 X" A/ D' P$ j& @
ul = document.getElementById("myUL")
7 w5 I' `1 k" P: `0 h) [: C6 u- ? t' s li = document.getElementsByTagName("li"): B. K; j1 _8 L- X( y; g# j- }1 T+ u
var inputvalue = input.value.toUpperCase()
?% z. N. i8 i [, J* T* @) @ for (var i = 0; i < li.length; i++) {9 J8 \7 Y9 B/ Z; P- O" Z i S7 ^
a = li.getElementsByTagName("a")[0]
& B- b% p3 d9 t! z if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
' O2 Y( ?0 B, c# Q3 ?4 g- F li.style.display = ""
( y7 U3 l% f- V, |9 S- O }
6 K1 E) N6 W, g. V* J else {4 p! E3 L8 i- R7 F
li.style.display = "None";
* T( h# T. ~9 J& Y. U' V* Z }
7 ]) Z2 g: B, i# `8 w) i }5 M, w! m- j( g7 O1 z
}" g6 M/ [7 [ x
</script>4 N9 A; D3 X9 e% S' d# ~8 t, {
</body>
- Q; y' D5 s* h
4 G# \: e: T5 \5 t: {</html>[/mw_shl_code]
5 I! _1 P- d* @9 H* K! e |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
