Port Tim & Huda's blacklight-cornell autosuggest

Gemfile

@@ -13,3 +13,5 @@ gemspec
 
 # To use a debugger
 # gem 'byebug', group: [:development, :test]
+
+gem 'jquery-ui-rails'

Gemfile.lock

@@ -57,6 +57,8 @@ GEM
       activesupport (>= 4.2.0)
     i18n (1.7.0)
       concurrent-ruby (~> 1.0)
+    jquery-ui-rails (5.0.5)
+      railties (>= 3.2.16)
     loofah (2.3.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
@@ -120,6 +122,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  jquery-ui-rails
   nectarguide!
   sqlite3
 

app/assets/javascripts/blacklight/autosuggest.js

@@ -0,0 +1,57 @@
+(function ($) {
+  $(document).ready(function() {
+    if ( $('input[name="uri"]').length && $('input[name="uri"]').val().length > 0 ) {
+        $('input#q').on('input', function() {
+            $('input[name="uri"]').remove();
+        });
+    }
+
+    if ($('#q').length) {
+      $('#q').autocomplete({
+        source: function( request, response ) {
+            $.ajax({
+              url : "/search_ac?term=" + $('#q').val(),
+              type: 'GET',
+              dataType: "json",
+              complete: function(data) {
+                  items = JSON.parse(data["responseText"]);
+                  response( items );
+              }
+            });
+         },
+         minLength: 3,
+         select: function(event, ui) {
+             if ( ui.item.type == "author" ) {
+                 $('#search_field').val('author/creator');
+             }
+             else {
+                 $('#search_field').val('subject');
+             }
+             if ( ui.item.label.indexOf("<span>") > -1 ) {
+               $('#q').val(ui.item.label.substring(0,ui.item.label.indexOf(" <span>")));
+             }
+             if ( ui.item.label.indexOf("see also") > -1 ) {
+               tmp = ui.item.label.replace("<em>see also:/<em>","");
+               $('#q').val(ui.item.label.substring(ui.item.label.indexOf("</em>")+6,ui.item.label.indexOf(" <span>")));
+             }
+             if ( ui.item.uri.indexOf("http") > -1 ) {
+               $('form#search-form').append("<input name='uri' value='" + ui.item.uri + "' type='hidden'/>"); 
+             }
+             $('form#search-form').submit();
+             return false;
+           }
+      })
+      .autocomplete( "instance" )._renderItem = function( ul, item ) {
+          if ( item.label == "Authors" || item.label == "Locations" || item.label == "Subjects" || item.label == "Genres" ) {
+              $x = $( "<li class='ui-autocomplete-category ac-li'>" );
+              $x.html(item.label);
+          }
+          else {
+              $x = $( "<li class='ac-menu-item'>" );
+              $x.html(item.label);
+          }
+          return $x.appendTo(ul);
+      };
+    }
+  });
+})(jQuery);

app/assets/stylesheets/_search-form.scss

@@ -0,0 +1,208 @@
+.search-bar {
+  background: #fff5d9;
+  padding: 1em 0 .5em 0;
+  // header in place of search box used on browse interface
+  h2 {
+    margin: 0;
+    a, a:hover, a:active, a:focus {
+      color: #5c5c5c;
+      text-decoration: none;
+    }
+  }
+}
+
+.search-options { margin-left: 0; }
+input.search-query {
+  width: 93%;
+  padding-right: 0;
+  padding-left: 15px;
+}
+.start-over {
+  display: block;
+  font-size: 14px;
+  padding: 6px 12px 6px 0;
+  float: left;
+  margin-right: 1em;
+}
+.results-info {
+  margin: 0;
+  padding-bottom: .2em;
+  border-bottom: solid 5px #fff5d9;
+}
+.results-per-page-form {
+  margin: 0;
+  label {
+    display: inline;
+    margin-left: .5em;
+  }
+}
+.results-pagination {
+  margin: .1em 0 0 1em;
+}
+.results-sortby-form,
+.results-view {
+  float: right;
+}
+.results-sortby-form {
+  margin: 0 1em 0 0;
+}
+#search_field {
+  float: left;
+  // font-family: $font-family-base; // See cul-bootstrap-loader.css.scss for details
+}
+p.suggest {
+  font-size:.8em;
+  margin-top: 15px; }
+
+div.search-tools > h2 {line-height: 1em}
+
+.search-tools {
+  .form-inline {
+    .form-group {
+      padding-left: 0;
+    }
+    .form-control {
+      width: 100%;
+    }
+  }
+}
+.btn-search,
+.btn-search:hover,
+.btn-search:active,
+.btn-search:focus {
+  background: #b0b0b0;
+  color: white;
+}
+
+// Advanced search - TODO: combine with AS CSS partial when that is brought into app
+// ------------------------------------------------------------------------------ //
+h2.advanced-search { margin: 0; }
+.advanced-facets { margin-bottom: 10px; }
+.advanced-search-link {
+  margin-top: .5em;
+}
+
+// Search navigation
+// --------------------- //
+.search-nav {
+  margin-top: 1.5em;
+  li {
+    border-left: 1px solid #918970;
+    font-size: 11px;
+    padding: 0 .5em;
+    a {
+      color: #5c5c5c;
+      font-weight: 700;
+      text-transform: uppercase;
+      i {
+        margin-right: .5em;
+        //color: $cornell-primary;
+      }
+    }
+    .tips-link {
+      font-weight: normal;
+      //color: $link-primary;
+      text-transform: none;
+    }
+  }
+  li:first-child {
+    border-left: 0;
+    padding-left: 0;
+    a {
+      padding-left: 0;
+    }
+  }
+  li:last-child {
+    padding-right: 0;
+  }
+  .nav > li > a {
+    padding: 0;
+  }
+}
+
+// MEDIA QUERIES
+// -------------------------
+
+  // /* Extra small devices (phones, up to 480px) */
+  // /* No media query since this is the default in Bootstrap */
+
+  // /* Small devices (tablets, 768px and up) */
+  // @media (min-width: @screen-sm) { ... }
+
+  // /* Medium devices (desktops, 992px and up) */
+  // @media (min-width: @screen-md) { ... }
+
+  // /* Large devices (large desktops, 1200px and up) */
+  // @media (min-width: @screen-lg) { ... }
+
+
+/* Small devices (tablets, 768px and up) */
+@media (min-width: 600) { 
+  .search-bar {
+    padding-bottom: 1em;
+  }
+  .advanced-search-link {
+    float: right;
+    margin-top: 0;
+  }
+}
+
+/* Medium devices (desktops, 992px and up) */
+@media (min-width: 600) {
+  .search-nav {
+    padding-left: 15px;
+    li {
+      font-size: 13px;
+    }
+  }
+  .search-nav {
+    margin-top: .5em;
+    .nav {
+      float: right;
+    }
+  }
+}
+
+/*** For the LD4P2 autocomplete ***/
+.ui-state-focus {
+	margin: 0 !important;
+	background: none !important;
+	border: none !important;
+}
+.ac-li, ac-li:hover {
+	font-weight: 510 !important;
+	cursor: default !important;
+	background: #ededed !important;
+	border: none !important;
+	margin: 0 !important;
+}
+.ac-menu-item:hover {
+	background: #9fccf3 !important;
+}
+.ac-menu-item > span, .ac-menu-item > div > span {
+	font-size: 14px !important;
+	color: #767676;
+}
+
+// Imported styles from Cornell catalog app //
+
+#autocomplete {
+  border:1px solid;
+  overflow:hidden;
+  position:absolute;
+  z-index:100;
+}
+#autocomplete ul {
+  list-style:none;
+  list-style-image:none;
+  margin:0;
+  padding:0;
+}
+#autocomplete li {
+  background:#fff;
+  color:#000;
+  cursor:default;
+  white-space:pre;
+  zoom:1;
+}
+

app/assets/stylesheets/application.scss

@@ -0,0 +1,7 @@
+
+/* ...
+*= require_self
+*= require_tree .
+*= require
+*/
+