JavaScript 搜索框自动提示

admin · 发表于 2019-11-7 19:24:08

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

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

×

JavaScript 搜索框自动提示

[mw_shl_code=html,true]<html lang="en">! F  R3 ?1 _, n) K, n8 I' h
, A- m5 u$ o2 s$ G2 g* ]4 j1 W
<head>
, c0 s4 t) i! A+ y# _& V, f. ^ <meta charset="UTF-8">8 D/ J/ U4 N- s7 n/ y
<meta name="viewport" content="width=device-width, initial-scale=1.0">; ~5 x; x; Q( Y# V$ _* X
<meta http-equiv="X-UA-Compatible" content="ie=edge">! v5 B. H' d3 ]/ ?
<title>filter the value</title>  c* z# @- z+ Q% o
, V: N) d' b9 t
<style>
7 `, [  [% g& E# d& o5 m% `       #myInput {
8 \, o% W- N# N2 g          background-image: url('/images/mix/searchicon.png');
4 p; R8 b2 P( R  w8 P4 \          /* 搜索按钮 */( w. f( m' m+ d) d2 F$ K: ?
         background-position: 10px 12px;
5 M, B5 F% N+ {& U# v          /* 定位搜索按钮 */
; f. e$ r7 n% w  v, F          background-repeat: no-repeat;
. t% W; V, `9 ~+ t) m          /* 不重复图片*/# l/ u+ V5 N& Y+ [" F: P
         font-size: 16px;
' w$ g2 n3 \5 i- f/ P9 N          width: 100%;- y5 ^; ]3 L2 x' P/ x& I
         border: 1px solid #dddddd;/ G  R9 |& K" b* {2 _4 d5 i
         padding: 12px 20px 20px 40px;
+ V3 Q4 A9 g9 ]3 y1 G7 b3 d1 w          margin-bottom: 12px;( I! j: H6 E- [/ E" x& y- s3 g' D
      }
" C/ n' ^, E! c  F8 H6 u# O# \  q5 }
      #myUL {& S5 f) k  k6 d8 G- e  ~: t- \
         list-style-type: none;
+ }* k3 \% n4 b+ |          padding: 0px;
- c% W8 ]* O! H( O5 s9 E          margin: 0px;: B5 y' ^- V% C7 ]% L/ i2 [
      }
" R7 y* f3 e8 ~& V6 J
! k4 K6 j( n2 A2 u  g1 ]: Y# O       #myUL li a {
, I2 M+ q1 F+ ?: q/ z6 W          border: 1px solid #ddd;% G6 x. O/ y- F6 z9 ]
         margin-top: -1px;# u4 {% O& b9 r
         background-color: #f6f6f6;
1 m" Q" Y+ c2 z$ p          padding: 12px;
: i9 {( _6 x$ m$ M+ |. X8 I, k; @; A          text-decoration: none;& |: J8 f# M, v9 ]# G3 _4 M0 |
         font-size: 18px;  ?5 T$ {9 H/ S
         color: black;( O" x  K& k2 v" v+ F
         display: block;
      }
$ o: k5 I0 E) E" }
5 b& `- E4 _& i. L! s: [       #myUL li a.header {1 v4 s2 ~9 K6 u( S7 l8 H
         font-weight: bold;- ]- K. }9 }* C. ?8 w0 W) h/ F8 q
         background-color: #e2e2e2;
: s( ^2 V. W8 Z. `          cursor: default;
: W* c  a" I' x1 l       }
  z! e& Q% E( X) P' e; P' Y9 g; ]
( s9 x; h, G; w6 Q6 w, Y       #myUL li a:hover:not(.header) {
% l6 ~; a  l0 Q          background-color: #eee;
' l" [0 |' x! V3 V0 E       }0 o9 q) X; F% J8 R# y
</style>
. w* g) }' K+ ~+ A: P</head>
2 E" J1 w0 W2 r, ^0 I2 L
9 t6 v# z1 v- f1 [2 O<body>7 |* C6 q) h  S+ B

. S# k6 J+ \  o/ }2 ] <input id="myInput" type="text" placeholder="Search....">7 K  _1 J& R- l7 F
<ul id="myUL">
* s/ a8 s$ L' H+ T! \. |+ o& |       <li><a href="#" class="header">A</a></li>0 G- Z! {# U. `5 ]' P
      <li><a href="#">abc</a></li>
& ?2 R9 b7 ^' v" _! Z       <li><a href="#">abort</a></li>. t8 E% E1 }! e3 q- x
      <li><a href="#">abandon</a></li>
% B2 V% y3 C0 F6 `( u0 X0 _0 x( i
4 C$ p( P( S9 _: ]       <li><a href="#" class="header">B</a></li>- Z& ?2 N0 a+ ~7 g3 y" n
      <li><a href="#">baby</a></li>
2 H2 o7 v/ S/ f5 r$ r+ |       <li><a href="#">bird</a></li>
. o3 }' {- @$ {$ ^. T" N       <li><a href="#">bin</a></li>. u% A/ V7 h; p- k8 Y1 e3 k
! z+ f2 L: d5 m" K% ]4 Q2 q
      <li><a href="#" class="header">C</a></li>
, l/ P6 ?! t; T- L+ a; n8 C       <li><a href="#">car</a></li>
) I3 c, h' ~/ t       <li><a href="#">card</a></li>! V* v4 p- M3 O; C9 J3 m
      <li><a href="#">cavans</a></li>: W, i; N6 X2 b% O7 U2 n( U- J
</ul>/ Q. B+ J3 |& L5 ^# w: _' f3 M
( t1 Z# @' |* o& _1 F

8 X2 ?4 a. S9 _( n- Q; d <script>
4 d3 k7 @* E: S       function myFunction() {" k+ |# j+ L  I1 I3 T
         var input, ul, li, a7 f: w4 q5 {2 k# o
         input = document.getElementById("myInput"). K1 W8 P7 Y& j$ T$ c* m( k, ?' G
         ul = document.getElementById("myUL")
) ^0 r& k' r0 x. a: f7 x7 `$ d          li = document.getElementsByTagName("li")
, _* Y# y6 ~$ _- J. P* ?+ J' y          var inputvalue = input.value.toUpperCase()
7 d( I- n8 ~, v$ S: i5 f          for (var i = 0; i < li.length; i++) {# `$ f8 d8 _- D8 h$ g$ j
            a = li.getElementsByTagName("a")[0]- Z0 l3 u. ~$ X: G
            if (a.innerHTML.toUpperCase().indexOf(inputvalue) > -1) {
. a% r8 H# W4 R" e2 V, ]                   li.style.display = ""
! K/ O+ W" x2 `0 S$ Z  e$ z             }
: @+ I" y; N7 C5 |* k1 _& S5 E0 y             else {! J; D! ~# y$ b
                  li.style.display = "None";9 ?2 @1 p  A- O8 C# J6 y+ s
            }2 m' N8 L, S: i- N$ _. a4 u
         }
$ e8 ]% V; D# I% z  D( V       }2 ^9 S$ I, }% H  K$ w* w+ j
</script>
* P! t* B" c( ]  X# V) }0 M- x</body>- K& X1 m! E3 J; U

6 F' Y+ N1 y' e9 O- m7 |; W</html>[/mw_shl_code]" D& j& h, @$ s) Q; B

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

如果能把代码的运行效果用视频方式展示下，就更完美了

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

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