|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
: F+ b) z& e- _) \
JavaScript 搜索框自动提示* i9 {9 q+ @" B* D3 \( o9 U
' q$ N3 a: E `5 P o2 V) U$ s
2 d! T5 D% V, x, ~& T: `& @3 o1 W8 r8 V, o' t/ o* `9 I' \7 q) _( X
& G; Q3 N! V% \& d( t7 ?[mw_shl_code=html,true]<html lang="en">
9 x5 y d% [7 _3 \$ U
) G1 V' q \" r. X# t9 Z<head>- _: z$ G6 v: P. e x( j# h
<meta charset="UTF-8">9 J$ o) V* `# {& B
<meta name="viewport" content="width=device-width, initial-scale=1.0">* ^& T* f3 B% |' F8 v' k1 V" R$ G
<meta http-equiv="X-UA-Compatible" content="ie=edge">
( [- L0 w0 H; v u; W <title>filter the value</title>( P2 }& q4 F) W% O, H: m
- S# k0 Y; T2 \$ r! ~4 ^' D
<style>
D) j2 M( W2 z/ L. c/ R #myInput {
. x* b4 n5 l9 G5 K/ Q background-image: url('/images/mix/searchicon.png');
! V4 Z5 }+ K; r4 O /* 搜索按钮 */' u) `' b3 T# i5 P# o
background-position: 10px 12px;
) M/ s! B' r4 h+ Q+ L, x* v7 _, c, x /* 定位搜索按钮 */1 [* i2 @1 _' F T
background-repeat: no-repeat;/ L9 q% [5 Z U$ N3 L& E2 V
/* 不重复图片*/
1 d' O6 M. ]0 h8 B font-size: 16px;
7 A! I/ k5 F- e& u3 f Q7 @ width: 100%;
+ z1 S3 N8 P8 x7 W7 Y+ x8 W border: 1px solid #dddddd;& R1 V8 [* \# _9 Q E. K* j6 A% _* F
padding: 12px 20px 20px 40px;, T+ v- e. F2 K6 n, B
margin-bottom: 12px;
/ O: O" y$ D, N8 y8 x5 ~ }
+ ~% M7 A5 _8 Y- p- y! L+ {
: v. T: ^* ^5 R8 b: v/ c6 @ #myUL {3 k! d3 j' E+ C% g
list-style-type: none;
" i" x6 q6 U+ ]) r" m padding: 0px;
2 G; A- h/ Y. j/ |5 y margin: 0px;
1 [ u- p+ a) p( h. C }
9 g7 k* X3 ~5 h L% b9 Y" u) j4 `% D" [/ B2 r# y
#myUL li a {
3 W9 v) f+ W) p6 w$ y B+ H. K5 E border: 1px solid #ddd;( z8 |" C% U+ A5 ]' h) o
margin-top: -1px;3 d( ?% [6 S9 t( u# l
background-color: #f6f6f6;/ o( h @+ m/ D- l
padding: 12px;: i( e, v6 b9 U/ V9 U# W6 C
text-decoration: none;7 ?; M8 e5 p: T- R( x3 {: o: P
font-size: 18px;
p3 T h7 X% x1 c7 t9 e, E. h9 g color: black;
# p0 T8 k* k% e) i- I9 H. [ display: block; i2 Z3 J6 N2 R8 o* T# N" T
}
& i: }* G! s4 M, Q& t1 J4 A, N- y9 M
#myUL li a.header {6 k" ]# ^) B H0 o5 \0 {
font-weight: bold; ~' M6 Y/ J3 N" T7 P% O
background-color: #e2e2e2;
, o4 }# V8 m# v/ \5 L- q, } cursor: default;8 Z( M( O$ `. {. z/ q
}
7 v Z; [ e. E& @+ x4 ?
8 @, D& V7 @$ t( D #myUL li a:hover:not(.header) {
$ R" R ^4 Q5 E% M) \% m* X background-color: #eee;& A1 v( T+ j/ K4 p8 E" C$ o' N' Z
}, _4 {' C6 z* ~* ` s, @6 ]3 y
</style># f* b n/ A/ K. ~. R" ~
</head>% Q8 L( n" K$ P$ B4 Z; a. t
) x+ O/ l$ @8 W" f<body>
P4 T' @( O0 j5 E
/ l$ Q5 @+ b% y. P! w& [" H <input id="myInput" type="text" placeholder="Search....">
: o. I8 y1 k* o* i/ J- n6 d- z <ul id="myUL"># C7 e8 ]1 z5 x% B6 Q- G
<li><a href="#" class="header">A</a></li>2 k2 ~& `# x8 }0 j. u
<li><a href="#">abc</a></li>. z% a$ Y/ g' B& i1 L2 n; n
<li><a href="#">abort</a></li>% [3 Y! Z9 [/ \; j' Z& m1 k% R# |
<li><a href="#">abandon</a></li>
9 o" ~& V& J: O4 U- W' G- l4 ]6 J3 g# p6 Q0 H9 g2 N; _
<li><a href="#" class="header">B</a></li>
+ }) r# x+ K/ J& Q, w( a* C6 \5 \ <li><a href="#">baby</a></li>5 k& D5 H G4 V+ }4 {
<li><a href="#">bird</a></li>
/ t' S- L$ [* D0 D0 T <li><a href="#">bin</a></li>9 [# w; u! X% B+ J: H; o7 S
' f( `* z$ Y: V; f) }
<li><a href="#" class="header">C</a></li>
7 O5 O$ S R$ q5 x <li><a href="#">car</a></li>
6 p9 y1 ` g- X) ?% D" _$ ~ <li><a href="#">card</a></li># U/ m2 q' ?+ ]" K& r9 P
<li><a href="#">cavans</a></li>: }, y3 A) W4 W. d4 X& c
</ul>" |& ~7 _) m( t" i
; Z' a, z2 i' [% |* d B" O
5 p! S! Q* O4 N% A. q6 F <script>; Z x: E6 l+ G+ C p3 o
function myFunction() {) o, p3 _2 w8 x5 G! ]5 F# l
var input, ul, li, a+ t& h8 z( M6 }1 ~+ p+ r4 @
input = document.getElementById("myInput")7 w+ ]; N$ P: K U- B$ ]
ul = document.getElementById("myUL")
* ]& X- \3 e0 L9 R li = document.getElementsByTagName("li")! `8 R7 P2 V% ~% e% j
var inputvalue = input.value.toUpperCase()5 d, c1 @( S% d
for (var i = 0; i < li.length; i++) {: r' q# C% q, y
a = li.getElementsByTagName("a")[0]
9 E/ g( ~( k0 D* q* ^( a% P if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {9 V: o, I p7 k- [" U4 o
li.style.display = ""3 d0 P# y- C6 }# t. w6 O
}: V" d8 v1 u* I% Y5 }# t& i) s& W
else {) x( e/ G; g) J
li.style.display = "None";
. [( z- Y" n' }* F; z }
" c. x& n0 }! O/ t }
8 v8 `" Q3 I9 I" O6 f# t$ f }, V v" m) y( A9 q: F) m5 H1 x
</script>
% A4 t# _) h/ o: C( {; A</body>) a, \7 n+ I8 c' a) O' ? B
" ]1 P1 ]; r: E, J) E' A4 i- I' y
</html>[/mw_shl_code] A% O3 W, S; s! Q# ^8 v- D( V
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
