|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
$ T) ^6 U8 K/ Y9 P ~8 v$ c( X
JavaScript 搜索框自动提示
% ~8 z4 H* ?0 ~* i ^% y# D; F! d# P7 x3 Z0 c0 Z7 Y1 u) D
: J1 q) m2 S# z1 b
4 }) T! C2 A5 \; D( ?7 L/ J$ x- y4 b) ?' E
[mw_shl_code=html,true]<html lang="en">
+ \' a" L/ x d! u* P. e$ [5 J1 N+ U3 u. O
<head>
) q6 W' P! A9 |) d" z7 F& B2 b <meta charset="UTF-8">
( m2 a Z; v; K2 ^ <meta name="viewport" content="width=device-width, initial-scale=1.0">0 }& j4 C. d8 E& M. S& M) _( F
<meta http-equiv="X-UA-Compatible" content="ie=edge">
; J7 O. _8 L! ~% e* Q( ~. m- r <title>filter the value</title>
P* k2 P. O" @4 Z8 t1 r; W' p5 h. A5 X8 J8 a0 M' _, K4 k
<style>1 V1 q4 ^" K" V8 k7 T$ O& j
#myInput {
' G0 \# Y& F6 v& @1 T% J background-image: url('/images/mix/searchicon.png');2 ~' B! e8 ?( i+ e, F% o- d( F( \
/* 搜索按钮 */, l8 c( b3 L3 O$ r
background-position: 10px 12px;
7 ]( H- I( v! g8 o0 n$ c5 Z /* 定位搜索按钮 */! _- q9 B/ }# {2 m2 x) y
background-repeat: no-repeat;% B# g6 \% g9 G7 i9 s7 T" r
/* 不重复图片*/
: }! x6 N8 R$ I2 Y3 F font-size: 16px;
, Q! w0 X# W3 C8 T1 l" R9 u width: 100%;5 N: c2 k; p( ]" W
border: 1px solid #dddddd;
# \! O+ S1 ]1 g! l$ b padding: 12px 20px 20px 40px;' H8 q$ [. _; S6 M/ X3 D
margin-bottom: 12px;8 G# F; x% j# \
}+ E# p9 u; q. o* d
; P/ b/ x# @0 G; l #myUL {
2 i8 ], g4 c) n8 f) C7 t* W6 a3 E; s list-style-type: none;0 W3 U, _9 F0 }6 v( w
padding: 0px;
" o3 V- z: p+ p: _7 Y$ n& |0 { margin: 0px;; V# R+ J6 E! t8 W, A2 y, ?
}' S2 x# f! ~5 J# m/ A
2 S' n- ^: _3 P9 N
#myUL li a {. ^) n- k$ P9 R0 U! A/ q
border: 1px solid #ddd;& y# N- ~2 u& ~
margin-top: -1px;
8 C) A2 O. b1 V, D/ G" ^ background-color: #f6f6f6;
* }9 O6 g8 }* T ^2 w4 i/ |# E; e padding: 12px;6 ]3 t$ g! f+ @8 p
text-decoration: none;! t- d, {3 A9 O! l
font-size: 18px;2 H$ I0 a- h/ s2 ^" ?8 O. e
color: black;
9 b3 e4 [4 T5 X# u# U$ I display: block;
* L ~7 ]6 h% s6 Y }
# ]' P& U8 F6 u# ]
# F: g- P4 ~6 v3 V7 \5 ~ #myUL li a.header {% e0 Y o0 N. Y3 J b- l
font-weight: bold;
! W% D: F' v j7 {7 a1 g! ? J z background-color: #e2e2e2;
8 s1 K( f* O$ b: K* f cursor: default;. i" o) s0 G Z3 r- Q# X" y
}# v. P/ \% U& @- w6 C$ o
" _: B7 f+ S6 \ #myUL li a:hover:not(.header) {
$ E( l3 p' x& H: b1 Z, a1 p' U background-color: #eee;
! l( F, B( n) C$ Y }
, \( b' h0 r3 F( I9 ], x* Z </style>6 b/ M: f9 {; l: r
</head>
1 J6 `% ]" m8 C% q( B
. s' U1 R5 Q$ J<body>( `3 L& r" @+ F
( i. e, s6 g0 i0 h' D) V
<input id="myInput" type="text" placeholder="Search....">; v$ S& w, O6 |3 y3 H4 Q% ^
<ul id="myUL">
, |' ?2 |, ^6 `: u2 x <li><a href="#" class="header">A</a></li>% b4 v( J7 t( ~9 P; ]5 ?
<li><a href="#">abc</a></li># o& f7 p- W" F3 ?( r6 P
<li><a href="#">abort</a></li>
0 @$ ~# c# A7 c' T& q <li><a href="#">abandon</a></li>( m! p4 b9 J5 k+ {
8 P+ }1 r p3 [- ^9 p7 c
<li><a href="#" class="header">B</a></li>" ~& D5 S; q% |! I* `
<li><a href="#">baby</a></li>- j4 J7 H i+ @: A ~8 r: \, n5 q& r
<li><a href="#">bird</a></li>
7 e/ ?7 ~ n' A! y) X. _ <li><a href="#">bin</a></li>
% r0 \5 Z7 }0 {3 D( a; _) k' P4 S$ @8 s+ F! @" n
<li><a href="#" class="header">C</a></li>
|5 }( d! S: a$ T <li><a href="#">car</a></li>
; @8 n! Q$ V/ h# y <li><a href="#">card</a></li>3 D( k7 r5 ]7 r6 c9 ]6 n5 A) ^1 k' z
<li><a href="#">cavans</a></li>0 e+ @5 x* ~4 F3 f% {
</ul>
) u3 J5 W$ G% w/ y
; s: X1 M7 N* q
6 ~1 s4 i3 I( {/ K; u <script>
9 d' o9 b( n( G! T8 z function myFunction() {
8 j2 j$ l/ u1 O0 }" x1 }5 o var input, ul, li, a' B: K1 f* G0 ?
input = document.getElementById("myInput")4 |* ^0 E ^$ D
ul = document.getElementById("myUL")
! r! N t( A8 X" T5 L6 z8 w li = document.getElementsByTagName("li")5 {0 H3 O6 e1 n9 d
var inputvalue = input.value.toUpperCase()' T0 d' d1 p8 H( s
for (var i = 0; i < li.length; i++) {
( }0 w% t& g+ m2 N" p' K a = li.getElementsByTagName("a")[0]
; I0 ] R' L; `" G if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {# G. ~$ s' ^. u
li.style.display = ""
) |3 p- l) s" ` }
9 u& b! d' W9 B) R else {1 g9 r. A9 K5 ] i9 J! g
li.style.display = "None";
. D; D9 ^' }' B }
" A: f3 j4 `; @& d9 F9 f }* M/ ~& l; V5 e0 A2 u1 n# e: q
}
% |' M+ U1 ~1 a$ D) n: U </script>
2 z0 [. |6 ]- \8 z</body>
/ b- _$ }9 X+ ?6 d" w C
$ r4 }$ w& z- T( Y9 f</html>[/mw_shl_code]/ C1 J4 H' G( r, ^
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
