PLM之家PLMHome-工业软件与AI结合践行者

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

[复制链接]

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

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

admin 楼主

2019-11-7 19:24:08

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

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

x
6 w4 p5 k2 Y* C) v
JavaScript 搜索框自动提示
! \# j3 `$ @% L4 c- M$ v: d" T6 C  r# ^0 ~$ i6 |. O

" Q# T( B: M; @3 l8 t+ C6 C, ]: R& v* Z. U' c

8 y# O8 ]0 y6 @% J[mw_shl_code=html,true]<html lang="en">
1 v5 x' l9 {# e# d  n4 z6 q5 k7 k
) V0 k  J$ \5 S<head>3 S* G: t( M% U6 i6 S, t( t( t
    <meta charset="UTF-8">
/ M* r- d' t/ A    <meta name="viewport" content="width=device-width, initial-scale=1.0">- Y( S1 j6 ?: \  p# }+ b
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
: `. ^* p. }9 W/ H  I- q    <title>filter the value</title>
" F) c! x  \, U6 ^# w; a/ e- h- ?2 D* S7 o1 z; C
    <style>, I& W* s/ _* Y8 ?& S7 t  M$ {
        #myInput {
9 U, ?% {( c" k0 Q5 K+ O            background-image: url('/images/mix/searchicon.png');4 t* y5 V* l$ B- S( [0 E$ f
            /* 搜索按钮 */
/ |7 D& l! O% Q; {8 q; W- _. \            background-position: 10px 12px;
: W4 _5 R; k/ r7 @            /* 定位搜索按钮 */
) G- f1 Y+ G  |) {            background-repeat: no-repeat;
, l) ~! u* ?2 k2 T0 \4 i            /* 不重复图片*/0 Z3 P% r( m' t# ^  _  L% K6 B- h
            font-size: 16px;) k) J1 u" C- c) A/ N
            width: 100%;
/ z' L5 T9 M$ {4 s            border: 1px solid #dddddd;
) [8 S  q- B' I0 P0 w            padding: 12px 20px 20px 40px;5 P5 s  _# `8 k
            margin-bottom: 12px;# s" k  w1 d" p" ~: Q4 Q+ s
        }" ^* \3 x: G/ I3 ?

" u6 t9 X; J3 I# k$ d- ~6 W        #myUL {
/ ~# D6 T' I7 \# S            list-style-type: none;$ o4 s& M9 m/ m. N- S
            padding: 0px;6 R0 T/ S8 o+ l7 Y4 o. _" W. T
            margin: 0px;
* N* L5 b- X$ w* H8 M! A        }
0 T' c6 |7 m  _7 C" h3 {+ Z! e$ t' |8 _) }9 L0 R6 P% T% o6 V
        #myUL li a {+ Y  ^5 V! ?- B2 V
            border: 1px solid #ddd;. H! @! ?( V; O
            margin-top: -1px;
* ?2 V( o: g% o% d( n; z            background-color: #f6f6f6;# ?) y* n7 Y+ r2 [9 ^: z/ ~
            padding: 12px;
6 n, m% P% J: L( T% K            text-decoration: none;
# s; A! @4 R9 d1 p! k, @            font-size: 18px;
% @+ y* j: u$ q4 T7 j- P            color: black;
9 B$ z" H2 s! ~* d: a* }4 D1 \            display: block;+ m. l6 Y7 P# W7 @
        }0 E! H+ ]* b: C/ [! l

9 i/ P4 H; ]4 m# U& X: u        #myUL li a.header {
9 R) }5 M1 a. {- {7 k; E6 @! ?            font-weight: bold;
) p7 b  C: O; k/ O: r5 h# d% i$ P            background-color: #e2e2e2;& _( @. {% Y* ]/ F+ ]: c9 ~3 w0 g2 |: L
            cursor: default;
) D) G2 r  D# j        }
  N  `( R) S* Z) N/ U
' E+ u3 r# K  I9 E2 K( X% j        #myUL li a:hover:not(.header) {
+ ?- }; w. E. O3 j5 k            background-color: #eee;
# p) c3 }; n* |$ a7 Q6 c2 d# q        }
. d, c8 z2 l' e/ |; p, W& x    </style># e" Z+ ]2 y. Z# V
</head>/ R* F+ L! l( q: G; E" R% b$ j
' w6 `( {0 v; J$ ]. ^
<body>4 O. t# B! g' l& N2 E* S. d+ j2 z
: Z  M) ]5 F0 ^1 ^; ~
    <input id="myInput" type="text" placeholder="Search....">( y) H1 L- I% i7 W- G
    <ul id="myUL">
: A# |) I8 d) X" u% k6 P! ?        <li><a href="#" class="header">A</a></li>5 r2 r6 _2 G. k" ~* X) }; F: I6 h
        <li><a href="#">abc</a></li>& ~* I" p" @6 v3 w, `- @. P
        <li><a href="#">abort</a></li>; K0 a6 @( a# C0 e* F
        <li><a href="#">abandon</a></li>
" R, P6 J; M" h6 R0 n  ~+ M/ l2 \% T: l/ o6 p7 K, U2 z9 b7 f& S
        <li><a href="#" class="header">B</a></li>
( ?6 L2 n5 X, n1 D        <li><a href="#">baby</a></li>
4 [7 |, i1 e, Z! @4 I% {! y        <li><a href="#">bird</a></li>& T! {9 j9 m/ z- w3 L
        <li><a href="#">bin</a></li>
. E* G. c; e5 a0 F- c1 s# D$ `* b5 k5 U% L- @
        <li><a href="#" class="header">C</a></li>
# ^# J6 {& N+ o( ]. L1 W' `2 a        <li><a href="#">car</a></li>
3 K1 R* J  b" g" V* Y        <li><a href="#">card</a></li>- _$ U. B& l6 ~
        <li><a href="#">cavans</a></li>
/ U8 V3 o8 v% b, Y/ v3 ], ^    </ul>
. T# ]5 I: J! K& T
. `3 r* |4 G5 N# q; {* S' z7 [$ p$ L% f
    <script>
0 U, J8 ^, C- w# Z. f* ^3 I, [! {( f        function myFunction() {
& @: X/ N* p7 R$ X            var input, ul, li, a
9 }/ w8 k5 q# k& ?( \6 x& O            input = document.getElementById("myInput")
) k. r5 T0 Z' D* s* A8 Q$ m            ul = document.getElementById("myUL")5 ]' [4 O) R4 _# Y& m1 L8 \& q7 ?( P
            li = document.getElementsByTagName("li")" G, f* D0 `! o2 u8 d
            var inputvalue = input.value.toUpperCase()1 s# L& ^  E- @1 E- Z, n
            for (var i = 0; i < li.length; i++) {* @7 l7 l5 `& _
                a = li.getElementsByTagName("a")[0]
7 A$ Z# _9 j) w" r                if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {9 E2 R) e( O) e; B
                    li.style.display = ""- M6 d) L. V( X
                }
$ R8 z- w6 c. L% A                else {
: W9 }: s% a- _/ Z- k) ~                    li.style.display = "None";# s. r! W  Q  f+ ^, u/ g) P1 z
                }
! C! H8 L! G# o: n9 n/ G# V            }
( V% ?6 @2 d$ ]9 ]        }
, S3 C% ^2 r8 N) x    </script>3 o5 P. b. C! b; d$ ~' Z
</body>3 m& t% P: `4 F* m5 b6 j
. J# p% f$ ]# S/ F5 K1 C
</html>[/mw_shl_code]

  j7 E# r9 }  V1 H, C
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了