|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
2 B! Q3 w% j$ H0 S5 ~' X: c0 {( t5 W
JavaScript 搜索框自动提示2 E8 }1 G! z6 ^* N" [
6 K* M( H, I7 @# A3 G+ U7 c6 D
! D6 U9 K; t" O2 p9 d7 R& a6 k; w( |- s! y' o
& G$ t3 m8 i' _
[mw_shl_code=html,true]<html lang="en">
* q0 E8 }2 q- S" U" J0 ]2 O1 z9 p; Y, K, v! O& b: T7 O0 D
<head>0 J6 }! g' C, @# h3 h9 t
<meta charset="UTF-8">
; F- B6 I# K. ^3 m5 T <meta name="viewport" content="width=device-width, initial-scale=1.0">
) e# y" }$ R3 j6 X <meta http-equiv="X-UA-Compatible" content="ie=edge">
; _- |+ g9 h' H <title>filter the value</title>
& j: s+ ?7 ~; p* G/ b; H7 _8 Y) i! X6 R" n3 z/ f
<style>
% Z7 Q( f/ ?" m! t #myInput {, O% P1 a) Y6 a' b+ V
background-image: url('/images/mix/searchicon.png');
% L6 B8 r- L. @( n$ r /* 搜索按钮 */
6 y j) w1 \+ }# _& X& ^; S background-position: 10px 12px;# L m, l8 g3 ~0 [' b
/* 定位搜索按钮 */ p: e! v! }. e4 Z! _1 S
background-repeat: no-repeat;+ t _( M5 g9 ^# r! P5 p
/* 不重复图片*/
1 p" f1 @; h& H+ G) O font-size: 16px;
c( ~# M+ Y: c x W0 e8 _ width: 100%;/ S# `; c0 z8 @# B0 T+ t& s* Q4 A
border: 1px solid #dddddd;
8 V1 l4 D) @: \. \5 W% X, V9 Q padding: 12px 20px 20px 40px;
- F" R) s- R4 g margin-bottom: 12px;; J6 Q( [/ N& J |
} T _% s9 A2 K* O4 u. Z9 N
. W+ c3 I; a) X# u #myUL {
$ X* y# ^' c- R) U" ~' { list-style-type: none;
p6 h; k3 s" ?7 Y( N padding: 0px;
4 |; J5 D. y F+ @: I* M9 q margin: 0px;* L3 T/ o1 Z) {0 S( f) X
}
5 i1 a6 }: R. k& a; h/ c: ^4 v- q/ h: ^1 F
#myUL li a {: }8 N1 n! x4 i6 Z% c
border: 1px solid #ddd;: B4 K, h0 R/ r O$ }! o
margin-top: -1px;
3 O6 d) j: b7 e' E8 S" c, i background-color: #f6f6f6; D/ _9 d& q% ]" H0 _
padding: 12px;' T6 S7 ?/ B0 n% D& ?
text-decoration: none;
1 k' |# X/ {8 R: o& P% G+ i font-size: 18px;
* l; C/ y* K4 Y: F color: black; i7 P/ D1 B; r6 B1 P+ m; J4 u
display: block;
6 l& y' O( h. X, F3 T( [( [4 u8 ~- a' v }/ j: T' v& e' |# }% ~
9 i5 i. s7 {1 M3 a# | #myUL li a.header {
% f0 R( v- M; @# e& D" c2 w font-weight: bold;
1 Z9 L3 t* v" n ^7 [2 g background-color: #e2e2e2;( b, ?5 Y9 t" ?! d
cursor: default;7 L a$ n9 Y8 f' i1 A
}
# ^5 x7 u2 D% m' U' t4 P7 e. s
- G8 O6 c* c3 h4 r8 ` #myUL li a:hover:not(.header) {
$ C. g- `5 v+ D+ D, r2 W6 O background-color: #eee;
+ d2 c: i# z! V }
* S. \2 G: h) f1 S" w* ] </style>' [: M1 U6 P) r. ?) Y
</head>
: d$ d6 A3 m$ Z2 j/ L7 ^' v$ C2 a0 T, O% y# N. O# U0 A. l
<body>% r& _: d J6 u4 x
( o! r2 f: ~; K8 Z9 H" I' k
<input id="myInput" type="text" placeholder="Search...."> Y& {; _7 Z& L/ D# _* C6 [$ |& w
<ul id="myUL"># q* {8 Z( t" L9 ~9 j
<li><a href="#" class="header">A</a></li>
) W) C4 j7 r- ?$ U) h/ E <li><a href="#">abc</a></li>
7 E9 D9 `7 S/ D z7 u0 q <li><a href="#">abort</a></li>
, g* E' U& S2 \# a+ V8 I/ T <li><a href="#">abandon</a></li>1 f+ b& G0 A2 N' G+ X8 B2 W0 v" ]
+ I1 b& i$ E9 W. I6 v" O; | <li><a href="#" class="header">B</a></li>7 H; L7 a: a! Y" t
<li><a href="#">baby</a></li>/ y& }4 {2 X( Z* [6 \. J
<li><a href="#">bird</a></li>0 x4 b( _" X* d5 ?, X: m1 t; I
<li><a href="#">bin</a></li>
- w8 ?$ L: e/ O$ f; n% f' Z* I! w$ O# |
<li><a href="#" class="header">C</a></li>
: s$ Y; ]4 t+ k' ? <li><a href="#">car</a></li> R R& K! H/ S; Q/ z. X9 ] L
<li><a href="#">card</a></li>' s& Z) H- \7 i
<li><a href="#">cavans</a></li>
3 \$ {4 m- S3 p* ]5 {# ]# \* [ </ul>& x; T6 p! G' J: o
+ h" m8 R* ^" `; e k2 w) b5 G: O) g( v/ O. y
<script>
' U6 A0 A c/ ^0 J& }2 c0 ` function myFunction() {" Q, Z$ P* S6 j) U
var input, ul, li, a
* f0 Q1 t! e- a% N/ I input = document.getElementById("myInput")0 T, E; k3 \2 z, j
ul = document.getElementById("myUL")
6 k+ v1 [. s7 k, W li = document.getElementsByTagName("li"), L+ }, p7 @/ }) z( v1 J b1 d: {
var inputvalue = input.value.toUpperCase()3 F5 S# R3 p+ t0 n) i
for (var i = 0; i < li.length; i++) {
6 Y+ Z; y$ F$ W' x& ? a a = li.getElementsByTagName("a")[0]" p' k6 W2 w# g, G: C0 c
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
$ b f8 S5 h) u8 \+ y li.style.display = ""% L$ R( i u9 K+ f" \
}
6 a: i' H v8 ^- x: t6 Q' A4 y4 ] else {( S0 V }* Y6 f" w. H' d) j- C
li.style.display = "None";) {3 E6 Q: ]& t3 ~/ M
}" P( H1 {$ |* O# n
}% ?. y; }! e5 |6 G, M" `
}7 @# g/ g. |- H
</script>/ `8 V9 N# u7 f3 @+ K1 t9 S5 m% L2 `
</body>
3 j0 ]! b( I$ R. O' n+ W0 }% P) v3 T0 {% ?0 h! R8 g
</html>[/mw_shl_code]
8 Q( y, a# v) N+ M. g3 V; n |
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号 )
