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

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

[复制链接]

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

admin 发表于 2019-11-7 19:24:08 |阅读模式

admin 楼主

2019-11-7 19:24:08

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

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

x
) D! _$ @) l0 H, p4 e
JavaScript 搜索框自动提示7 h( {4 M( }9 z5 w9 R/ o* x
, S8 n0 `! k1 Y( D, I  N

4 v+ D3 L8 G2 f; q; A" V4 a
8 i& C6 r, w. x7 v( S( V- a
  d. C" s4 k+ {6 Q  b6 E+ x. j# `; k[mw_shl_code=html,true]<html lang="en">! f' f! i5 t& Y0 y
0 [; x% a6 M6 d$ X" ]% U
<head>) J/ }; b; Y4 I5 X7 R/ o) ?& S
    <meta charset="UTF-8">
3 h1 r: h! A' z! _. L3 Z% q    <meta name="viewport" content="width=device-width, initial-scale=1.0">
: n( x9 J, }5 z6 |2 e) _% M    <meta http-equiv="X-UA-Compatible" content="ie=edge">
% `) G$ u6 j! t0 p9 m5 ?    <title>filter the value</title>
. ]0 d8 {. \2 J3 H- C& |4 i2 R% ~4 w$ I( N+ L/ l
    <style>
( ^# W, n2 i) ~. c3 K! s        #myInput {
+ B- q; M6 Z; E" L2 K            background-image: url('/images/mix/searchicon.png');
; b7 m: S" C: e1 M# _, C+ H/ @            /* 搜索按钮 */+ Z3 _$ I0 n9 P' y8 y
            background-position: 10px 12px;
# C3 L7 p7 j7 ^% ~            /* 定位搜索按钮 */
, S+ f% O9 \1 G            background-repeat: no-repeat;/ F7 k' T9 y6 k" v7 u
            /* 不重复图片*// e6 e% P8 s& `
            font-size: 16px;) _9 ~, d2 P  ^" b8 ~
            width: 100%;* [4 i' q+ i# q
            border: 1px solid #dddddd;
8 b9 n, D) g/ v3 S% o            padding: 12px 20px 20px 40px;8 B' `! f2 K, k# Q$ X5 x
            margin-bottom: 12px;4 e& s! N$ m5 s) q
        }9 D3 p2 T1 W0 k7 _8 v

. @1 I8 E* x% e' q1 _        #myUL {4 R# d6 ~8 l2 z2 s! _
            list-style-type: none;' r; U8 j$ y4 s9 e$ f5 Q, C/ \
            padding: 0px;
9 d8 t# m- o' E  B7 s) G            margin: 0px;7 K4 d  l9 M3 b. Z6 Z9 A
        }5 U& S$ x2 C, Z2 ~
; g/ A, c& y" L% O
        #myUL li a {
: ?, z6 j, k% M' |* `7 f            border: 1px solid #ddd;1 F* N1 O; q& D; h5 `8 m
            margin-top: -1px;
( t( w) E4 f9 Y            background-color: #f6f6f6;
% [- c: @/ F0 m% y3 P  _            padding: 12px;
! t' W) c0 I" W& x( X8 `1 S1 J            text-decoration: none;6 s- r: t9 v% |8 ^: ]1 g4 ?
            font-size: 18px;
% W2 z' k9 `5 P8 L9 P/ G( c            color: black;
+ f; M  q3 I; Z            display: block;
3 C* \" V, Z% A# t  K( M$ j4 C        }4 o# K' ]- X- }% ~

' ?. O& t3 R! H7 R6 z5 S/ [6 W: c        #myUL li a.header {7 J' g& s' I+ c6 P+ y( ^7 D
            font-weight: bold;
) M8 _; b1 ^1 P6 U  x            background-color: #e2e2e2;
4 l( e; s  y. M            cursor: default;% Z# s5 z& r8 l( S0 M
        }: p  Y" `/ v' f; ~) s& v. @: R& R0 }
5 i1 J5 E8 g8 A0 E7 P: `
        #myUL li a:hover:not(.header) {! X; `# e. d) X0 q2 R, G7 i3 B) h$ {
            background-color: #eee;: B( Q* ~8 Y! z8 Z7 G( R  m- e% ^
        }+ M; C+ C6 M- P
    </style>
