|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
; j& l+ _3 ?2 [1 }# `/ o4 f2 H; V5 @JavaScript 搜索框自动提示6 k# v8 T( k; B: ^# a3 H* K3 y
7 w2 O7 X" w* z# _' p2 }+ C# K0 @
# I# Y" T# ]- u2 T i
; z5 b/ Y4 h: q3 b. c# ^[mw_shl_code=html,true]<html lang="en">, x6 u4 e7 P7 z- Q
; A1 c, W: u% j; |" x$ J
<head>
/ l, `3 l. t7 s A' p <meta charset="UTF-8">+ u! ?: V; Z2 f+ O ^4 s* r
<meta name="viewport" content="width=device-width, initial-scale=1.0">
# z0 e# d1 y. L <meta http-equiv="X-UA-Compatible" content="ie=edge">6 K0 t1 y) N4 X+ C
<title>filter the value</title>
5 L# |( D j4 b( h! G# u0 L) k
) I* Q# x% J9 | <style>
: o- [4 Y; t! F0 T #myInput {, a. o" V( U4 E- n9 _
background-image: url('/images/mix/searchicon.png');5 p T: K) n2 h1 a7 L b1 T, U# m
/* 搜索按钮 */. A3 A& \$ z0 [6 P
background-position: 10px 12px;
$ R. b4 U4 H) t2 b, F) L /* 定位搜索按钮 */1 w. b' V, X# K- `9 b
background-repeat: no-repeat;
9 X* o0 Z1 n; `& n /* 不重复图片*/) g/ v' J; M4 F9 c& [
font-size: 16px;
" b. [! Z/ {$ b: {1 R width: 100%;0 n6 c7 \) i: k# e* A
border: 1px solid #dddddd;# ^6 Z0 Z2 `4 c3 B& D
padding: 12px 20px 20px 40px;& K2 \7 m* M' c$ m( d& [: h
margin-bottom: 12px;4 K2 i: X! d/ ^. Y7 L* @3 ?
}- C7 u4 H* A( _/ n( j9 K& b
7 ~& k: s: ~5 F0 ~' I0 P6 f #myUL {
' {6 U) l# O, H6 |2 |$ T7 f list-style-type: none;; `% X! A8 U8 W2 k6 M4 |6 v5 \
padding: 0px;
. o8 e' O/ l2 s: D1 S margin: 0px;4 O" L* K5 U. |5 I* A
}
# P7 J" a8 P d$ w4 w1 z
, V) |- _1 Y& M, L #myUL li a {+ _! b: @ k* {
border: 1px solid #ddd;8 A v0 b: `1 }6 C( V
margin-top: -1px;' M( p4 Z K- q5 k( @
background-color: #f6f6f6;7 t9 Y+ f7 v, V5 t T s9 Z6 R
padding: 12px;/ d D/ \$ Q& i$ z) u, d: V5 O& r
text-decoration: none;
$ O' m' o8 p, D& e' ]% L! k font-size: 18px;- }: r9 i9 J% v) [- t9 ]+ F
color: black;
% _+ Q* ]/ z6 b6 a! r display: block;
5 a- P2 u3 H* ]% N% k }8 m7 I& n) `9 I- [0 V" v' F
; F! J* Q3 A; L7 m
#myUL li a.header {1 Z' ]' c, c" w0 {' o
font-weight: bold;
; ]- b! C( i1 ~% f9 X background-color: #e2e2e2; S0 x, @ g; G+ Q0 X
cursor: default;& F# P! ?/ E% o, G) x% u! W
}. b$ h! d# | W3 q1 i( [) H+ Y
& h3 A. H0 ^* \6 M! z& W
#myUL li a:hover:not(.header) {6 R T( g: p, m- K; _2 g( f
background-color: #eee;
6 |/ a; n: |6 }5 Y- B3 ^8 A+ Y }
- i; Z9 B# N P2 |$ j </style>+ P5 D) y+ o2 o2 A+ Y. v* _9 A. I
</head>
" |5 W5 N# n& q) z* f! l# J' }' z& _- e6 w" ?0 ~+ U
<body>8 n3 B; A4 K% r# S) ?4 l2 A
/ P6 M5 S ]2 B* c! |( h* R* Y <input id="myInput" type="text" placeholder="Search....">: Y: g6 _. F7 ^5 c! h
<ul id="myUL">
$ y0 F7 [, s) U# C0 |1 |- P& I Q <li><a href="#" class="header">A</a></li>; V. y) v8 e+ J
<li><a href="#">abc</a></li>
) E0 h3 L4 l# d# I, P, Q, o7 o <li><a href="#">abort</a></li>( ~1 F$ S( p) c R
<li><a href="#">abandon</a></li>" I* X6 y8 p+ z6 x
. k: e$ u& [, b0 K3 z" v1 N6 F <li><a href="#" class="header">B</a></li># z6 F |" w( z( w5 |+ W8 H/ t( U
<li><a href="#">baby</a></li>
2 P! [5 y" D, ? h: x- H4 e+ I <li><a href="#">bird</a></li>* n$ Y# }2 h( F' }) D3 s
<li><a href="#">bin</a></li>
1 G) L" q# K! n; E) A& v: b0 w) g5 n0 {0 ^
<li><a href="#" class="header">C</a></li>& L# l# z: K0 N- t
<li><a href="#">car</a></li>" w" R- m4 `/ g7 h+ B* }$ G6 w. H
<li><a href="#">card</a></li>
" u& M* D; \$ z3 O. n) ^ <li><a href="#">cavans</a></li>- G3 O$ N1 w9 A- A0 N
</ul>
: k* ~2 ]9 e S! Q6 R5 V( @! r0 A0 s- I# a ^3 {2 t* Y1 h
* V) C( J {* W% K, V: \6 x <script>
8 ~! L/ \! H! U7 I% E4 D function myFunction() {
w! S# q K: n- S$ H# F var input, ul, li, a
|. w9 D" B, W+ d+ s input = document.getElementById("myInput")7 o; V) b% D* H
ul = document.getElementById("myUL")6 H8 a4 c: m8 }* V
li = document.getElementsByTagName("li")( q5 _( F5 T! M
var inputvalue = input.value.toUpperCase()
3 s, K+ j4 u* d9 D1 } for (var i = 0; i < li.length; i++) {/ V6 E6 t/ u Q. ^( U# G
a = li.getElementsByTagName("a")[0]
h, d3 ?+ A: Q5 v# M6 o if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
* k* s3 u- b9 N li.style.display = "": v" l+ c9 P: A. i6 f; h, ]+ u
}
& B- X2 |3 U; Y/ N else {
5 m6 p0 K' B s/ u li.style.display = "None";# @3 H% m+ b) j, M. z' n
}# D3 g% S9 j: z( x9 B
}
6 O7 s) d/ t1 ?5 ]9 G/ o }
! H ]0 M2 A& A+ S8 N </script>8 `% T b) t# q& s
</body>
' U7 K1 ~( f5 }7 ?. X. Q$ \; p+ r1 O7 l/ U
</html>[/mw_shl_code], ^) }% p2 f3 _4 C7 O8 T6 c/ k$ r
|
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
