|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
9 N1 f" P# y1 `' ^3 Z3 b4 V
JavaScript 搜索框自动提示# ?# R" q0 j5 D( U' c. {
$ \6 `: p: d( o' a% n
& L6 F% X1 a0 Q) z4 M v
* x0 y1 [; h) h4 ]8 x9 [6 [" ]) C+ b5 y
[mw_shl_code=html,true]<html lang="en">
) |) B+ o4 [+ d/ R$ `
' l _# Y# V- B: L9 c7 M<head>
; _8 j: J5 B' a* s) G; {8 ` <meta charset="UTF-8">. r0 b8 y- D, P) D9 a& g
<meta name="viewport" content="width=device-width, initial-scale=1.0">) H- H- p/ |6 `9 Q. b \0 a8 p
<meta http-equiv="X-UA-Compatible" content="ie=edge">, Z; \! R1 ]# C J+ R5 C @
<title>filter the value</title>. n/ \- f, O6 F4 }
8 q, B \* W) z8 ` <style>
8 i. h; F: x' c/ u* f( h& ^4 n$ w, ` #myInput {
8 }- Z9 X; ]* E2 o+ b: P& i7 N, k background-image: url('/images/mix/searchicon.png');
- j1 }' o- O0 F) A /* 搜索按钮 */
0 {7 f9 J; w1 U( L4 G3 n. L background-position: 10px 12px;
) v5 K4 v* H. ~' P4 x! E) n3 t /* 定位搜索按钮 */" P5 P3 n7 r1 t: U6 P* ~ L. h: f) v. W
background-repeat: no-repeat;. {! U0 D; y, i" m
/* 不重复图片*/
8 W8 h: q) o6 ]( }1 h2 c ] font-size: 16px;
- m) [. k1 {) B7 `% c; F' d width: 100%;1 D h1 c$ g0 ^7 m% m \& D
border: 1px solid #dddddd;8 A) E! c3 z* e; W# F2 ?
padding: 12px 20px 20px 40px;6 t: u! s: }: V. E ^
margin-bottom: 12px;# y8 ~: q& [$ L! R
}
7 o) z, H" Z% A2 y" Q; }! \7 ?, T& \
#myUL {
n. Z' J& d( a& L list-style-type: none;$ S+ P: n% x& a* {2 e3 {% \1 M3 a
padding: 0px;
! z1 z+ m. q* b margin: 0px;: D1 {, v( [$ x5 a: z, s7 [
}8 q+ |& Q4 r3 a& A+ s
% L& l* T& G' X W" d8 @ #myUL li a {$ c1 A% W6 {- _4 E" ]
border: 1px solid #ddd;
7 @- |5 X* a# M; f* S2 \& e2 G& W7 I margin-top: -1px; V; Q" O3 ^1 r% z5 D2 Z
background-color: #f6f6f6;
9 e4 t6 o1 i3 X# v+ N6 p2 F padding: 12px;4 A( l7 t. c7 A$ S
text-decoration: none;
: |( W c4 I0 F font-size: 18px;
) U; I( W' g1 Q3 q& ^7 S color: black;$ h& @- _. U9 q; n% S
display: block;
2 P" Z6 r! ~3 |: t5 z- m }
! C: e8 e0 l/ T* Q! m4 F9 K% i( W% [ |; }$ l) r
#myUL li a.header {* D$ c( U& F( \1 H, C
font-weight: bold;' \& j! T$ x4 ?: {" a
background-color: #e2e2e2;( J5 W, x) X }+ K) ~; R
cursor: default;* n9 r# f/ p& i' G/ Z8 x3 f
}2 U# j& t9 D' j7 t" u
& m9 i5 c- y; n, ?! {# b4 K+ f
#myUL li a:hover:not(.header) {
+ c+ }1 Z: Q9 u. c background-color: #eee;
6 [# J) a7 c+ e8 K9 l! {1 p; C9 w }
4 L2 p2 H; h3 i$ H </style>
/ U% E/ ?1 a6 Z2 N& D) D: N; ?8 `</head>
: X: r+ r5 d& k. o: T( e
( }, W$ j' U$ d<body>8 @( ?+ A: K9 N& {
5 l; O. G& X K2 S0 B
<input id="myInput" type="text" placeholder="Search...."> M, n2 f2 e* n! h2 g% @9 F9 s) Z
<ul id="myUL">- ?* M+ c& P7 P$ b& O
<li><a href="#" class="header">A</a></li>
# p7 E5 q& t5 f: I- g1 b7 R' e <li><a href="#">abc</a></li>( t4 T x& q" P7 h% p
<li><a href="#">abort</a></li>% N- I v* I8 Y, a
<li><a href="#">abandon</a></li>
8 v3 L) M* b3 |" Y8 N3 m1 y- N! h3 v$ E' J m
<li><a href="#" class="header">B</a></li># V/ ^# g" E: a7 \2 x% y
<li><a href="#">baby</a></li>
4 F3 I' c! {! Z. ^, | <li><a href="#">bird</a></li>' v7 y. Y3 a2 O& E; j; w/ o. O2 d
<li><a href="#">bin</a></li>
7 B; R' Z4 m; S0 s
9 R: j" v! z7 Y+ w5 q <li><a href="#" class="header">C</a></li>, ^5 d1 D" u3 B; z) s! Q# [
<li><a href="#">car</a></li>8 ?* s+ U( a$ U/ r e, h0 b6 D
<li><a href="#">card</a></li>; v1 v6 W2 q# F' H/ @
<li><a href="#">cavans</a></li>2 C" a; N. V( ~* A" \5 n+ P
</ul>% r- ]' d7 x! G
' H, V% s0 q0 {) a1 \
& u, i% F6 O7 V9 T <script>. n- R+ ?: T$ n
function myFunction() {; m1 Y* |- ?: L0 ^" A+ u" p
var input, ul, li, a
% w2 d8 u5 Y2 Y/ W: j' F input = document.getElementById("myInput"), j# |1 p9 p a7 P
ul = document.getElementById("myUL")8 q' J* y7 q. n! b+ e6 k9 K- U7 q2 k" r
li = document.getElementsByTagName("li")9 Y: k2 \; o6 p3 G% C7 @
var inputvalue = input.value.toUpperCase()
o' I6 g8 N9 M, b0 V for (var i = 0; i < li.length; i++) {
! ]8 C! r" o- F, r* H a = li.getElementsByTagName("a")[0]: U& s; @* B5 L* k4 F9 y, x
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {1 K+ W, F1 J$ z
li.style.display = ""
; r; d4 y9 U! }: o% t- g6 ] B% D9 S }
4 B$ E0 ~1 w h else {0 e) z+ j9 p' T1 }8 s
li.style.display = "None";) {9 q! W! I. d" T1 T7 b
}; B( g3 R1 g! f/ f2 _
}% A) D8 V+ V7 j
}: ^! n- R, C- ]
</script>
, N: V1 d4 @4 O; q' J4 B" E2 N2 V- c</body>2 J1 @' E9 }- m
0 @, m" X9 ~! o* R" F- E" H4 V8 ~
</html>[/mw_shl_code]
" G6 q9 a, m1 R4 H |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
