|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
6 w4 p5 k2 Y* C) v
JavaScript 搜索框自动提示
! \# j3 `$ @% L4 c- M$ v: d" T6 C r# ^0 ~$ i6 |. O
" Q# T( B: M; @3 l8 t+ C6 C, ]: R& v* Z. U' c
8 y# O8 ]0 y6 @% J[mw_shl_code=html,true]<html lang="en">
1 v5 x' l9 {# e# d n4 z6 q5 k7 k
) V0 k J$ \5 S<head>3 S* G: t( M% U6 i6 S, t( t( t
<meta charset="UTF-8">
/ M* r- d' t/ A <meta name="viewport" content="width=device-width, initial-scale=1.0">- Y( S1 j6 ?: \ p# }+ b
<meta http-equiv="X-UA-Compatible" content="ie=edge">
: `. ^* p. }9 W/ H I- q <title>filter the value</title>
" F) c! x \, U6 ^# w; a/ e- h- ?2 D* S7 o1 z; C
<style>, I& W* s/ _* Y8 ?& S7 t M$ {
#myInput {
9 U, ?% {( c" k0 Q5 K+ O background-image: url('/images/mix/searchicon.png');4 t* y5 V* l$ B- S( [0 E$ f
/* 搜索按钮 */
/ |7 D& l! O% Q; {8 q; W- _. \ background-position: 10px 12px;
: W4 _5 R; k/ r7 @ /* 定位搜索按钮 */
) G- f1 Y+ G |) { background-repeat: no-repeat;
, l) ~! u* ?2 k2 T0 \4 i /* 不重复图片*/0 Z3 P% r( m' t# ^ _ L% K6 B- h
font-size: 16px;) k) J1 u" C- c) A/ N
width: 100%;
/ z' L5 T9 M$ {4 s border: 1px solid #dddddd;
) [8 S q- B' I0 P0 w padding: 12px 20px 20px 40px;5 P5 s _# `8 k
margin-bottom: 12px;# s" k w1 d" p" ~: Q4 Q+ s
}" ^* \3 x: G/ I3 ?
" u6 t9 X; J3 I# k$ d- ~6 W #myUL {
/ ~# D6 T' I7 \# S list-style-type: none;$ o4 s& M9 m/ m. N- S
padding: 0px;6 R0 T/ S8 o+ l7 Y4 o. _" W. T
margin: 0px;
* N* L5 b- X$ w* H8 M! A }
0 T' c6 |7 m _7 C" h3 {+ Z! e$ t' |8 _) }9 L0 R6 P% T% o6 V
#myUL li a {+ Y ^5 V! ?- B2 V
border: 1px solid #ddd;. H! @! ?( V; O
margin-top: -1px;
* ?2 V( o: g% o% d( n; z background-color: #f6f6f6;# ?) y* n7 Y+ r2 [9 ^: z/ ~
padding: 12px;
6 n, m% P% J: L( T% K text-decoration: none;
# s; A! @4 R9 d1 p! k, @ font-size: 18px;
% @+ y* j: u$ q4 T7 j- P color: black;
9 B$ z" H2 s! ~* d: a* }4 D1 \ display: block;+ m. l6 Y7 P# W7 @
}0 E! H+ ]* b: C/ [! l
9 i/ P4 H; ]4 m# U& X: u #myUL li a.header {
9 R) }5 M1 a. {- {7 k; E6 @! ? font-weight: bold;
) p7 b C: O; k/ O: r5 h# d% i$ P background-color: #e2e2e2;& _( @. {% Y* ]/ F+ ]: c9 ~3 w0 g2 |: L
cursor: default;
) D) G2 r D# j }
N `( R) S* Z) N/ U
' E+ u3 r# K I9 E2 K( X% j #myUL li a:hover:not(.header) {
+ ?- }; w. E. O3 j5 k background-color: #eee;
# p) c3 }; n* |$ a7 Q6 c2 d# q }
. d, c8 z2 l' e/ |; p, W& x </style># e" Z+ ]2 y. Z# V
</head>/ R* F+ L! l( q: G; E" R% b$ j
' w6 `( {0 v; J$ ]. ^
<body>4 O. t# B! g' l& N2 E* S. d+ j2 z
: Z M) ]5 F0 ^1 ^; ~
<input id="myInput" type="text" placeholder="Search....">( y) H1 L- I% i7 W- G
<ul id="myUL">
: A# |) I8 d) X" u% k6 P! ? <li><a href="#" class="header">A</a></li>5 r2 r6 _2 G. k" ~* X) }; F: I6 h
<li><a href="#">abc</a></li>& ~* I" p" @6 v3 w, `- @. P
<li><a href="#">abort</a></li>; K0 a6 @( a# C0 e* F
<li><a href="#">abandon</a></li>
" R, P6 J; M" h6 R0 n ~+ M/ l2 \% T: l/ o6 p7 K, U2 z9 b7 f& S
<li><a href="#" class="header">B</a></li>
( ?6 L2 n5 X, n1 D <li><a href="#">baby</a></li>
4 [7 |, i1 e, Z! @4 I% {! y <li><a href="#">bird</a></li>& T! {9 j9 m/ z- w3 L
<li><a href="#">bin</a></li>
. E* G. c; e5 a0 F- c1 s# D$ `* b5 k5 U% L- @
<li><a href="#" class="header">C</a></li>
# ^# J6 {& N+ o( ]. L1 W' `2 a <li><a href="#">car</a></li>
3 K1 R* J b" g" V* Y <li><a href="#">card</a></li>- _$ U. B& l6 ~
<li><a href="#">cavans</a></li>
/ U8 V3 o8 v% b, Y/ v3 ], ^ </ul>
. T# ]5 I: J! K& T
. `3 r* |4 G5 N# q; {* S' z7 [$ p$ L% f
<script>
0 U, J8 ^, C- w# Z. f* ^3 I, [! {( f function myFunction() {
& @: X/ N* p7 R$ X var input, ul, li, a
9 }/ w8 k5 q# k& ?( \6 x& O input = document.getElementById("myInput")
) k. r5 T0 Z' D* s* A8 Q$ m ul = document.getElementById("myUL")5 ]' [4 O) R4 _# Y& m1 L8 \& q7 ?( P
li = document.getElementsByTagName("li")" G, f* D0 `! o2 u8 d
var inputvalue = input.value.toUpperCase()1 s# L& ^ E- @1 E- Z, n
for (var i = 0; i < li.length; i++) {* @7 l7 l5 `& _
a = li.getElementsByTagName("a")[0]
7 A$ Z# _9 j) w" r if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {9 E2 R) e( O) e; B
li.style.display = ""- M6 d) L. V( X
}
$ R8 z- w6 c. L% A else {
: W9 }: s% a- _/ Z- k) ~ li.style.display = "None";# s. r! W Q f+ ^, u/ g) P1 z
}
! C! H8 L! G# o: n9 n/ G# V }
( V% ?6 @2 d$ ]9 ] }
, S3 C% ^2 r8 N) x </script>3 o5 P. b. C! b; d$ ~' Z
</body>3 m& t% P: `4 F* m5 b6 j
. J# p% f$ ]# S/ F5 K1 C
</html>[/mw_shl_code]
j7 E# r9 } V1 H, C |
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号 )
