|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
) D! _$ @) l0 H, p4 e
JavaScript 搜索框自动提示7 h( {4 M( }9 z5 w9 R/ o* x
, S8 n0 `! k1 Y( D, I N
4 v+ D3 L8 G2 f; q; A" V4 a
8 i& C6 r, w. x7 v( S( V- a
d. C" s4 k+ {6 Q b6 E+ x. j# `; k[mw_shl_code=html,true]<html lang="en">! f' f! i5 t& Y0 y
0 [; x% a6 M6 d$ X" ]% U
<head>) J/ }; b; Y4 I5 X7 R/ o) ?& S
<meta charset="UTF-8">
3 h1 r: h! A' z! _. L3 Z% q <meta name="viewport" content="width=device-width, initial-scale=1.0">
: n( x9 J, }5 z6 |2 e) _% M <meta http-equiv="X-UA-Compatible" content="ie=edge">
% `) G$ u6 j! t0 p9 m5 ? <title>filter the value</title>
. ]0 d8 {. \2 J3 H- C& |4 i2 R% ~4 w$ I( N+ L/ l
<style>
( ^# W, n2 i) ~. c3 K! s #myInput {
+ B- q; M6 Z; E" L2 K background-image: url('/images/mix/searchicon.png');
; b7 m: S" C: e1 M# _, C+ H/ @ /* 搜索按钮 */+ Z3 _$ I0 n9 P' y8 y
background-position: 10px 12px;
# C3 L7 p7 j7 ^% ~ /* 定位搜索按钮 */
, S+ f% O9 \1 G background-repeat: no-repeat;/ F7 k' T9 y6 k" v7 u
/* 不重复图片*// e6 e% P8 s& `
font-size: 16px;) _9 ~, d2 P ^" b8 ~
width: 100%;* [4 i' q+ i# q
border: 1px solid #dddddd;
8 b9 n, D) g/ v3 S% o padding: 12px 20px 20px 40px;8 B' `! f2 K, k# Q$ X5 x
margin-bottom: 12px;4 e& s! N$ m5 s) q
}9 D3 p2 T1 W0 k7 _8 v
. @1 I8 E* x% e' q1 _ #myUL {4 R# d6 ~8 l2 z2 s! _
list-style-type: none;' r; U8 j$ y4 s9 e$ f5 Q, C/ \
padding: 0px;
9 d8 t# m- o' E B7 s) G margin: 0px;7 K4 d l9 M3 b. Z6 Z9 A
}5 U& S$ x2 C, Z2 ~
; g/ A, c& y" L% O
#myUL li a {
: ?, z6 j, k% M' |* `7 f border: 1px solid #ddd;1 F* N1 O; q& D; h5 `8 m
margin-top: -1px;
( t( w) E4 f9 Y background-color: #f6f6f6;
% [- c: @/ F0 m% y3 P _ padding: 12px;
! t' W) c0 I" W& x( X8 `1 S1 J text-decoration: none;6 s- r: t9 v% |8 ^: ]1 g4 ?
font-size: 18px;
% W2 z' k9 `5 P8 L9 P/ G( c color: black;
+ f; M q3 I; Z display: block;
3 C* \" V, Z% A# t K( M$ j4 C }4 o# K' ]- X- }% ~
' ?. O& t3 R! H7 R6 z5 S/ [6 W: c #myUL li a.header {7 J' g& s' I+ c6 P+ y( ^7 D
font-weight: bold;
) M8 _; b1 ^1 P6 U x background-color: #e2e2e2;
4 l( e; s y. M cursor: default;% Z# s5 z& r8 l( S0 M
}: p Y" `/ v' f; ~) s& v. @: R& R0 }
5 i1 J5 E8 g8 A0 E7 P: `
#myUL li a:hover:not(.header) {! X; `# e. d) X0 q2 R, G7 i3 B) h$ {
background-color: #eee;: B( Q* ~8 Y! z8 Z7 G( R m- e% ^
}+ M; C+ C6 M- P
</style>
" @( W% K0 D3 `8 o</head>0 ~* c: B. G5 O7 k9 \7 u5 ^
, M4 H9 _* u: f; q8 `
<body>
7 z& `2 k4 W$ P. l4 _0 I8 f; |" ?8 {8 R
<input id="myInput" type="text" placeholder="Search....">2 [" [0 x, {; H" a4 [
<ul id="myUL">
( P( B3 M" W | <li><a href="#" class="header">A</a></li>9 X3 M, `' w0 r1 g0 H5 E- P
<li><a href="#">abc</a></li># @' G4 K( }3 u3 r; Y; w# \' b
<li><a href="#">abort</a></li>
7 L! E8 m: z3 k$ o <li><a href="#">abandon</a></li># X: A/ P+ l/ f! [2 V5 e
- T( d3 z: y5 {0 w" f
<li><a href="#" class="header">B</a></li>
. W/ H; e" b$ D <li><a href="#">baby</a></li>
6 S% a) l9 `( P* y" m" Y+ Q( Q/ M6 m <li><a href="#">bird</a></li>
. E3 }2 x) O1 y; V% M, ]" i <li><a href="#">bin</a></li>
: Q. F3 `7 d+ L4 f! z2 i; {$ `/ `, O; i# p" R+ L% y
<li><a href="#" class="header">C</a></li>
6 _3 d' H7 h/ R$ l' K' ]3 U( c <li><a href="#">car</a></li>
6 o7 J$ o* j( {, _4 D <li><a href="#">card</a></li>
( L# O, X* J4 Z# n& Z+ F <li><a href="#">cavans</a></li>$ Z8 p+ K3 N2 D- _/ m
</ul>
: C6 G8 I+ l! I
3 G9 e4 o5 M% y0 }" a$ E; P* V* t& h7 f. k7 c2 J" C! ]
<script> X, z. n( }" T1 v9 W
function myFunction() {3 n4 `0 @% N& T$ |0 K; v/ D
var input, ul, li, a
, N9 g% I. B, |6 f! B* I+ c input = document.getElementById("myInput")+ D# f- D U" Y8 F2 C* b
ul = document.getElementById("myUL")' [9 e# H) h+ G" s+ C6 z3 H( o
li = document.getElementsByTagName("li")9 K7 X" Z$ u& T: `* V- }
var inputvalue = input.value.toUpperCase()
1 e" l! T3 ]& h- X for (var i = 0; i < li.length; i++) {: m2 A% U q/ a1 B* @
a = li.getElementsByTagName("a")[0]1 W5 R" P& o3 q2 X( R/ L; |; x& y
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {; l6 V' A3 l! p( m/ {
li.style.display = ""
9 k0 h3 |( N$ l }
. j3 V( J9 N" ~ else {6 E! i. ?* g. E2 b0 S
li.style.display = "None";& t3 Z/ G' q( I4 r
}
. p3 B! b4 q+ T: k }3 Z# y( M1 c6 Z' M& H
}
5 l Z: I0 ~/ ^6 `* M2 B9 t k </script>) @+ y3 {8 M, c% M$ g& w% y# u
</body>( x Q+ H! V9 B9 ]: P. E
. b: h0 H" o, w. R
</html>[/mw_shl_code]- W- P9 t8 I Q2 w
|
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
