|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
- R6 |7 J1 b8 T, V6 F! WJavaScript 搜索框自动提示* w9 \! V# y" T4 j! w
, P4 ^4 @- y6 \7 K* M$ `9 t1 l5 I/ r1 E& Q; V
( e/ X' p& u) l4 F
6 s g& G+ w4 ][mw_shl_code=html,true]<html lang="en">
" ^9 g, S) y: m1 s. r) L) Q. H z; S0 I0 |8 N7 H& S
<head>
$ k+ k) D/ h- Z H* J5 s( P- n' a <meta charset="UTF-8">
8 O% D* B& }/ B5 M1 D7 n/ i <meta name="viewport" content="width=device-width, initial-scale=1.0">
& e. U% ]9 q3 B. r: {& a <meta http-equiv="X-UA-Compatible" content="ie=edge">6 e8 U: X/ `2 l: i5 r
<title>filter the value</title>
. Y% o- Z5 t# w# |
/ M! T1 x/ ]9 U; o2 V9 f- S <style>5 L% f, ]( T, ]
#myInput {
+ `$ c6 ~2 W5 O) K background-image: url('/images/mix/searchicon.png');* i: ^9 f9 U, R6 r6 Q
/* 搜索按钮 */
5 d x! L$ L- e; U# n' E background-position: 10px 12px;; p3 s' _. x) Q. c4 { D
/* 定位搜索按钮 */5 E6 J+ _- t& g# z v1 T
background-repeat: no-repeat;
% V& m7 s4 Q, J2 o! H1 G+ Q& A: d /* 不重复图片*/
! f( y4 i0 [: J, s1 m) P font-size: 16px;
4 n- w" Z. M6 ?4 @& b width: 100%;
$ S" I9 q/ R T" _1 w5 m8 A border: 1px solid #dddddd;8 ?, c8 ?; q8 {: K" @
padding: 12px 20px 20px 40px;
6 K. d6 e+ O+ O; J5 v margin-bottom: 12px;( F' P, t& \5 I; s8 w
}
7 t$ W) i5 J) `; ^0 [+ g+ g( I: U- A' }% k2 e
#myUL {& `* m* A- \, Z4 j' Z
list-style-type: none;
3 C# r+ I. Z" p$ b% P padding: 0px;& e W( [, {0 D* |) J: k! A6 }
margin: 0px;4 }( r1 X- W) z# f
}) m1 ]% ]5 j! N0 a$ y; P
8 O& \6 c9 [9 y8 O9 a
#myUL li a {
2 b# d* Y, I4 b5 x border: 1px solid #ddd;# n! Z/ f, i9 d& S4 l8 Q1 R$ H
margin-top: -1px;0 J r( j& Z* d+ P
background-color: #f6f6f6;; x/ y0 V1 Z) S
padding: 12px;
. } o: `% T3 Q. o text-decoration: none;+ b9 W1 q c$ u2 S2 A9 ~+ U
font-size: 18px;$ n" ~" r9 o5 `/ @# \
color: black;
) D+ [% `# G1 ` display: block;2 p! P3 h5 S) o A9 g" P
}
% J+ r/ W2 l; _- K
7 y1 z" y$ ]) b- y+ U* f- d2 f- n #myUL li a.header {
% w, N( }: G% r1 G" Q: |9 k/ f T& } font-weight: bold;
0 t t* N' j9 ` background-color: #e2e2e2;
' r* q c2 `0 R" r8 l8 s cursor: default;/ N5 a! a! {8 K' ~
}
' b, o0 F0 c( [2 h
1 \. g% U1 q, {1 y! g! g1 G #myUL li a:hover:not(.header) {
) p/ }; n- a5 o4 y; V; z background-color: #eee;- u }( g2 V& w( S! f. E
}
) K+ e" P7 E/ T9 s8 C# P6 i </style>
! b$ Y3 o5 e' K, F$ Y' N6 j</head>
* [5 i T @2 |8 R! M% A2 j) w- m1 s6 W% s
<body>
1 g: L9 A3 W0 Q2 L( j' X; Y' W2 {0 ?5 E3 r6 E
<input id="myInput" type="text" placeholder="Search....">
; k2 {- U2 ?& e7 d4 v# S3 Y! U4 c <ul id="myUL">5 }- |; M) R# N3 R6 Q% i
<li><a href="#" class="header">A</a></li># f$ m2 {9 V+ y b( e% F. H
<li><a href="#">abc</a></li>. T7 W0 K1 k0 _
<li><a href="#">abort</a></li>
* {, d9 |% z& T4 i3 ]- l( [ <li><a href="#">abandon</a></li>; A3 c7 f5 @3 q* i+ x u
$ L6 f3 K9 D# U/ m+ s k' j
<li><a href="#" class="header">B</a></li>; E' K. }5 x! z! D
<li><a href="#">baby</a></li>
3 k* x/ r3 C5 \ <li><a href="#">bird</a></li>
; |( Z+ X1 V7 ~3 F1 e5 A8 n <li><a href="#">bin</a></li>
, u/ ]5 L) C6 G% u
5 ~- g% |6 a. g <li><a href="#" class="header">C</a></li>. m1 ~0 \1 n' Z
<li><a href="#">car</a></li>4 l$ |( \# G: p5 N
<li><a href="#">card</a></li>1 }- ?: X- b* |# H3 e' U% i
<li><a href="#">cavans</a></li>
$ q, _& K; f7 K0 V </ul>) T# U: o* P7 d6 K) e; k
; Y3 N W% C8 a2 x" L+ k& B9 |1 @
$ n& B. N7 p" ^) Y, J+ q) ^ <script>$ _# d1 x+ E! M2 n
function myFunction() {
6 K7 n2 Q3 R* M+ U) G var input, ul, li, a( Q' d# M+ V/ Q2 c7 o' g
input = document.getElementById("myInput")
' }$ ]5 O8 V. ~3 [8 m' F ul = document.getElementById("myUL")
" d& V! f: [9 N& H1 e. ~$ ?7 Q1 G li = document.getElementsByTagName("li")8 s+ p3 m, T$ d" z
var inputvalue = input.value.toUpperCase()
* b0 D Q# ]( ~2 F: O* h for (var i = 0; i < li.length; i++) {
L* s. D6 b* T# u3 {6 s a = li.getElementsByTagName("a")[0]1 C# F6 D- K: ]% W! v
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
{* y% D! ^& g0 {3 q li.style.display = ""( Y1 _( P0 {3 Z+ q& h
}8 R2 S8 z, h4 x! f3 B4 [3 e
else {
$ g6 u9 l4 c& {" |/ ^' m li.style.display = "None";
) g! c% w0 U# } }
+ g/ f% W2 r. Z* s( @ }, ^9 A8 w- r6 |+ R/ M
}
' o- L v# C. R* e8 C/ E2 ` </script>
$ B3 d, k- S! D+ m7 ^0 w: \2 a</body>$ ~0 L/ r% f$ H; C# m5 `
4 Z; C7 p4 ]4 J5 X1 n. B
</html>[/mw_shl_code]
+ r& ]6 G5 o+ c5 T |
|
|小黑屋|手机版|PLM之家-企业数字化转型工业软件学习平台
