update autocomplete code

1 files changed, 45 insertions, 36 deletions

diff --git a/index.html b/index.html
index d1fb8fb..37fa3ab 100644
--- a/index.html
+++ b/index.html
@@ -1144,26 +1144,24 @@
                                 <input class="form-input" type="text" placeholder="typing here" />
                             </div>
                             <ul class="form-autocomplete-list">
-                                <li class="chip hand">
-                                    <div class="chip-icon">
-                                        <img src="demo/img/avatar-4.png" class="avatar" />
-                                    </div>
-                                    <div class="chip-content">
-                                        Steve Rogers
-                                    </div>
-                                    <div class="chip-action">
-
+                                <li class="form-autocomplete-item">
+                                    <div class="chip hand">
+                                        <div class="chip-icon">
+                                            <img src="demo/img/avatar-4.png" class="avatar" />
+                                        </div>
+                                        <div class="chip-content">
+                                            Steve Rogers
+                                        </div>
                                     </div>
                                 </li>
-                                <li class="chip hand">
-                                    <div class="chip-icon">
-                                        <img src="demo/img/avatar-2.png" class="avatar" />
-                                    </div>
-                                    <div class="chip-content">
-                                        Yan Zhu
-                                    </div>
-                                    <div class="chip-action">
-
+                                <li class="form-autocomplete-item">
+                                    <div class="chip hand">
+                                        <div class="chip-icon">
+                                            <img src="demo/img/avatar-2.png" class="avatar" />
+                                        </div>
+                                        <div class="chip-content">
+                                            Yan Zhu
+                                        </div>
                                     </div>
                                 </li>
                             </ul>
@@ -1197,26 +1195,24 @@
     <span class="com">&lt;!-- autocomplete suggestion list --&gt;</span>
     &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-list&quot;</span>&gt;
         <span class="com">&lt;!-- autocomplete list chips --&gt;</span>
-        &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;chip hand&quot;</span>&gt;
-            &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-icon&quot;</span>&gt;
-                &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-4.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
-            &lt;<span class="tag">/div</span>&gt;
-            &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-content&quot;</span>&gt;
-                Steve Rogers
-            &lt;<span class="tag">/div</span>&gt;
-            &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-action&quot;</span>&gt;
-                &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/span</span>&gt;&lt;<span class="tag">/button</span>&gt;
+        &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-item&quot;</span>&gt;
+            &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip hand&quot;</span>&gt;
+                &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-icon&quot;</span>&gt;
+                    &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-4.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
+                &lt;<span class="tag">/div</span>&gt;
+                &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-content&quot;</span>&gt;
+                    Steve Rogers
+                &lt;<span class="tag">/div</span>&gt;
             &lt;<span class="tag">/div</span>&gt;
         &lt;<span class="tag">/li</span>&gt;
-        &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;chip hand&quot;</span>&gt;
-            &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-icon&quot;</span>&gt;
-                &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-3.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
-            &lt;<span class="tag">/div</span>&gt;
-            &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-content&quot;</span>&gt;
-                Yan Zhu
-            &lt;<span class="tag">/div</span>&gt;
-            &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-action&quot;</span>&gt;
-                &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/span</span>&gt;&lt;<span class="tag">/button</span>&gt;
+        &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-item&quot;</span>&gt;
+            &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip hand&quot;</span>&gt;
+                &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-icon&quot;</span>&gt;
+                    &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-3.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
+                &lt;<span class="tag">/div</span>&gt;
+                &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-content&quot;</span>&gt;
+                    Yan Zhu
+                &lt;<span class="tag">/div</span>&gt;
             &lt;<span class="tag">/div</span>&gt;
         &lt;<span class="tag">/li</span>&gt;
     &lt;<span class="tag">/ul</span>&gt;
@@ -1383,6 +1379,19 @@
                 <div class="column">
                     <ul class="menu">
                         <li class="menu-item">
+                            <div class="chip">
+                                <div class="chip-icon">
+                                    <img src="demo/img/avatar-4.png" class="avatar" />
+                                </div>
+                                <div class="chip-content">
+                                    Steve Rogers
+                                </div>
+                                <div class="chip-action">
+
+                                </div>
+                            </div>
+                        </li>
+                        <li class="menu-item">
                             <a href="#menus" class="active">
                                 My profile
                             </a>