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

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

[复制链接]

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

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

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

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

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

x
, m; F: C* g5 O; \9 b* g( [
JavaScript 搜索框自动提示
1 y6 t7 m! y  _4 `9 s& f
, ~% J8 _6 w+ q0 J; i0 M) a3 k5 y* K  e" c! H, H

0 W% v1 l. g& @2 t( b4 I
) {/ r3 u' K/ y$ R8 ?[mw_shl_code=html,true]<html lang="en">* }) Y( Y) r  Y. X8 t; e
* R0 f7 x5 i  Y# f( L3 R, H
<head>
; ^. d# f$ W" n" l    <meta charset="UTF-8">0 ]1 P& w6 G; X
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
) `+ ]8 s& A( e3 P. a, L    <meta http-equiv="X-UA-Compatible" content="ie=edge">8 p2 w) ]4 O  d0 W: H' y- d
    <title>filter the value</title>
$ g" ~: W* ?3 a, S8 G5 x
" ^- _$ T- ?9 u' f, Q5 [# w% q    <style>
1 @& ]) w4 N+ [+ p9 D5 }+ A        #myInput {
6 t3 a9 z* g' h- H- w9 U  Y            background-image: url('/images/mix/searchicon.png');0 L+ |8 `8 k- a
            /* 搜索按钮 */
( g) }) o) y3 Q7 M            background-position: 10px 12px;
4 F( s1 w. ^' I- o; A: o. V: V            /* 定位搜索按钮 */
/ X. \" t3 }. V. S# Q" E+ ~            background-repeat: no-repeat;
9 O$ J5 ^6 m1 s; N$ o/ `            /* 不重复图片*/' W+ q. T1 ]7 _3 {
            font-size: 16px;
0 n" Z" H9 Y- [- [            width: 100%;
1 {5 Y, c8 j  G/ r7 y            border: 1px solid #dddddd;
4 _  B; |: J, P  m8 x7 k' k            padding: 12px 20px 20px 40px;. W& w" ]* J2 X! Z" B' l$ n
            margin-bottom: 12px;
* A6 c9 x0 @/ T) ?, S2 v        }
" Q- n, p5 t; }$ b+ H5 |2 w1 \- T0 `% G4 k6 p/ p
        #myUL {3 `1 j5 n6 s6 B) T
            list-style-type: none;. r8 l: W+ K5 J$ J+ Y0 T
            padding: 0px;
# N5 C( v4 A3 v! u+ I            margin: 0px;* U/ s- l$ |% t/ J. V9 v
        }# I1 R, Y0 F0 e: h# Y3 I' G
1 A2 w0 t3 g" ]: N! h
        #myUL li a {7 h, G+ @7 S" S0 h' V# I3 H* x
            border: 1px solid #ddd;5 }' {& s5 a# D6 h6 a+ o' T
            margin-top: -1px;" W! K0 u! z/ ]6 U8 U
            background-color: #f6f6f6;% I. [+ `6 U* s# m$ @
            padding: 12px;
5 |5 r7 t1 u5 |6 N            text-decoration: none;" E% j/ h+ @( Z3 R. i5 N
            font-size: 18px;$ n, s; }& O( n" m: d
            color: black;  X% a- Q+ B0 L7 T3 T! ?4 }; R
            display: block;
. ^7 {( k2 j) U. T* u0 D( d7 t        }/ X9 V; l1 F/ `. t% O( _
5 Y$ {1 ~2 m4 G* i
        #myUL li a.header {) @  s# _! g4 {$ P0 g7 r
            font-weight: bold;7 s1 M4 @. k/ [, r8 F# ^
            background-color: #e2e2e2;6 P. m: F& W6 J. `! z6 x
            cursor: default;
+ @: _; M; ^3 [  }1 z3 C        }
0 m# {7 S7 y2 b4 `" A/ B. S3 ~3 v& j8 D8 S" {
        #myUL li a:hover:not(.header) {
; X0 p/ k- u% l' a% `; Z            background-color: #eee;
  H- G0 E& D1 k' i* t        }9 h. K7 e. ?  k/ Z* O( m
    </style>
4 {9 y! R3 I% \' U/ t6 u: z5 h</head>: W: W/ o6 L: _3 _. Q
! x* {0 |( c8 q1 O) X
<body>+ `  S% \6 v5 x$ r+ ~

( v3 d' E* V0 O! }9 ]& e4 G+ ?1 c    <input id="myInput" type="text" placeholder="Search....">$ w$ V* }/ j( o1 }* b
    <ul id="myUL">& Y2 B- D, Q: r* W8 ^& e
        <li><a href="#" class="header">A</a></li>
4 [" y+ E1 Y! L; o  L1 ~        <li><a href="#">abc</a></li>$ j5 l# t% i4 O+ Z0 x4 r) {
        <li><a href="#">abort</a></li>
) N' \0 d* F$ [        <li><a href="#">abandon</a></li>
( Z3 f( l3 o" U& \9 e+ H2 [
! ~! r: [/ q+ V: n% I4 f        <li><a href="#" class="header">B</a></li>2 d. F0 j, m8 X: a+ ^( @7 K; A$ u6 _
        <li><a href="#">baby</a></li>5 @- U, _0 ], V7 _5 R0 d& w
        <li><a href="#">bird</a></li>- R5 [! U6 T% ^' y8 L# K
        <li><a href="#">bin</a></li>
3 x1 q1 m3 c5 m$ e+ F! x* U& m) k/ R+ Z- F
        <li><a href="#" class="header">C</a></li>
& j% S- y1 S5 I+ `$ v1 t        <li><a href="#">car</a></li>3 P3 p. e/ P! J9 j  _  \
        <li><a href="#">card</a></li>3 x- @1 P6 ~3 l- `0 E& @7 v; X3 e
        <li><a href="#">cavans</a></li>, p/ _1 R3 P& ?# {( E0 p
    </ul>
. J" [$ G2 a& W
5 g( ?9 q% h( G6 ^3 _* |! K# C! E  h+ H2 Y
    <script>
. [: [% r, N" B$ ^/ p! L3 F# x: H        function myFunction() {; L( w/ o- j$ f  t1 Y
            var input, ul, li, a
$ z1 \& X+ @2 _+ A* S  O            input = document.getElementById("myInput"); P" E) P) i  Y4 Y
            ul = document.getElementById("myUL")
$ {4 {; z+ e- v$ B' G5 ~            li = document.getElementsByTagName("li")6 f" ~7 n( {( _! ]; E* F
            var inputvalue = input.value.toUpperCase()! }4 c4 B! s! B7 ?* F
            for (var i = 0; i < li.length; i++) {2 g, Z9 r% Z  W# T& G% l9 ^
                a = li.getElementsByTagName("a")[0]
; i0 i* F7 A+ W0 o                if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
5 a  W0 h) h: E% |. Y4 q4 }3 R                    li.style.display = ""
% N5 e3 F% H7 V$ R$ e% `                }
" n- D. Z' I, o% |; `& _                else {, T  G. x- ~' r1 N/ p  K0 T" }6 m0 t
                    li.style.display = "None";% K6 `6 ~! s+ L& c& i! I0 E; D2 h
                }: A1 k/ x; B8 t. |/ e. a9 `1 y
            }
) Z" e2 q/ Q5 m. e& |# I        }; d, m5 n6 x6 g2 Z" W5 `. ]  A) [
    </script>  D- {! Z# k6 a3 M5 ]
</body>9 B% r2 x) H/ }  W8 \9 B

$ A! E, ~; B" F6 J% C</html>[/mw_shl_code]
- |9 S  {% ]  G. O
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了