|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
# m9 Y. G5 O# @- [; G# w/ v! f
JavaScript 搜索框自动提示# |6 i @' F# l- _; ^- m8 o
4 N7 q" e/ X1 H) z
- }# K6 P: f. o9 m9 J" j- Z
1 D" W' `; |& d+ k0 x% g o/ M7 D0 r$ a: E' E% D5 y4 c
[mw_shl_code=html,true]<html lang="en">$ P& a0 o* K+ H8 Y
3 I) e/ ` W1 g% \) \) |& P0 [2 Z
<head>/ l3 Y% z% V5 M0 a9 X
<meta charset="UTF-8">2 h! m% x# h2 \! O9 b) c
<meta name="viewport" content="width=device-width, initial-scale=1.0">
, r% X2 c8 y- X3 M* }6 B+ G <meta http-equiv="X-UA-Compatible" content="ie=edge">) }8 X. d/ P n3 M9 l7 {; K5 S/ ^
<title>filter the value</title>5 F% N6 J* X/ ]
6 ]$ M3 }; x3 G8 ` <style>
' @7 h* e; U& ]0 M4 X& r: B #myInput {
) W- m) i& F+ S( q5 B background-image: url('/images/mix/searchicon.png');
5 Q4 v# M& B4 Y& Y7 P) T# g /* 搜索按钮 */: M$ L* m# U/ q# r9 I3 }, O1 Y
background-position: 10px 12px;1 f& B' [4 q$ t; g" c* l
/* 定位搜索按钮 */2 H3 E5 }8 e. l; }$ @
background-repeat: no-repeat;0 V" k7 L% c' N! [% k0 g+ m
/* 不重复图片*/
8 _& m6 P/ y3 P" z, T) W) P% i) r font-size: 16px;
) d: T7 R" |- ^ I# q width: 100%; w1 |5 |* a. ?8 o M/ j' J
border: 1px solid #dddddd;
6 T2 Q' Y, J$ _ padding: 12px 20px 20px 40px;- ?, g; a( d$ x; Z) R
margin-bottom: 12px;
/ @# L& I3 N& B% J3 O( v }2 R1 a, {5 A0 C+ W
& X6 f' ]6 I7 R" n S #myUL {( h' S1 R9 D3 O3 U
list-style-type: none;
, q) Y) B" w+ }" j8 s padding: 0px;
$ _) X+ h! Y7 P& z/ [# ^ margin: 0px;
+ L' J$ n$ w5 X8 x7 d/ g }# G' ^, @. w/ l
0 r. N& @$ ]4 U. d# E #myUL li a {, Q) u1 g- N! }- B3 A( y& Z. z
border: 1px solid #ddd;/ @' [# s% d$ @( M7 W% u
margin-top: -1px;" K9 R# Z) q/ J5 ~8 t3 e8 ~( x
background-color: #f6f6f6;
( [2 n$ b" V: n% j( O3 x% E8 `5 h* V padding: 12px;2 h: o o7 X& b' I
text-decoration: none;2 ~! |0 }: e- n# v
font-size: 18px;6 a6 f; ~4 O% i7 U3 @
color: black;
4 N( P1 J% z7 [6 g5 W+ m5 P% E P! G display: block;
- C( P9 F' j. |2 u- }9 F* i3 D, F }
' T7 @1 A+ z& S4 o% d) v, h
6 f' d% @+ _5 ]0 Z0 y #myUL li a.header {) M$ @# ]$ F2 }3 E
font-weight: bold;
+ Y+ f" v0 o+ D, h background-color: #e2e2e2;
% E7 o: Y: y! {. L- O/ x2 N" P cursor: default;. \) W- `/ O( r' C! M' j5 ^4 A
}6 B9 N# I/ b) j0 @2 ^
3 h- A, D( d" `$ {6 {
#myUL li a:hover:not(.header) {
8 G G- m( S i& A7 \ background-color: #eee;
' Y+ w7 J! ]" `) r$ Y }
1 y. r* m! C% Z! J8 Z/ h </style>5 e. M1 Z% B0 Z+ L, g
</head>- I( S7 }$ Q8 |9 ^( s% O1 F& q, D
4 G) f C& S' I9 [' _$ c3 G* g$ V0 v
<body>
/ p' T/ P Y/ \3 _
! \5 e1 B9 Q# A1 k4 B4 e' k <input id="myInput" type="text" placeholder="Search....">
2 [0 o% ~4 O) j! R9 G8 d9 X `6 Q <ul id="myUL">
1 a Q$ E/ S x" M Z8 S1 R6 R, ? <li><a href="#" class="header">A</a></li>
! t) H8 g: V. y) N) j# A <li><a href="#">abc</a></li>
' J8 [) J! u) o* i: ]& ^7 ` <li><a href="#">abort</a></li>+ [$ \+ a% X: O2 N1 j0 M
<li><a href="#">abandon</a></li>, s, b* X# A: w% x8 `
9 ^. ~. X6 R& [" s
<li><a href="#" class="header">B</a></li>
% _0 ?, a' Q x/ O# _, E) l6 ] <li><a href="#">baby</a></li>
& \4 E; P# Q: F% z/ a- ? <li><a href="#">bird</a></li>: v% O2 k! U+ J" }, w. V1 G% a
<li><a href="#">bin</a></li># v% G1 m& s* t- c: u
, A, \& y! }+ D4 M) ^& V <li><a href="#" class="header">C</a></li> \! ]) G1 b& q& h9 l* L" v* L6 F
<li><a href="#">car</a></li>
+ K8 b( U9 @) |+ v" E" W <li><a href="#">card</a></li># A( ~" F! n- W* q- C1 u$ k
<li><a href="#">cavans</a></li>
! P: D2 z. q0 k4 ~: r8 r </ul>, e7 a2 D- z8 ~
# C [, Z, f# A( |% ?0 z |2 @7 {/ J
<script>% r; W' q5 Q& a( X9 P
function myFunction() {" E$ a: m; p5 a+ \$ x
var input, ul, li, a
$ u, v, k, z2 t8 O' x input = document.getElementById("myInput")4 G/ {7 m( Q+ a) F0 p4 V6 z. y
ul = document.getElementById("myUL")
, K& O3 b9 d4 N2 L0 g li = document.getElementsByTagName("li")
9 d% [" t( O( \' J& N9 X, i7 g1 n var inputvalue = input.value.toUpperCase()
4 m; r- H; `( d F5 ~5 S1 @! V for (var i = 0; i < li.length; i++) {' x0 X8 U. o' t& }, ?2 S
a = li.getElementsByTagName("a")[0]* l. ~* f7 a4 c' p% c+ X+ J( E/ p
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
9 d! L, w* b/ `/ _ li.style.display = ""' R; J+ J' a6 @/ g
}* g% @5 z( Q5 M
else {
3 l+ {& `3 W# t li.style.display = "None";
8 w* P- h4 H8 _# M+ s }# J S6 D: V6 L4 N1 \; B
}
' N8 ^0 m( M( W; p }) k$ z9 T2 {! ?; _) X `
</script>
- S& Z3 }. s) r+ Y0 E7 Y" @</body>9 a0 u8 B( I! A+ {+ ^7 Y( Z
- \1 A3 O Y' {3 [; Z</html>[/mw_shl_code]
5 F1 u: `7 z& {8 t |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
