|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
8 @8 F* V( ]# b. C. g
JavaScript 搜索框自动提示; Q0 [( G2 X y; X4 U; t% h3 N: d
, ]! b8 [; t, y* z4 C7 y; U! |" \% J) c' o" P$ Q1 a
( `# Q1 H% e8 b( z& A
/ {$ A! T; V3 M
[mw_shl_code=html,true]<html lang="en">4 k' H" L- P; U% M/ e9 a
, f/ x- W# ?5 s3 K
<head>
" t |) ]6 s* x: j( c6 j" c% O# S <meta charset="UTF-8">
& v/ `3 I3 p2 \4 J <meta name="viewport" content="width=device-width, initial-scale=1.0">
2 o2 V' @3 V6 `! b <meta http-equiv="X-UA-Compatible" content="ie=edge">
; {8 b# ?7 h) i <title>filter the value</title>
0 a1 G6 Z5 m- M0 ?+ H
4 Y+ c9 R4 k8 F9 H5 o: a <style>
, l. T3 u/ S+ C& g4 E6 f* D #myInput {
& \* j* d d; n background-image: url('/images/mix/searchicon.png');
1 F! R b3 c& y% s. Y9 `# I /* 搜索按钮 */
8 t# i A4 f8 g( _ background-position: 10px 12px;( c4 F+ d9 {$ c
/* 定位搜索按钮 */
6 ]$ f" q# y, U* H6 R" N background-repeat: no-repeat;
5 d: h# H$ C [; } /* 不重复图片*/
, _4 V& E8 {+ y1 M5 ^5 B4 m) H font-size: 16px;- J0 Y) q. b% v9 V0 F
width: 100%;; s/ _7 ?$ }5 y) r6 J
border: 1px solid #dddddd;
5 k9 Z0 O; H; h) e# y: \ padding: 12px 20px 20px 40px;
5 f; p; J$ K1 q h$ \# S margin-bottom: 12px;0 V" k4 v' p1 T1 W
}- V$ ]- ^* A9 i+ h
9 g l/ V6 W! E- e2 u; A
#myUL {) S5 g' b1 C7 o- ~
list-style-type: none;
5 k2 C- j! P/ [; I: t+ _1 r3 ?+ V padding: 0px;9 y( X# h( ?! N9 I- v$ Q* L$ E! O8 B
margin: 0px;) ] z5 X; V; X# ?
}
/ n9 ?5 V7 J2 d; O8 H6 }& S3 {. M8 h/ l( F5 D; z! J
#myUL li a {: T+ h8 L6 P, B: k W' u! G/ g
border: 1px solid #ddd;
% j f8 o2 Z( I: |7 S3 N margin-top: -1px;) r( ?& @; X5 w& I3 W" p
background-color: #f6f6f6;+ A# J; r+ v3 k' E
padding: 12px;
7 G3 @2 ~6 @% `+ R" `7 t' t text-decoration: none;
3 r3 g6 P, q# E font-size: 18px;: z* I- H, h/ ?7 V
color: black;
, A/ h2 i9 K5 Y: Y' w" l display: block;
2 h- e$ S5 |# W8 @ }9 I( G! \ ^, ~+ T% U# S
. n8 y3 H8 p" y( T% z2 r& d6 Q #myUL li a.header {
0 O6 O! f& d: `1 b$ l8 [ font-weight: bold;
$ |! T! X2 O5 {. P/ o/ i- V background-color: #e2e2e2;
1 F7 J2 g. ~" [" J$ X+ W cursor: default;; r* f7 A# A' {# Q- \# B1 R: d
}! c* Y* Z& c( X
9 K' o8 g4 Z' |" ^6 R #myUL li a:hover:not(.header) {
, @: m* K% q4 ? A background-color: #eee;. p$ ^/ S, Q U: U
}4 [7 q7 o/ h _! L; t3 S* k
</style>
' S/ {9 p& z% o. {: w</head>
, v3 ^4 _ W! H" e% }5 D
/ C/ _8 t4 z4 {/ E<body>. W" y* e7 J3 f% }, C5 L
! N2 {% P% _: @$ i6 ~; C <input id="myInput" type="text" placeholder="Search....">
$ |/ l+ O' c2 Y <ul id="myUL">
! a/ m! b# g& C <li><a href="#" class="header">A</a></li>
' V/ K* {# v2 D+ D1 `. a$ k <li><a href="#">abc</a></li>5 J: Z! L8 ]+ T; x1 ?
<li><a href="#">abort</a></li>
" H! X6 u, ]1 S( J; {: G6 J <li><a href="#">abandon</a></li>
+ _! a4 C8 v7 m H- S: U+ m6 C4 W; @( |9 n4 C F+ c
<li><a href="#" class="header">B</a></li>1 v- h' X+ H0 o6 u' @. q6 N; o; j
<li><a href="#">baby</a></li>
( B$ L W; J& z, H <li><a href="#">bird</a></li>* ^# M' ~9 x* B) S$ G9 m, s# i. k
<li><a href="#">bin</a></li>
: v& i# \2 V' n8 d r; l. P
" a! H$ A6 S0 R1 u2 x! ] <li><a href="#" class="header">C</a></li>, K' [5 S" r& a
<li><a href="#">car</a></li>
7 S/ L) Z4 N! Y; f& `+ a <li><a href="#">card</a></li>- Q8 r) A6 W1 D+ @& _
<li><a href="#">cavans</a></li> U- R/ S) N5 S* z0 g
</ul>0 S( n7 X/ ?2 \. V# R$ H# P2 s
9 h. H8 y# X- ?8 d. w! h
& x2 X' ~) e+ M1 b! Z" `
<script> ^1 |* B+ o {) R
function myFunction() {: [7 Q' U F1 C7 v& T- @
var input, ul, li, a
2 _2 S s/ u( S& h1 M8 Y input = document.getElementById("myInput"): X/ c% s. O i- a$ ]# |) L7 R) f
ul = document.getElementById("myUL"): n/ Z: L6 A/ N9 f# w' @
li = document.getElementsByTagName("li")" p& U5 X% w, k Z( o2 L( w
var inputvalue = input.value.toUpperCase()
) _* F& P$ @; a1 Y% t# b! z for (var i = 0; i < li.length; i++) {
; b# e! p" K- Q a = li.getElementsByTagName("a")[0]" b* P$ L7 y7 K! \, @2 N5 p* H
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {) j7 w5 O4 I5 M U; } k6 ]
li.style.display = ""4 x3 @ d! z: c# k/ e. ?& a
}% |" o: P' {7 W; L" q
else {& r5 B- N/ T( K$ p' m
li.style.display = "None";
+ U w# P! g9 I; G }
- J5 v( [5 [' O. m/ ` }
) Z B( Z: W, A' X# X3 z } }
3 }# ~( n) N h" @5 o1 J$ q5 [ </script>
% I8 P, F0 \9 ^/ C</body>
# m" M( ?0 w0 O1 Y% n9 n# i7 b
, o+ h' T: c$ l5 N, q- T% W</html>[/mw_shl_code]* \ Q; t9 w& {% R @
|
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
发表于 2019-11-7 19:24:08
发表于 2019-11-14 09:05:00
