|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
3 o4 u+ E, s- J3 x" C/ W7 N1 l
JavaScript 搜索框自动提示
9 u2 y5 B! \- ]5 s4 Q, |/ p0 p; c4 T5 H1 C" W; |
, ], l) S$ X" P/ P. Q5 d+ j, ]/ e5 i; d }
8 C7 Y! {: _; P8 d/ B# @" t
[mw_shl_code=html,true]<html lang="en">
& _* b4 a. J; H$ G e) i3 I7 d' ~
+ q; `- m1 k) @, O0 b1 m<head>' x, a1 }" A) O( p& i# e
<meta charset="UTF-8">" g& p7 B) s/ s5 g5 ]6 o- T
<meta name="viewport" content="width=device-width, initial-scale=1.0">1 I" B1 e. |7 W5 Y4 u
<meta http-equiv="X-UA-Compatible" content="ie=edge">
% z% u, k. u# z% J <title>filter the value</title>
; N# O/ W. r' I. C X. ?4 H& s+ D- j; e
<style>* U! z' O& w/ L; h8 ?0 u
#myInput {( M& w2 i1 y, `) |( S1 w- ~$ ~3 d
background-image: url('/images/mix/searchicon.png');$ j; f$ y& [$ W) `, C7 @7 m5 k+ L
/* 搜索按钮 */' C! Z9 D/ e" h
background-position: 10px 12px;
! E: L% O% L1 Q! x5 Z /* 定位搜索按钮 */: V6 [& G: F' P# K! g
background-repeat: no-repeat;
, Q+ d. h9 R" U4 O/ j# F) |9 G /* 不重复图片*/% ^' {; U9 {% P1 H( S/ y4 g" S
font-size: 16px;6 `$ B& R, b. f1 o
width: 100%;( P. a+ i- l) Q T+ D: m4 Y
border: 1px solid #dddddd;+ V/ { L9 i7 o" _+ G" Q, Z" x
padding: 12px 20px 20px 40px;
+ p7 p* c! h$ \0 A9 {+ P margin-bottom: 12px;
7 `( T5 N) g! Z# \+ Q0 S3 T& } J }' Q: T3 Y! C/ e7 G0 E' q
1 C. K+ w' q/ K #myUL {
/ t g- u ~7 ^7 K: H5 B list-style-type: none;
P! Q1 f; H- S6 V* q" g& P0 R6 s padding: 0px;
5 s! d- V& t8 A5 I margin: 0px;4 n! z6 h; N, d5 i* Z. ?
}
. @3 P0 h) t; P5 @
* |5 p. Q7 Q O, a! w3 o #myUL li a {
4 X, \0 |: i! [+ ^: H6 V2 f% @; d0 j' ?- i border: 1px solid #ddd;: ]. ^5 [. O9 x
margin-top: -1px;
1 `+ V2 j% O% z background-color: #f6f6f6;; C2 |& g0 x/ s
padding: 12px;% k! @( c/ _) M y, ?8 f# X
text-decoration: none;
" s8 }5 J1 v% f* \( a2 r( b9 }2 z font-size: 18px;
+ I# ]& F9 R3 `- ~+ R color: black;
8 u7 R( X8 Z0 x6 n8 P6 Z* X. m display: block;+ o! C* |& `6 E q9 G* f, K# I4 i
}
: c( N& K9 H; f& Z
* y$ k- F4 j2 v( a4 V1 j #myUL li a.header {9 M! j8 c. Z9 B/ a9 O8 J8 M! u
font-weight: bold;
: j% X$ h6 ]4 B! V4 D background-color: #e2e2e2;' g+ k7 Y/ t$ e
cursor: default;
- m; f/ j# v" h+ T/ g1 G. a }
- S% N' b% s* z: f- ^( U" j0 a. k. P7 r
#myUL li a:hover:not(.header) {. c S, [# s7 K" Z. Q2 r
background-color: #eee;7 P3 m* Z- `5 S: Y
}
( M9 s a1 g5 z& W; Z5 W, v </style>
9 K& W) f0 L4 t! C- Q7 |( j |</head>/ F Y: d& e6 R* F+ i4 ?
3 W0 W3 T; J! U/ A) \2 @
<body>
# o5 g6 S' K, E2 V: H( z0 A% j. ^9 R, i: T0 Z, u
<input id="myInput" type="text" placeholder="Search....">3 e7 D( A) k# a, k
<ul id="myUL">
& v8 E* Z( \/ [( ]. X3 y" a8 o6 Z <li><a href="#" class="header">A</a></li>. Q% W% Y8 J1 V1 j
<li><a href="#">abc</a></li>; ^2 G9 O/ P. c! ~" P9 h: H
<li><a href="#">abort</a></li>( ]$ G V7 L! C- U _
<li><a href="#">abandon</a></li>
0 b/ q, m! x8 I+ r( c; t ?3 H# p# @5 B4 I4 |7 {% Q
<li><a href="#" class="header">B</a></li>$ V5 B8 \' p _; }$ ^" a, A
<li><a href="#">baby</a></li>
, O$ I( C0 C2 h Z <li><a href="#">bird</a></li>
! b- n' P5 i( X8 f0 V4 [6 r <li><a href="#">bin</a></li>
& R2 n$ Q% v& }$ I( h; d2 [8 @
% ~! m; }& {* k. d <li><a href="#" class="header">C</a></li>
+ Y$ S1 S, j9 ]+ `. I* q9 u$ r <li><a href="#">car</a></li>' q( t7 A7 ~5 Q. q1 t1 O" M) }( t5 f
<li><a href="#">card</a></li>( U8 z7 ]% a0 `2 V3 X' g) N
<li><a href="#">cavans</a></li>! O& T9 M1 r3 y7 V3 s7 `0 X
</ul>
b4 P( t) R5 e- H1 U6 Q7 I+ j6 V& B( w7 r$ y' e: Y
/ O- l' z( m, E- |# A# Z
<script>. @, D& X/ O) {. k5 {! _; b1 ?
function myFunction() {
( ?* K+ ] N A* ~ var input, ul, li, a
1 R! |2 x; @8 }# h! I input = document.getElementById("myInput")
- x2 i' p6 f- z0 o( q ul = document.getElementById("myUL")
) w( y# h: Z' c0 v& s' z0 W" D9 M- E* J+ o" T li = document.getElementsByTagName("li")
8 s% W* j7 q2 ]' L2 L7 s, X y var inputvalue = input.value.toUpperCase()
/ a' Y& k0 q8 l' W j8 O for (var i = 0; i < li.length; i++) {
9 R/ \2 \8 T. m! J& b; ?, x4 K a = li.getElementsByTagName("a")[0]# j% [+ K, c* K4 i% r; E
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
W* H' K+ x& P [4 n li.style.display = ""
/ }6 a3 L" f# S# x k/ L' l }
& ?' T* V' ^1 U1 B else {
l) Y% h: t _5 q; [2 N. ~ li.style.display = "None";
( \8 d# g a6 e. x/ m/ e6 W }7 h* r8 k7 A6 \) G
}
3 h# G( X3 a5 ?, T& z+ {/ w }
" u/ w: M! j+ w S7 z </script>
1 D0 i+ ~, H- f+ |# E* u. X</body>, ?2 t( ?" c0 K3 j$ R' r
; ^0 | G( r: b+ }/ q
</html>[/mw_shl_code]4 F/ }* A8 `$ C! ~
|
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
发表于 2019-11-7 19:24:08
发表于 2019-11-14 09:05:00
