implement hotosm#19 with dummy json file

Author: jueyang

_layouts/front.html

@@ -45,29 +45,7 @@ <h4>Common questions</h4>
   </div>
 </div>
 {% include banner.html %}
-<script>
-  // using widget factory
-  $.widget( "custom.addChapterSection", $.ui.autocomplete, {
-   _renderMenu: function( ul, items ) {
-       var that = this,
-       currentSection = "",
-       currentChapter = "",
-       $.each( items, function( index, item ) {
-           // this creates a list item for the chapter
-           if (item.chapter != currentChapter) {
-             ul.append( "<li class='ui-autocomplete-chapter'>" + item.chapter + "</li>" );
-             currentChapter = item.chapter;
-             // under that chapter, create a list item for the section
-             if ( item.section != currentSection ) {
-                 ul.append( "<li class='ui-autocomplete-section'>" + item.section + "</li>" );
-                 currentSection = item.section;
-             }
-           }
-           that._renderItemData( ul, item );
-       });
-   }
-  });
-</script>
+
 <script>
 // format the search bar
   var input = $(".searchbox input[type=text]"),
@@ -85,15 +63,19 @@ <h4>Common questions</h4>
         input.removeClass("default-value"); // for darker text
     }
   });
-  // autocomplete for search
-  $( "#search-field" ).addChapeterSection({
-   autoFocus: true,
-   delay: 0,
-   source: function(){
-     $.getJSON('{{site.baseurl}}/{{page.lang}}.json',function(data) {
-       console.log(data);
-      });
-   }
+
+  $.getJSON("{{site.baseurl}}/{{page.lang}}.json",function(data){
+    var destination;
+
+    $( "#search-field" ).autocomplete({
+     autoFocus: true,
+     delay: 0,
+     source: data,
+     select: function(event, o) {
+       destination = '{{site.baseurl}}/' + o.item.url;
+       window.location = destination;
+     }
+    });
   });
 
 </script>

en.json

@@ -2,30 +2,21 @@
   {
     "label":"Adding Your First Points",
     "section":"",
-    "chapter":"beginner",
-    "url":"en/beginner/walking-papers/adding-your-first-points"
+    "url":"en/beginner/walking-papers/#adding-your-first-points"
   },
   {
     "label":"Add Bing Imagery",
     "section":"Change JOSM settings",
-    "chapter":"beginner",
-    "url":"add-bing-imagery"
+    "url":"en/beginner/start-josm/#add-bing-imagery"
   },
   {
     "label":"Add presets",
     "section":"Change JOSM settings",
-    "chapter":"beginner",
-    "url":"add-presets"
+    "url":"en/beginner/start-josm/#add-presets"
   },
   {
     "label":"Add Walking Papers Plugin",
     "section":"Change JOSM settings",
-    "chapter":"beginner",
-    "url":"add-walking-papers-plugin"
-  },
-  {
-    "label":"Add Presets",
-    "section":"Learn Basic Drawing with JOSM",
-    "chapter":"beginner",
-    "url":"add-presets"
+    "url":"en/beginner/start-josm/#add-walking-papers-plugin"
   }
+]

images/dot-hover.png

@@ -248,22 +248,19 @@ body {
 
 /* contribute banner */
 .banner {
-  background:url(./images/dot.png) white;
-  font-weight:bold;
-  text-align:center;
+  background:url(./images/dot.png) repeat white;
 }
 .banner:hover {
-  color:#404040;
+  background:url(./images/dot-hover.png) repeat white;
 }
 .banner span {
   display:block;
+  font-weight:bold;
+  text-align:center;
   padding:12px;
-  transition: all 200ms linear;
-  -moz-transition: all 200ms linear;
-  -webkit-transition: all 200ms linear;
-  -o-transition: all 200ms linear;
 }
 .banner span:hover {
+  background:#fff;
   background:rgba(255,255,255,0.6);
   color:#fc3f51;
 }
@@ -320,13 +317,27 @@ body {
   }
 
   /* search drop-down */
-  .ui-autocomplete-category {
-      font-weight: bold;
-      padding: .2em .4em;
-      margin: .8em 0 .2em;
-      line-height: 1.5;
+  .ui-helper-hidden-accessible {
+    display:none;
+  }
+  .ui-menu {
+    border:2px solid #fff;
+    width:20%;
+    background:#fff;
+    cursor:pointer;
   }
+  .ui-menu-item{
+    padding:10px;
+    font-family:'Source Sans Pro',sans-serif ;
+  }
+    .ui-menu-item:hover, .ui-menu-item:focus {
+      background:#79bc5f;
+    }
+    .ui-menu-item a:hover, .ui-menu-item a:focus {
+      color:#404040;
+    }
 
+/* faq */
 .faqbox h4 {margin-bottom:46px;}
 .faq li {
   margin:4px 0;