|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
% T* p; T+ I* |. Y1 J" O
JavaScript 搜索框自动提示7 w5 `9 q/ O4 W; A) _) h, t
0 J( |9 H# h4 \5 P3 Q3 e4 y' ~4 H
% Q* G1 f$ S" E" X& E: u9 z" v! r1 q' |; N: q! t" G
[mw_shl_code=html,true]<html lang="en">% ^5 o5 F1 Q: }+ @3 q: K; t
% F. g+ u# [% w1 @$ R- F! S9 j9 l<head>6 v7 ~9 U* N. v- E/ h* T
<meta charset="UTF-8">
# }5 |/ r, s3 X" w) {! [ <meta name="viewport" content="width=device-width, initial-scale=1.0">1 ^: N9 t U- \8 _: k% I0 d
<meta http-equiv="X-UA-Compatible" content="ie=edge">
0 O9 f2 g* T' m% u; u; k <title>filter the value</title>/ }. {( h5 a3 J) T3 X
5 n+ T* j- K1 Y* L" F4 v
<style>) z- |- I9 l3 r# ~- _
#myInput {* h$ ~& V* V5 l9 t) W* b0 ^
background-image: url('/images/mix/searchicon.png');) X0 b/ e6 F& C4 E9 I
/* 搜索按钮 */5 k8 l$ w" F) F% T/ ^5 w* \4 F
background-position: 10px 12px;: C7 H7 B- i: [
/* 定位搜索按钮 */9 m3 i8 W l8 T% @/ P
background-repeat: no-repeat;5 y# n+ Z: _" ^
/* 不重复图片*/
4 V- c6 [+ ~5 p4 J font-size: 16px;- o5 X8 E6 B, V% `8 u
width: 100%;
# |( z) B& D8 |. n# S border: 1px solid #dddddd;
8 q" P) t& l( Z4 ~) `+ R- }* u6 i) u padding: 12px 20px 20px 40px;
+ x# [" F7 ^5 E5 I9 z, s margin-bottom: 12px;
1 H; V) V; _7 Q. N8 z7 T5 ` } c% Z. X, F! ^
- ^, V; A) l# Q7 {
#myUL {4 s8 ~( z0 F2 ^4 K
list-style-type: none;
& h" t3 L6 [ |# k5 I padding: 0px;3 h' |# X8 I8 \: D
margin: 0px;- |# G0 @7 G& a- O+ G' x) m3 H
}# C3 C9 }: H. B# `
" Q' C% |# T* X; X, B& |" o+ r G #myUL li a {
* g0 ?" u5 n2 N! Z$ ~ border: 1px solid #ddd;& ?6 t% x$ c2 u- w" }
margin-top: -1px;
k; q5 U* Z& v2 O0 k9 o# o background-color: #f6f6f6;/ n: ?& K$ v( o& h/ |% g$ @
padding: 12px;
( k8 X$ Q2 _$ i$ ~ text-decoration: none;) m( X& Y" t5 V5 N5 a9 z
font-size: 18px;
- a/ c% B- M6 e6 @6 T color: black;
. c) W1 ?8 `- ? D! V display: block;
* [! m, y N( D, ~ }! j4 ~' g( R" W4 A5 D! D) a
1 k L* l4 K7 d0 b7 h8 H
#myUL li a.header {
; T& D) F* S9 A; m6 c L; H; F font-weight: bold;
H& m# S/ `9 m. c: r1 ^ background-color: #e2e2e2;
P) T: T Z2 ~3 y9 A& O/ O: {2 t* X# X cursor: default;* j1 J4 z8 l" q9 f8 C
}
3 ~2 O4 U, G2 _' e" [6 x
$ c% [% X( t4 ]) k' _7 d #myUL li a:hover:not(.header) {
( j0 m+ x! T7 a5 G) I" Y background-color: #eee;
$ l) `) h) ]7 d# x- B! \ }0 ^# @* K" `! R! n
</style>
3 n( H1 f$ N& \; }7 v</head>
$ l) a' |7 L2 H: `
' Z X2 p+ r9 U9 r9 j% C<body>
& b; U2 ?3 i6 m" m' L& N+ t2 M& {
! K9 g8 M1 X& {5 B2 x" y8 S8 | <input id="myInput" type="text" placeholder="Search....">5 V6 M8 a3 E& m) b
<ul id="myUL">
) m& y2 `% i6 ?; J <li><a href="#" class="header">A</a></li>
4 k; Z3 c6 T) ?" ^: C8 r% x <li><a href="#">abc</a></li>
! K d/ r; l, m# O <li><a href="#">abort</a></li>4 j# l* A0 z4 [
<li><a href="#">abandon</a></li>2 p9 M6 }0 x4 f! s
- M1 C( d4 h" n <li><a href="#" class="header">B</a></li>
1 }( p4 E5 X0 z' T <li><a href="#">baby</a></li>
?8 p. e. M6 B c1 O+ a* T <li><a href="#">bird</a></li>
& S+ [* f, A* m0 | <li><a href="#">bin</a></li>
0 ? D8 R' {8 j6 B( x8 `6 }* C* Y) C& f# ?+ G
<li><a href="#" class="header">C</a></li>
2 ?5 @$ J, Y4 }: d: L& k9 q <li><a href="#">car</a></li>
8 s0 H9 D, H/ Y <li><a href="#">card</a></li>4 X2 k2 U+ t: q/ z
<li><a href="#">cavans</a></li>, A0 G( J$ P, P- A: r" n, A
</ul>+ s6 W' ~/ [6 O
+ _; i% H" T( ]0 x/ Y- E$ k& P! e- E$ t6 {0 ^/ f( K9 I
<script>/ z1 x0 M8 z/ Z4 F l9 j/ S' l
function myFunction() {0 l7 G/ z- z* |4 H
var input, ul, li, a" X" P& F# d3 H7 {
input = document.getElementById("myInput")0 r7 [4 m/ f% D5 t: g9 X
ul = document.getElementById("myUL")6 o2 p6 d9 q% L
li = document.getElementsByTagName("li")1 O ` P0 d' i" C5 G+ c; Z
var inputvalue = input.value.toUpperCase()& D* p U1 l/ a- y+ K$ n( I! c, ~
for (var i = 0; i < li.length; i++) {
& Z& l F! ~) _* h a = li.getElementsByTagName("a")[0]$ I% O, z# P/ x
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
4 L+ D+ d: ^6 u# Q) X8 ^2 B T, ]) f li.style.display = "" k' |/ U2 G. L+ n6 g
}
7 L h, s! _% \3 l else {
& G8 w: s! B* u1 K# F1 \ li.style.display = "None";
) v% X% y" M5 [8 }: O5 h d }
2 s' B$ o3 J8 t }
$ {( C' _. [- S, f* w }
& w. z/ K5 s, D, E9 h' N </script>1 \& ]7 U% E- L; }" _
</body>
5 |' ?% n: a5 \3 `8 J* n0 X4 V+ {/ y g+ C
</html>[/mw_shl_code]
' R. h9 g4 Y, ?4 b5 u0 z |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
