|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
* {6 O' O! Z3 a4 \# v; T+ Q& _; OJavaScript 搜索框自动提示
3 G8 W% |$ }- I) N! d! ^0 I @
' n# J" J# K$ V$ w& d# H% z1 x* d- I3 t! r8 X* N" a; R# ^
: e3 @0 P6 u1 ^ J7 q7 v5 ^: u* e& q1 s6 T8 b" @
[mw_shl_code=html,true]<html lang="en">4 N6 s" O6 f& u6 _$ N, r
* o% x5 Z) g) O: \* ^! z3 p3 d. _<head>
4 ~3 K" \+ Y$ F( p) D) E# m5 i <meta charset="UTF-8">
& v+ C) y) U- w& e <meta name="viewport" content="width=device-width, initial-scale=1.0">
& i* r. `) i7 j- l2 Y/ w6 X( k <meta http-equiv="X-UA-Compatible" content="ie=edge">
% J9 S- _8 a$ h4 e& {, p8 L <title>filter the value</title>
& g! C3 s2 a1 U9 v
$ Z5 ^1 f1 s" U6 c4 K7 _ <style>
3 X, x7 ^: t/ v) x" x: t b #myInput {- p' W) q$ b# [
background-image: url('/images/mix/searchicon.png');% v( T& @ z4 p$ o) h
/* 搜索按钮 */
: m( U/ V! L1 q7 @% S background-position: 10px 12px;8 s. ~* u- @+ x" ~7 n' ^) a7 N( H
/* 定位搜索按钮 */
8 m1 R0 h( s+ ]. r background-repeat: no-repeat;
. P4 X1 o/ |+ U5 } /* 不重复图片*/
9 ~/ l) ?" E' s* B0 m2 l4 f7 w: z+ x font-size: 16px;+ C5 P, x2 F) @0 [- g
width: 100%;! R9 n9 Z( ?+ l0 A7 K3 \
border: 1px solid #dddddd;2 \$ }8 L* Z* U; K! ~1 M
padding: 12px 20px 20px 40px;# A! B6 O5 ^. ^) H$ L! c
margin-bottom: 12px;
8 B3 k9 @; ^5 j+ x }
6 B4 J. G; `( B3 }; f# t% X4 n7 ~ T
#myUL {
# ]6 D9 {; Q6 V! q M* d list-style-type: none;2 K& K/ s. {# |% m6 ^
padding: 0px;: E9 g7 S( m1 {, L8 }7 j
margin: 0px;
) r& a; X+ i* H* P0 B }
$ p/ e$ r: N2 \- J( {) ~9 f- {; G! e1 A( ]
#myUL li a {* |+ ]( U- h& w# b
border: 1px solid #ddd;
- |( D* s+ Y4 `# K: Q+ J margin-top: -1px;
( m6 v$ h: h0 V8 {9 _' v* t- k; z background-color: #f6f6f6;
v+ g# e7 ]/ d; S- v: o padding: 12px;
. J% k! `8 E1 `, \ text-decoration: none;+ |; G# j8 z( z
font-size: 18px;! \3 T3 h6 W+ {5 b: h, o& M
color: black;: g4 J1 r) t1 `) E3 v
display: block;: o9 I( Z5 n V) F, C; y9 r
}# y) I3 w, e' Y% @; W6 F, O
$ ~0 z! B6 z+ t% F2 X' z0 f
#myUL li a.header {5 \* v$ L a* I; V& V+ f
font-weight: bold;8 K2 B) u2 t" \& J2 p, i5 y h
background-color: #e2e2e2;
% k& y+ \ \/ k" }* ?' B! f. r cursor: default;
/ u1 J9 ]9 d5 v- i6 s/ z9 q. k# G }
, l: O# Z: i" [9 j/ b3 S! a9 h) i/ A8 {1 p9 Z" M
#myUL li a:hover:not(.header) {
: Y' U4 {! b/ U2 u5 q* y background-color: #eee;
% [ g: n' W3 t4 J. z }
! G5 q; C4 g# ^# k </style>
8 R6 r9 l- K$ O5 I</head>* z0 M. t* f( x* V! e L+ h8 ^
) u( C9 ^+ X* t6 p" e) f3 c! B<body>4 r% p/ @/ \. F* u4 j A
8 w+ g# W" N" K) P' H6 ] <input id="myInput" type="text" placeholder="Search....">
" K% p" _' @8 R' L6 n; n& M <ul id="myUL">
/ F% m* v8 f& O( z <li><a href="#" class="header">A</a></li>
, l( s- V; m! R* z$ ~+ d# q <li><a href="#">abc</a></li>% x" P: {( K1 y" J- S0 w
<li><a href="#">abort</a></li>8 k; I7 N4 P4 s6 _4 w
<li><a href="#">abandon</a></li>
$ m. c7 {# I8 U. x; |* I! C5 j( }0 K2 {/ Q
<li><a href="#" class="header">B</a></li>- b& ?( X; r; @6 i# k* N! `1 I
<li><a href="#">baby</a></li>+ J2 i8 X5 Q% v. m" h/ Q
<li><a href="#">bird</a></li>( f e- F! l$ Y0 I( b) v2 N
<li><a href="#">bin</a></li>
* R ~ u( f* K8 K* M" ^1 `4 o4 I/ s9 i
<li><a href="#" class="header">C</a></li>
( P! a! S$ B, r/ Q <li><a href="#">car</a></li>
0 X' u% G/ f5 b' u% R% Z <li><a href="#">card</a></li>0 l0 }! @/ ~( d# _' _2 d; `, g/ G
<li><a href="#">cavans</a></li>
" A6 l( P) Y- Q+ d6 d' g9 E </ul>6 [: N5 E9 W% y F
$ A3 H2 k2 t2 _2 B# ]: l) E4 t/ `. ^
<script>
2 W' K- ~4 G" c5 ?3 \, w function myFunction() {
5 d# S$ @5 h( ]) S0 d( i7 n var input, ul, li, a
0 N% i. J# J! ?% B input = document.getElementById("myInput")2 n" j+ M- r6 C
ul = document.getElementById("myUL")$ y4 m8 A! d+ s5 _+ P
li = document.getElementsByTagName("li")9 c! F4 L' l! z% S
var inputvalue = input.value.toUpperCase(): S( C T5 q3 u! N5 D& Z/ N2 y$ U
for (var i = 0; i < li.length; i++) {0 S# t$ H5 ?0 L2 \% K* _
a = li.getElementsByTagName("a")[0]
* W% t9 f6 p# d" ?: z: d% o if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
; o/ T6 o- _ Q* [ z" ~# w li.style.display = ""
8 x% k! j8 l( w& L7 G6 ] }
7 k" Y( D: G4 R6 i$ t7 _( a! b else {
& ]: a3 Q6 [$ P+ X( m( x: K9 u li.style.display = "None";
7 Y! D* ^( w/ _$ o }% B3 s% G- P. O$ l: L2 u5 v- i( V
}
; s% N- ~1 r/ P7 ?/ ?% g0 N4 F }/ Q1 p/ M% H/ z8 g/ a
</script>3 ` r, ^9 t* ^. \% G$ a7 G
</body>7 g3 R- ]* p2 k3 c1 u$ F$ U
; m# R% c* {9 J) S
</html>[/mw_shl_code]6 x! O, E! D( f- A7 \ l8 y. u m
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
