Merge pull request #533 from TelosLabs/fix/pause-autocomplete

Remove markup related to autocomplete
TelosLabs · Mar 14, 2024 · c3a0711 · c3a0711
2 parents dd3ecf8 + 031f122
commit c3a0711
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 8 deletions.
diff --git a/app/components/search_bar/component.html.erb b/app/components/search_bar/component.html.erb
@@ -1,7 +1,7 @@
 <div id="search-bar" class="sticky inset-x-0 z-20 flex items-center justify-center px-6 py-4 
 bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75 md:gap-5">
   <%# Keyword input %>
-  <div class="relative w-full max-w-xl" data-controller="autocomplete" data-autocomplete-url-value="<%= autocomplete_index_path %>" role="combobox" data-autocomplete-min-length-value="2">
+  <div class="relative w-full max-w-xl">
     <span class="absolute inset-y-0 left-0 flex items-center px-3 pointer-events-none">
       <%= inline_svg_tag "solid_search.svg", class: 'h-4 w-4 fill-current text-gray-2' %>
     </span>
@@ -15,13 +15,9 @@ bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75 md:
       data: {
         action: "input->search#displayClearKeywordButton",
         search_target: "keywordInput",
-        autocomplete_target: "input",
       }
     ) %>
 
-      <ul class="absolute w-full px-1 bg-white rounded-sm" data-autocomplete-target="results" role="listbox">
-      </ul>
-
     <button
     type="button"
     class="absolute inset-y-0 right-0 px-3 <%= "hidden" unless params.dig('search', 'keyword').present? %>"

diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim
@@ -22,9 +22,8 @@ main
       | Search for listings of nonprofit organizations based on your needs.
     = form_with model: @search, url: search_path, method: :get do |f|
       .c-form class="py-0 mx-auto sm:px-3 sm:flex-col sm:justify-center sm:max-w-4xl"
-        div class="relative w-full sm:max-w-xl mb-7 sm:mb-0" data-controller="autocomplete" data-autocomplete-url-value=autocomplete_index_path role="combobox" data-autocomplete-min-length-value="2"
-          = f.text_field :keyword, autocomplete: "search", class:"c-input pl-10 m-0 w-full", placeholder: "Try \"Mental Health Nonprofits\"", data: { "autocomplete-target": "input" }
-          ul class="absolute w-full px-1 bg-white rounded-sm" data-autocomplete-target="results" role="listbox"
+        div class="relative w-full sm:max-w-xl mb-7 sm:mb-0"
+          = f.text_field :keyword, autocomplete: "search", class:"c-input pl-10 m-0 w-full", placeholder: "Try \"Mental Health Nonprofits\""
           = inline_svg_tag 'search-icon.svg', class:"absolute top-1/3 left-4"
         div
           = f.submit "Search", class:"c-button mx-10 mt-6"