|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
* R( L" X. D& RJavaScript 搜索框自动提示% ]# |* x+ I" t
$ g( _' X* O; [7 D
: @ e( _: X) T" J
a, ? \9 V+ L" N+ a5 M( S( u$ q
5 d; l' {, P! I9 q: u[mw_shl_code=html,true]<html lang="en">; _5 [/ G3 Z. y4 A7 |
5 n$ B4 a$ T) v4 G% E" W+ p<head># o0 d8 Y, \ p% N
<meta charset="UTF-8">- L' m5 m& F+ f4 _* Y
<meta name="viewport" content="width=device-width, initial-scale=1.0">0 ?- t+ r& N- T8 D- o' x
<meta http-equiv="X-UA-Compatible" content="ie=edge">
3 K J* V* @$ b! w# y7 c <title>filter the value</title>
9 o K+ |# `9 @4 b2 j' A4 z, k8 N1 Z( Y, y6 k: B* S) {" n8 i( b
<style>
I4 K5 W: N+ X1 ]9 n& l0 d2 \- _; H #myInput {
. j1 m1 M! _3 F5 V. { background-image: url('/images/mix/searchicon.png');
0 a& w6 D$ t& v8 f /* 搜索按钮 */
( v( p6 m) R# x+ E( M background-position: 10px 12px;
5 G* T( E: n3 X/ v1 [" A /* 定位搜索按钮 */ S' u0 q. t, @& w2 g; N8 ?
background-repeat: no-repeat;
! ^; @; A( c5 ]. R8 ? /* 不重复图片*/
7 ^% L6 R4 v5 F font-size: 16px;
" q& \3 j( T& r7 d* N width: 100%;
& P' P% C1 d( c3 e6 y' B: [7 ] border: 1px solid #dddddd;
& q6 X. J$ x0 I6 _+ h* M padding: 12px 20px 20px 40px;. T+ N M& ?+ N! \9 l, y, i
margin-bottom: 12px;
# n2 j) o. I5 s8 g4 e* L }& \' N; Q3 O/ v9 ^; Y* \
: E/ I7 Q2 R1 E+ d1 D8 R8 H
#myUL {+ {% B6 w- t& R4 x! h; k a
list-style-type: none;; A+ c6 u1 D7 s' Z$ t/ t) Q
padding: 0px;5 H* m0 k7 d' M; G3 a: q6 @
margin: 0px;
: B% x! ~( v [6 M$ Y( x5 U }! G' t( E2 h, I& P
( E- W' F+ i4 |
#myUL li a {( ^% s, @2 L6 P6 o, g
border: 1px solid #ddd;
& J0 G& o- a) T1 C ~+ m margin-top: -1px;
8 d- Z* G' u" n: ] background-color: #f6f6f6;
8 J0 E' K _2 v$ m2 _$ w padding: 12px;! X. v# C7 u |3 T. G
text-decoration: none;& U1 T3 B9 y8 K7 w5 \+ A. \
font-size: 18px;
# B9 B8 V" y" X5 p* A color: black;8 e/ B" p! ^* V* o0 w+ h, {: {
display: block;
+ E% z2 C0 Q: f. T }
" Y0 V$ I) i) e4 h& M l9 E) e: M: S8 e
#myUL li a.header {" b5 m! i/ ~# H2 J& n+ K
font-weight: bold;3 z R0 S6 B+ T+ k4 N _
background-color: #e2e2e2;
' ~' y$ e3 ?0 u' k( D8 Y, T" [ cursor: default;
7 b. F; X) u& d2 c8 g# F7 h }
7 b# S- R1 l$ a& Y4 ^( ~2 T& ?- D
H# g$ `$ v% W #myUL li a:hover:not(.header) {6 l7 Q2 y. _7 w9 }! H5 M6 {8 T
background-color: #eee;6 W2 o3 ?% t4 F# w1 K
}
f* W# K7 X; _) c0 g" ^" a! Y </style>
J `: i8 x. i</head>: B: S, _- V- Y0 }
$ G, ?4 m' c$ q# U* S- g3 J
<body>( e2 o, S, e% [/ T! y7 \+ G, D. \. u) y
7 u' J% t e- T" G6 |9 D1 M <input id="myInput" type="text" placeholder="Search....">) R7 Z/ p/ ^: A( `: n
<ul id="myUL">
! r: N5 `7 U8 M1 V7 u# ^3 G# {5 \ <li><a href="#" class="header">A</a></li>
" E4 l& ?9 e) i' u <li><a href="#">abc</a></li>
$ ^; J7 O2 K) \1 g& @' u) F" R# S <li><a href="#">abort</a></li>
' m8 F4 N4 w ~3 S q- j <li><a href="#">abandon</a></li>
9 D. X# i5 H- Q; Q/ }. G# J1 h5 _4 Z- I- ?/ K; _# t- v4 I6 X* F
<li><a href="#" class="header">B</a></li>
& n. p3 C# r! a. E6 N7 y+ } <li><a href="#">baby</a></li>9 f* |/ i9 g& {0 r& d
<li><a href="#">bird</a></li># o- u% P2 |' T: F# e. Q5 e; c
<li><a href="#">bin</a></li>/ W7 O0 U2 q. I' X/ g
! C7 S3 a( P F* I/ O
<li><a href="#" class="header">C</a></li>
% H3 J' W3 R( L' ~' X <li><a href="#">car</a></li>
7 k- v( x8 e4 _8 ? <li><a href="#">card</a></li>
7 {& d- {; n7 Q4 y- B& w. m3 P0 X <li><a href="#">cavans</a></li>/ m$ q$ G9 u9 t" x1 f1 V; N
</ul>
% c2 ~% r: p: ]# {7 L" |2 H1 |, a- i# @5 H0 r
4 C* r6 [5 c! h) G( b
<script>
6 r8 D0 X! {6 A5 m function myFunction() {$ ]9 B) t: @3 u; ^0 T( W. X3 E
var input, ul, li, a
. g2 x+ l8 L: D/ y input = document.getElementById("myInput"): c! ^3 O7 y/ p# H3 a
ul = document.getElementById("myUL")
$ Q2 D8 G# A1 f! R li = document.getElementsByTagName("li")3 o3 g) O, B1 \( c1 p
var inputvalue = input.value.toUpperCase(). r9 P/ x4 M; f
for (var i = 0; i < li.length; i++) {) \1 J: L- [. Z+ R# Y+ \, |
a = li.getElementsByTagName("a")[0]% Y, K" m4 d- X' ~
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {6 @( x1 [8 ^( l" u
li.style.display = "": {/ z7 h6 s( e6 `- o" Y$ V5 g
}+ Z6 \2 ? M Z/ Q, q$ e
else {
4 j* `) \% Y* K! S' t! @( C; F li.style.display = "None";6 i! f, l* g* T* X2 w. r2 ?
}
& _" X7 S% A8 r9 a }6 W4 M% V, R3 A1 B; C, U
}% [8 P9 b5 ~" D; P( v. l$ }
</script>3 E: k* z8 O) L9 X
</body>
- x& o: e u+ L
8 |8 [3 W8 e7 j8 n. k; I</html>[/mw_shl_code]
3 L+ d3 G5 a! n! i% w, k( i6 `7 Y- d |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
