|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
* I) D0 T8 Q: q! @* [
JavaScript 搜索框自动提示
1 U# {9 Y/ \* b' d. l
& @* I- M( r9 S# L+ D' @: g
0 X! P" I# ^: t9 b D" p& X( Y
: F5 V6 M4 r) Q$ W5 Z/ y5 s1 [7 x- i( e3 c3 [; t% s7 ^# w8 B
[mw_shl_code=html,true]<html lang="en">( F o. v6 W# [
/ C* r: u* \" ? T
<head>/ ^; ^; t& Q" y/ I
<meta charset="UTF-8">
' M4 B- S5 I1 p i: [3 _/ \6 a: t <meta name="viewport" content="width=device-width, initial-scale=1.0">
; k& }* Q& r( R f/ `* j8 N <meta http-equiv="X-UA-Compatible" content="ie=edge">
, M/ k' F( W8 |, B5 f' f: C- u <title>filter the value</title>
+ \0 u: y6 x a: V' V0 T
+ ]' N ~8 c/ ?% m- s# B <style>
- F- l+ c) s- C2 S* d: L #myInput {
, n% A$ \& D) q) Q background-image: url('/images/mix/searchicon.png');/ b, Z5 X6 g6 C4 w9 n* d& S; f' t
/* 搜索按钮 */: A( _; z/ `7 r6 E
background-position: 10px 12px;
; ~! g% t: t s$ @% U /* 定位搜索按钮 */
: ]! {* f, U6 C" I; d9 r background-repeat: no-repeat;
) o) k: }6 S& s /* 不重复图片*/# d; U2 f+ A# i
font-size: 16px;: R9 }1 V7 Y1 ]- n. J3 p
width: 100%;% u' Z' o: u( @0 [" [7 M
border: 1px solid #dddddd;8 l( X8 ], d. ?1 Q7 X9 w
padding: 12px 20px 20px 40px;
1 ^6 c& L7 a7 X$ [+ [9 r margin-bottom: 12px;
^+ W7 O6 s+ v2 r }
; ^$ r9 H# c0 Z/ w8 W8 [
& }3 H0 b% }# m2 ?" _* E #myUL {1 k) W( v- ?+ E% _! D
list-style-type: none;& U8 c1 l2 r) I; m' G* T/ N; ^
padding: 0px;$ ~- |0 L1 \; \+ m) G) H# q# m
margin: 0px;- \% b+ Z7 j2 n# i6 h% _5 ]9 u
}
, L& C6 C' \7 _6 A7 |% Z8 ]. I6 |7 }
#myUL li a {* D4 j: d* E7 Y7 T
border: 1px solid #ddd;
0 U' P1 Q0 u# H6 N. o margin-top: -1px;
. I9 Y% n5 `1 ?/ d8 { background-color: #f6f6f6;
) }6 G2 _, `/ R- a4 N padding: 12px;
" S* s: e$ q) } F text-decoration: none;# h: O9 U1 u0 Y. K+ ]9 e
font-size: 18px;
6 Z/ E9 t1 ~/ q* r/ T# _ color: black;0 k4 l: j/ P# A
display: block;$ ^8 h- k' z+ j* C' |
} `5 X! E$ W% h$ X+ C/ P0 r: | Z8 x
4 k6 b% z; ?+ ?$ T {1 g( z
#myUL li a.header {
8 @6 t/ m* x3 T/ o* r font-weight: bold;+ P9 ?3 M. F2 M8 z
background-color: #e2e2e2;0 I6 i8 a" o& v
cursor: default;9 s5 u4 W- C2 q7 k; F
}
, S. w) z0 H5 S' k
: ]0 [( K) w+ ~ #myUL li a:hover:not(.header) {
' k4 X% Y: |' ~8 v& m) Y7 ` background-color: #eee;
L0 k, Y) t6 |- b7 Q }
- N' J' c( I* V M" q( y) a; T </style>
# s) x( z5 s# o7 J3 Q1 g2 p</head>
# k" M. G1 F+ z" v6 \$ I+ H
1 h* n! l# _' B<body>6 A* d( k7 G# b9 |8 _) H7 g7 C
9 r) ]2 q% m+ E. V9 Z# T <input id="myInput" type="text" placeholder="Search....">
4 l. f9 w3 g- |: b F <ul id="myUL">' }% g! e% H& U! y+ Y- q& c: g
<li><a href="#" class="header">A</a></li>
: w3 T6 Y4 w# e$ ]7 B <li><a href="#">abc</a></li>
! `: ^9 r C, }) p% k <li><a href="#">abort</a></li>
! _) L6 ^0 X( z0 C1 i* Q9 M <li><a href="#">abandon</a></li>
1 o ?; V: l) O! X2 Q$ O8 p
5 r2 f# x. `/ z: X, _ <li><a href="#" class="header">B</a></li>' H! X4 I. N) t8 h
<li><a href="#">baby</a></li>
- C2 ~0 Z% {/ c* G6 ~ <li><a href="#">bird</a></li>5 E0 U) t$ X6 l( { j
<li><a href="#">bin</a></li>
3 G* `% I' V; T6 Y! `
8 q# Q7 l# V, @8 `# d <li><a href="#" class="header">C</a></li>5 r, e' L0 e ?: q- }! F
<li><a href="#">car</a></li>+ |" v1 F/ W) L& H4 b
<li><a href="#">card</a></li>
; e" J2 m7 x- y5 h; k6 B& B <li><a href="#">cavans</a></li>0 \/ V. B. J, t) l! X6 A j
</ul>
' M8 T0 x# w( ]" X5 \2 l& j5 e. Y9 h X
1 r: v$ Z$ e; u% g4 b5 V
<script>% @- v* X" q0 W
function myFunction() {
& k! T! U# n3 x) D var input, ul, li, a: U8 U0 k$ y" P) v
input = document.getElementById("myInput"); k5 x/ B. ~0 a
ul = document.getElementById("myUL")
3 u9 ~6 }% N; S: Q% j" v li = document.getElementsByTagName("li")$ ]6 B& B* l* R: @/ r4 |
var inputvalue = input.value.toUpperCase()
2 z$ B4 w4 ?, o/ l" E( `. z) a for (var i = 0; i < li.length; i++) {$ R! x; |6 i6 s( R5 N* {: y
a = li.getElementsByTagName("a")[0]- \5 p _0 ]6 X Z1 _7 O
if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
! h5 o0 k% i; n- a' E/ L: c- G li.style.display = ""; j/ r. X. U- d; w
} `! ]3 W8 w M& B/ t% x
else {
, W5 }( I, @$ B' Y! u" A" r li.style.display = "None";
: u. D9 {$ ?' O& G4 X8 F' } } a: X' I }! V. I; F
}& s% C' t5 [! r- f. t, @
}( }) o7 |9 v: M+ @3 y+ ^
</script>) g. l2 o) P" e% g
</body>: t: A% ]- K! M- e: N1 }" t
7 g5 ^6 K8 J5 y; z3 ]
</html>[/mw_shl_code]
X# `- H: u/ d7 J |
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
