Updated Advanced Search Liquid and Javascript - CrystalCommerce Liquid Documentation for Designers

Updated Advanced Search Liquid and Javascript

Per ticket #5697, we’ve updated the advanced_search.liquid to remove some dependencies on prototype. The autocomplete now uses jQuery UI autocomplete. The Edit/New form controls are now accessible from the liquid template.

The additions are:

<div class="advanced_search_form_controls">
  <a href='#' id='edit_advanced_search'>Edit Advanced Search</a>
  |
  <a href='/advanced_search' id='new_advanced_search'>New Advanced Search</a>
</div>
{% if search_performed %}
...
{% endif %}
<script language="javascript" type="text/javascript">
  jQuery(function($){
    $("#advanced_search_form input[data-autocomplete]").each(function(index, el) {
      $(el).autocomplete({
        source: $(el).attr('data-autocomplete'),
        minLength: 2,
        select: function(e, ui) {
          $(e.target).val(ui.item.value);
        }
      });
    });

    if ($("#advanced_search_form").attr('data-search-performed') == "true") {
      $("#advanced_search").hide();
    } else {
      $(".advanced_search_form_controls").hide();
    }

    $('#edit_advanced_search').click(function() {
      $('#advanced_search').toggle();
    });
  });
</script>