|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
& T9 h# X4 |+ E/ Y, RJavaScript 搜索框自动提示
$ p( c; d X$ ?9 Q2 z H
+ s V6 }2 a- d g5 r$ _9 F# `8 J( i" m* u- R1 C
- \& q3 Y q+ o5 r
. ^$ q4 y5 x: L[mw_shl_code=html,true]<html lang="en">7 |: f6 P$ S% {
Y; B9 Z2 N, B' y9 h
<head>" D. S9 H! |6 k$ g/ J" S* C
<meta charset="UTF-8">
: y' F1 u. Y' m+ C4 b D& t <meta name="viewport" content="width=device-width, initial-scale=1.0">
# C. J% Y0 E1 X" A <meta http-equiv="X-UA-Compatible" content="ie=edge">7 Y; E8 b3 H) O
<title>filter the value</title>! I- @7 B7 O4 C% O% M) X
7 N1 c5 W! K: c% z, C" ^, R9 T <style>+ P) t5 _- T, I; d
#myInput {
/ v5 J7 D. ~5 o+ @! U: V background-image: url('/images/mix/searchicon.png');
! C6 b' z. u+ B" d7 u2 c /* 搜索按钮 */: j# [; P r1 t5 ^+ d
background-position: 10px 12px;
% ~; w8 c, o' R$ |$ O% E" e; w /* 定位搜索按钮 */
5 W9 X: ]; d6 y1 ? background-repeat: no-repeat;
! W6 J' j! ?0 I$ C0 P5 Z /* 不重复图片*/# m+ ?0 t1 P# N R4 H$ x
font-size: 16px;7 ?) J, J7 D4 w4 I9 ?( g
width: 100%;
/ ~! k$ N1 @: [4 i' K3 f border: 1px solid #dddddd;3 i( e8 Y; x9 v& U
padding: 12px 20px 20px 40px;
V: J3 e4 B$ k4 F2 I margin-bottom: 12px;
1 B" ^$ s8 \; v9 o; N2 Z }
% W- g* q+ p: y$ p6 F
" _) I/ D' U% I #myUL {6 h4 v+ O1 C0 p* J O! S
list-style-type: none;/ V7 v- D7 |/ J G0 L, `
padding: 0px;! N( M* D+ V- `. Z& u
margin: 0px;
: z0 T; l3 v* s1 V2 H- K0 c" H }
9 g+ v" s/ [7 h0 c* m& z) x: |$ Q2 ? I: r% F
#myUL li a {
& }; u- N6 `! |3 ]. m3 ]* u border: 1px solid #ddd;
$ U& [; }/ L& m7 Z margin-top: -1px;
: P/ J1 ]# `* J8 Y background-color: #f6f6f6;- a& ~2 }* G7 p0 x) K( M
padding: 12px;
7 K& T4 u8 x. j1 g" C1 r- b- Y, f text-decoration: none;. I6 G% s! N, z1 D8 c# m0 Y; M
font-size: 18px;% o, p" [1 X& h0 B
color: black;
4 a# `$ O9 U0 }4 b5 g" D display: block;
+ {: z k& V# y, E' h) w: W: D" [+ b" k }
+ Z+ \" Z5 F) U P( J5 m/ A! u# X) k& ]9 z
6 f1 O8 ]' @- T+ d: D #myUL li a.header {+ B- E+ `% _0 B
font-weight: bold;
( l4 ~- i( |6 w( z6 [$ d! R background-color: #e2e2e2;, p/ f# e* r5 [" A) O6 I+ g
cursor: default;
9 w5 b S4 _9 B8 }2 i! r" M5 P }7 R% N6 S, Q- {$ K* V8 \4 ]( R% c
& c7 L; q' D) ~ #myUL li a:hover:not(.header) {- z) U L0 ^3 e6 F& O# @8 h. e0 ]
background-color: #eee;+ \6 d# L/ q8 p P
}
0 [; ^$ o" ?& t3 t$ r8 [ </style>
, e2 B( x3 X3 y/ R1 B</head>
q8 f: ?1 `2 ~& P
* V/ P2 V* D5 G8 Z. k<body> V! q. N7 Q) \/ d
" {& j* c8 V; N9 ~. c( {; P3 S, G+ T
<input id="myInput" type="text" placeholder="Search....">
6 ]) L# G- t) G I! S7 V <ul id="myUL">8 ^: d/ M3 x0 G* e5 f# S
<li><a href="#" class="header">A</a></li>
2 h9 l9 c6 d2 K% S7 Q. T <li><a href="#">abc</a></li>
+ {) T& v& d2 G2 c) \ ? <li><a href="#">abort</a></li>' b* G: q/ h! S7 }7 A7 F4 V# S! S
<li><a href="#">abandon</a></li>
1 Z! Q, a) U; x' C3 I, s- y. B( U+ ?- S9 t" _1 A* D/ k. D
<li><a href="#" class="header">B</a></li>
; F1 A' z D! R) x! m% g+ u9 p( k <li><a href="#">baby</a></li>" w$ G) u( s* q* L5 s1 m, y
<li><a href="#">bird</a></li> `* I. n. V" [* s/ q4 q
<li><a href="#">bin</a></li>0 f6 P# Y& @1 V6 i- ~/ D! Z
0 u9 J( {# R; ?6 }- r8 ~. t <li><a href="#" class="header">C</a></li>: n/ H' m$ }, j8 @# Q4 ]
<li><a href="#">car</a></li>- y6 D$ i8 o" |6 T( u& Y1 D
<li><a href="#">card</a></li>) I% d* L0 y5 S7 z" k
<li><a href="#">cavans</a></li>
. b9 Q7 g6 z0 w7 ^) C. {+ U </ul>
4 L4 {1 g( T2 {/ q G( p5 [
; J5 |" D/ [. Z% a5 q' E0 z g8 x9 u+ p
<script>' _! i+ V* M5 E; V% q" ^
function myFunction() {" {; B V6 v" l+ t( F' \: ]9 J$ g, D
var input, ul, li, a- h, N8 |( l; g2 C, I: R
input = document.getElementById("myInput")2 A4 c8 `0 y& S3 e/ F% u
ul = document.getElementById("myUL")! [+ k3 q' u3 ^! }
li = document.getElementsByTagName("li")
" l# _9 O# w: k! A. I+ j; n var inputvalue = input.value.toUpperCase()8 l& l" K" w0 _3 I: a% s6 `
for (var i = 0; i < li.length; i++) {
6 p' b$ ^5 w5 ]1 F6 o" {0 I a = li.getElementsByTagName("a")[0]0 I5 X% f6 u$ T. f7 U+ V8 B5 l4 \
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {2 N* U0 O3 P( L @
li.style.display = ""
# @4 Z# g* A+ ?7 Q }
/ w, r3 F$ m( b. v. v2 n" g ] else {
' u6 S% t9 B1 x li.style.display = "None";* ~! e8 T1 D8 R0 w! y
}
8 P1 d) p; \) q }
; z/ A3 U' ], H* d }
$ q2 i- k2 i0 v* B </script>+ `( ` P, d3 L# M: e
</body>
, i" q, g6 s, r* [) W: z8 E! r
0 i. l& }* b1 g( Y% x</html>[/mw_shl_code]
2 {& s/ H6 n2 N! a4 |$ ~" U |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