" @( W% K0 D3 `8 o</head>0 ~* c: B. G5 O7 k9 \7 u5 ^
, M4 H9 _* u: f; q8 `
<body>
7 z& `2 k4 W$ P. l4 _0 I8 f; |" ?8 {8 R
    <input id="myInput" type="text" placeholder="Search....">2 [" [0 x, {; H" a4 [
    <ul id="myUL">
( P( B3 M" W  |        <li><a href="#" class="header">A</a></li>9 X3 M, `' w0 r1 g0 H5 E- P
        <li><a href="#">abc</a></li># @' G4 K( }3 u3 r; Y; w# \' b
        <li><a href="#">abort</a></li>
7 L! E8 m: z3 k$ o        <li><a href="#">abandon</a></li># X: A/ P+ l/ f! [2 V5 e
- T( d3 z: y5 {0 w" f
        <li><a href="#" class="header">B</a></li>
. W/ H; e" b$ D        <li><a href="#">baby</a></li>
6 S% a) l9 `( P* y" m" Y+ Q( Q/ M6 m        <li><a href="#">bird</a></li>
. E3 }2 x) O1 y; V% M, ]" i        <li><a href="#">bin</a></li>
: Q. F3 `7 d+ L4 f! z2 i; {$ `/ `, O; i# p" R+ L% y
        <li><a href="#" class="header">C</a></li>
6 _3 d' H7 h/ R$ l' K' ]3 U( c        <li><a href="#">car</a></li>
6 o7 J$ o* j( {, _4 D        <li><a href="#">card</a></li>
( L# O, X* J4 Z# n& Z+ F        <li><a href="#">cavans</a></li>$ Z8 p+ K3 N2 D- _/ m
    </ul>
: C6 G8 I+ l! I
3 G9 e4 o5 M% y0 }" a$ E; P* V* t& h7 f. k7 c2 J" C! ]
    <script>  X, z. n( }" T1 v9 W
        function myFunction() {3 n4 `0 @% N& T$ |0 K; v/ D
            var input, ul, li, a
, N9 g% I. B, |6 f! B* I+ c            input = document.getElementById("myInput")+ D# f- D  U" Y8 F2 C* b
            ul = document.getElementById("myUL")' [9 e# H) h+ G" s+ C6 z3 H( o
            li = document.getElementsByTagName("li")9 K7 X" Z$ u& T: `* V- }
            var inputvalue = input.value.toUpperCase()
1 e" l! T3 ]& h- X            for (var i = 0; i < li.length; i++) {: m2 A% U  q/ a1 B* @
                a = li.getElementsByTagName("a")[0]1 W5 R" P& o3 q2 X( R/ L; |; x& y
                if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {; l6 V' A3 l! p( m/ {
                    li.style.display = ""
9 k0 h3 |( N$ l                }
. j3 V( J9 N" ~                else {6 E! i. ?* g. E2 b0 S
                    li.style.display = "None";& t3 Z/ G' q( I4 r
                }
. p3 B! b4 q+ T: k            }3 Z# y( M1 c6 Z' M& H
        }
5 l  Z: I0 ~/ ^6 `* M2 B9 t  k    </script>) @+ y3 {8 M, c% M$ g& w% y# u
</body>( x  Q+ H! V9 B9 ]: P. E
. b: h0 H" o, w. R
</html>[/mw_shl_code]
- W- P9 t8 I  Q2 w
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

全部回复1

Frank 发表于 2019-11-14 09:05:00

Frank 沙发

2019-11-14 09:05:00

如果能把代码的运行效果用视频方式展示下,就更完美了
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复 支持 反对

使用道具 举报

发表回复

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

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

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

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

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

    我知道了