PLM之家PLMHome-工业软件践行者

[前端框架] JavaScript 搜索框自动提示

[复制链接]

2019-11-14 09:05:00 2123 1

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

积分
82166
QQ
发表于 2019-11-7 19:24:08 | 显示全部楼层 |阅读模式

请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!

您需要 登录 才可以下载或查看,没有账号?注册

x
3 o4 u+ E, s- J3 x" C/ W7 N1 l
JavaScript 搜索框自动提示
9 u2 y5 B! \- ]5 s4 Q, |/ p0 p; c4 T5 H1 C" W; |

, ], l) S$ X" P/ P. Q5 d+ j, ]/ e5 i; d  }
8 C7 Y! {: _; P8 d/ B# @" t
[mw_shl_code=html,true]<html lang="en">
& _* b4 a. J; H$ G  e) i3 I7 d' ~
+ q; `- m1 k) @, O0 b1 m<head>' x, a1 }" A) O( p& i# e
    <meta charset="UTF-8">" g& p7 B) s/ s5 g5 ]6 o- T
    <meta name="viewport" content="width=device-width, initial-scale=1.0">1 I" B1 e. |7 W5 Y4 u
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
% z% u, k. u# z% J    <title>filter the value</title>
; N# O/ W. r' I. C  X. ?4 H& s+ D- j; e
    <style>* U! z' O& w/ L; h8 ?0 u
        #myInput {( M& w2 i1 y, `) |( S1 w- ~$ ~3 d
            background-image: url('/images/mix/searchicon.png');$ j; f$ y& [$ W) `, C7 @7 m5 k+ L
            /* 搜索按钮 */' C! Z9 D/ e" h
            background-position: 10px 12px;
! E: L% O% L1 Q! x5 Z            /* 定位搜索按钮 */: V6 [& G: F' P# K! g
            background-repeat: no-repeat;
, Q+ d. h9 R" U4 O/ j# F) |9 G            /* 不重复图片*/% ^' {; U9 {% P1 H( S/ y4 g" S
            font-size: 16px;6 `$ B& R, b. f1 o
            width: 100%;( P. a+ i- l) Q  T+ D: m4 Y
            border: 1px solid #dddddd;+ V/ {  L9 i7 o" _+ G" Q, Z" x
            padding: 12px 20px 20px 40px;
+ p7 p* c! h$ \0 A9 {+ P            margin-bottom: 12px;
7 `( T5 N) g! Z# \+ Q0 S3 T& }  J        }' Q: T3 Y! C/ e7 G0 E' q

1 C. K+ w' q/ K        #myUL {
/ t  g- u  ~7 ^7 K: H5 B            list-style-type: none;
  P! Q1 f; H- S6 V* q" g& P0 R6 s            padding: 0px;
5 s! d- V& t8 A5 I            margin: 0px;4 n! z6 h; N, d5 i* Z. ?
        }
. @3 P0 h) t; P5 @
* |5 p. Q7 Q  O, a! w3 o        #myUL li a {
4 X, \0 |: i! [+ ^: H6 V2 f% @; d0 j' ?- i            border: 1px solid #ddd;: ]. ^5 [. O9 x
            margin-top: -1px;
1 `+ V2 j% O% z            background-color: #f6f6f6;; C2 |& g0 x/ s
            padding: 12px;% k! @( c/ _) M  y, ?8 f# X
            text-decoration: none;
" s8 }5 J1 v% f* \( a2 r( b9 }2 z            font-size: 18px;
+ I# ]& F9 R3 `- ~+ R            color: black;
8 u7 R( X8 Z0 x6 n8 P6 Z* X. m            display: block;+ o! C* |& `6 E  q9 G* f, K# I4 i
        }
: c( N& K9 H; f& Z
* y$ k- F4 j2 v( a4 V1 j        #myUL li a.header {9 M! j8 c. Z9 B/ a9 O8 J8 M! u
            font-weight: bold;
: j% X$ h6 ]4 B! V4 D            background-color: #e2e2e2;' g+ k7 Y/ t$ e
            cursor: default;
- m; f/ j# v" h+ T/ g1 G. a        }
- S% N' b% s* z: f- ^( U" j0 a. k. P7 r
        #myUL li a:hover:not(.header) {. c  S, [# s7 K" Z. Q2 r
            background-color: #eee;7 P3 m* Z- `5 S: Y
        }
( M9 s  a1 g5 z& W; Z5 W, v    </style>
9 K& W) f0 L4 t! C- Q7 |( j  |</head>/ F  Y: d& e6 R* F+ i4 ?
3 W0 W3 T; J! U/ A) \2 @
<body>
# o5 g6 S' K, E2 V: H( z0 A% j. ^9 R, i: T0 Z, u
    <input id="myInput" type="text" placeholder="Search....">3 e7 D( A) k# a, k
    <ul id="myUL">
& v8 E* Z( \/ [( ]. X3 y" a8 o6 Z        <li><a href="#" class="header">A</a></li>. Q% W% Y8 J1 V1 j
        <li><a href="#">abc</a></li>; ^2 G9 O/ P. c! ~" P9 h: H
        <li><a href="#">abort</a></li>( ]$ G  V7 L! C- U  _
        <li><a href="#">abandon</a></li>
0 b/ q, m! x8 I+ r( c; t  ?3 H# p# @5 B4 I4 |7 {% Q
        <li><a href="#" class="header">B</a></li>$ V5 B8 \' p  _; }$ ^" a, A
        <li><a href="#">baby</a></li>
, O$ I( C0 C2 h  Z        <li><a href="#">bird</a></li>
! b- n' P5 i( X8 f0 V4 [6 r        <li><a href="#">bin</a></li>
& R2 n$ Q% v& }$ I( h; d2 [8 @
% ~! m; }& {* k. d        <li><a href="#" class="header">C</a></li>
+ Y$ S1 S, j9 ]+ `. I* q9 u$ r        <li><a href="#">car</a></li>' q( t7 A7 ~5 Q. q1 t1 O" M) }( t5 f
        <li><a href="#">card</a></li>( U8 z7 ]% a0 `2 V3 X' g) N
        <li><a href="#">cavans</a></li>! O& T9 M1 r3 y7 V3 s7 `0 X
    </ul>
  b4 P( t) R5 e- H1 U6 Q7 I+ j6 V& B( w7 r$ y' e: Y
/ O- l' z( m, E- |# A# Z
    <script>. @, D& X/ O) {. k5 {! _; b1 ?
        function myFunction() {
( ?* K+ ]  N  A* ~            var input, ul, li, a
1 R! |2 x; @8 }# h! I            input = document.getElementById("myInput")
- x2 i' p6 f- z0 o( q            ul = document.getElementById("myUL")
) w( y# h: Z' c0 v& s' z0 W" D9 M- E* J+ o" T            li = document.getElementsByTagName("li")
8 s% W* j7 q2 ]' L2 L7 s, X  y            var inputvalue = input.value.toUpperCase()
/ a' Y& k0 q8 l' W  j8 O            for (var i = 0; i < li.length; i++) {
9 R/ \2 \8 T. m! J& b; ?, x4 K                a = li.getElementsByTagName("a")[0]# j% [+ K, c* K4 i% r; E
                if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
  W* H' K+ x& P  [4 n                    li.style.display = ""
/ }6 a3 L" f# S# x  k/ L' l                }
& ?' T* V' ^1 U1 B                else {
  l) Y% h: t  _5 q; [2 N. ~                    li.style.display = "None";
( \8 d# g  a6 e. x/ m/ e6 W                }7 h* r8 k7 A6 \) G
            }
3 h# G( X3 a5 ?, T& z+ {/ w        }
" u/ w: M! j+ w  S7 z    </script>
1 D0 i+ ~, H- f+ |# E* u. X</body>, ?2 t( ?" c0 K3 j$ R' r
; ^0 |  G( r: b+ }/ q
</html>[/mw_shl_code]
4 F/ }* A8 `$ C! ~
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

全部回复1

4

主题

65

回帖

1411

积分

钻石会员

积分
1411
发表于 2019-11-14 09:05:00 | 显示全部楼层
如果能把代码的运行效果用视频方式展示下,就更完美了
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.doteam.tech
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了