|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
2 [/ j! H6 S, _% f$ O( E- ^JavaScript 搜索框自动提示. j6 Y! `! n$ P! }! r2 ~8 B" x2 o S
# n5 Y4 b6 p# f) ?5 U* l# q, c& K6 W* s
! O5 E! K1 C# b. ^# h p
5 d% k( ~7 ^- H: I+ v3 b[mw_shl_code=html,true]<html lang="en">0 u' l9 L5 c# v9 l" D$ W) h! U
) k! M4 E; g% s7 M0 A. r1 q2 k% l<head>
6 ?2 q1 ~) L) ]& U- X. ?: R/ k) d <meta charset="UTF-8">
0 y+ Q( k+ Y1 f1 n" Q9 k <meta name="viewport" content="width=device-width, initial-scale=1.0">% Q6 G4 v' E6 x6 v0 |& E; g3 Z( Z
<meta http-equiv="X-UA-Compatible" content="ie=edge">3 \ e( r" Q/ L, |2 s! `+ z5 J
<title>filter the value</title>) r: Q/ Q. t# K; ?1 q4 ~
8 A' j4 }* S% x# p8 C3 M) s& D- F
<style>" o# n+ u# a! S! ?, r
#myInput {
6 e2 R' w3 P, v background-image: url('/images/mix/searchicon.png');! w2 I) C/ ]- z" G; P$ D
/* 搜索按钮 */
0 M0 L. F) i5 f! M6 i background-position: 10px 12px;3 C7 D5 l3 P6 c2 H
/* 定位搜索按钮 */* @3 o1 S9 r# q/ g: n
background-repeat: no-repeat;
# s7 f4 F) c2 z; s7 o) v4 t /* 不重复图片*/
7 G+ E/ H" x+ h' A- @; l, c1 M1 u font-size: 16px;
8 C9 ^& u" {. f, ~5 V, v. O width: 100%;# R5 @, b9 ~! c3 N
border: 1px solid #dddddd;6 K2 q7 j/ J( k: {
padding: 12px 20px 20px 40px;
; Y& z. z5 I' e margin-bottom: 12px;! ]! o4 I& h2 O# X
}
+ E# G+ z+ s4 b8 x- _( r \2 P6 x" B, X$ [5 E# H7 X% ]9 S9 _ X
#myUL {
, u$ a; h3 y! U, W1 Z \ list-style-type: none;
8 f# M" j" x' }5 v: N8 j2 S" | padding: 0px;. ]1 U! _9 ]; q& }, U0 ~
margin: 0px;
! C; W% E. n3 ~ }
0 |! a: O8 q* ~2 Q) a- H$ v W8 l1 z6 x( j# y# m( @
#myUL li a {
! Q, F2 d2 ~% m2 n8 H0 w border: 1px solid #ddd;
; b. `/ N% b. q& l0 \/ Z margin-top: -1px;1 G$ G/ i& R. G/ n8 N- a
background-color: #f6f6f6;
5 y" G% N: v, {1 S padding: 12px;
# o# y) L! N/ t) f- a" E text-decoration: none;+ l2 [" U( B9 [6 o/ E0 m- z
font-size: 18px;
$ A+ I% `* e" k# Y$ S# r, z color: black;
4 R5 f+ L% `+ b% b0 H8 x display: block;6 O" V. B' d7 n$ ^
} n g4 Y) x1 L6 x' C& G, v# q
% n4 x `+ z E* I; Z4 M2 b: ^0 S #myUL li a.header {# p8 l Y8 k/ `
font-weight: bold;
9 Y1 |; i; c G6 b. r% N# R0 _ background-color: #e2e2e2; ^0 e2 P' u, q* \) U- k
cursor: default;
# e0 c! A. |0 |) U }% a; ?* v# ~7 j0 I6 x, H; p
9 n) J! _& C+ s8 J! |7 f% K
#myUL li a:hover:not(.header) {+ Z8 X; T- r7 w: r5 s% g
background-color: #eee;
4 i. D' f/ H) J4 H1 k5 u }
6 A: o% B1 z5 F) I) h3 V) V </style>
# j, |7 e/ |- ?8 w7 {</head>5 [5 U$ u$ S4 c; J
$ W4 [' y6 v6 K
<body>
' p! W5 n0 ~, ?3 g* L7 ]/ ?; N
# e' \" H+ u& Q9 T+ b$ e' P <input id="myInput" type="text" placeholder="Search....">
# D' L- o$ E, h K <ul id="myUL">/ o: x# T9 i% P/ P8 w% F- k4 D- x
<li><a href="#" class="header">A</a></li>
; s2 d* K; z) W2 X% N, l' K1 f <li><a href="#">abc</a></li>
9 ?" y3 P! g5 {% m8 M+ c/ ]8 B% I <li><a href="#">abort</a></li>6 u0 m' f& `0 K( [0 J
<li><a href="#">abandon</a></li># G& W% o, z- R6 D
7 G7 k' J/ u* d* _ <li><a href="#" class="header">B</a></li>
/ C) x# r* m% ^0 r4 R g; K <li><a href="#">baby</a></li> v* h+ a/ `3 r9 e; ^: D
<li><a href="#">bird</a></li>
2 v& O( E( `9 ?3 I <li><a href="#">bin</a></li>
8 u# Q" {! l& n
" i7 K: c% y, ~$ [ b$ R <li><a href="#" class="header">C</a></li>" B) W. s$ M4 y$ O& Y: u1 { A
<li><a href="#">car</a></li>6 e0 a7 ~. b& n: F1 j6 n8 \
<li><a href="#">card</a></li>
; |% P3 k6 V- y! U! C <li><a href="#">cavans</a></li>
. v6 p1 r5 h8 W5 d5 p( D; e3 z </ul>
' c) F4 O8 E; G9 v. G, [
# R: k" _" c6 T. h% f0 B G4 [; V6 P1 P% x, h, W0 i8 R
<script>
9 I4 [( ~. o: H, a) W function myFunction() {
1 g: ~" {2 R& Y1 U5 C, y var input, ul, li, a
/ K7 G i- i+ i input = document.getElementById("myInput")
- S; a i% l& O/ W% ^ ul = document.getElementById("myUL")
/ v- W f; k! a! E li = document.getElementsByTagName("li")8 j3 L6 {6 w* Z0 [+ k
var inputvalue = input.value.toUpperCase()7 r) i- n: j1 P7 P2 H7 I* f
for (var i = 0; i < li.length; i++) {
7 t0 k: I4 X: p6 {* D a = li.getElementsByTagName("a")[0]
7 F: ?/ F- R6 {* O4 Y if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
/ m) y8 w7 k8 I li.style.display = ""3 W+ o3 M/ x( L
}
( f6 O0 o: w) ?0 Y else {* m7 }8 u; j9 I
li.style.display = "None";4 A) V8 H2 N! _8 v+ r+ z
}
0 p0 S: B# W% { }
% |# K& I" I# |3 l3 G* K* U7 Z }
6 z* [, x. L1 s4 X </script>
/ n9 v4 w1 k3 \8 j4 S</body>
# Q: ]. ]7 O* p0 h" T3 O. J! \ Q+ L" W. ^
</html>[/mw_shl_code]' s ~- G- g, b
|
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号 )
