Ajax/jQuery 在搜索框中自动完成 (Shopify)

Question

我希望在我的 Shopify 商店中的搜索栏上获得自动完成设置 - 这使用 Liquid 和 ajax

我找到了这个教程，并按照它说的做了，但是它不起作用，网站上的任何搜索栏都没有自动完成 - 我认为它可能很旧并且写在 updates/changes 到 Minimal/Shopify 搜索功能。

https://help.shopify.com/themes/customization/store/enable-autocomplete-for-search-boxes

我可以使用 Chrome 开发工具完成它，它似乎卡在了添加 search-results 列表 $('<ul class="search-results"></ul>').appendTo($(this)).hide(); 的位置，这在跟踪HTML 的页面。这意味着当它稍后尝试查找此列表时 var resultsList = form.find('.search-results'); 它没有找到它，因此无法填充项目。

我是运行 Minimal 主题。该网站是 testing site，顶部灰色的搜索栏 header，还有 /search

Shopify 建立的用于演示此自动完成功能的测试站点位于 [https]://search-autocomplete.myshopify.com/。 <ul> 附加在页面加载时已经存在。

编辑：

进行更多挖掘后，我在开发工具中偶然发现了这个错误 -

Uncaught ReferenceError: jQuery is not defined at (index):7031

您猜对了，就是下面 jQuery 代码的第一行。 $(function() { 知道为什么 jQuery 未定义吗？该脚本包含在我的索引文件的底部，就在 </body> 之前，因此 jquery.min.js 应该已经加载，站点上的其余 jQuery 工作正常。

测试站点的表单代码

<form action="/search" method="get" class="site-header__search small--hide" role="search">
        {% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
        <div class="site-header__search-inner">
          <label for="SiteNavSearch" class="visually-hidden">{{ 'general.search.placeholder' | t }}</label>
          <input type="search" name="q" id="SiteNavSearch" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}" class="site-header__search-input">
        </div>

        <button type="submit" class="text-link site-header__link site-header__search-submit">
          {% include 'icon-search' %}
          <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
        </button>
      </form>

search.json

{% layout none %}
{% capture results %}
  {% for item in search.results %}
{% assign product = item %}
{ 
  "title"    : {{ product.title | json }},
  "url"      : {{ product.url | within: product.collections.last | json }},
  "thumbnail": {{ product.featured_image.src | product_img_url: 'thumb' | json }}
}
{% unless forloop.last %},{% endunless %}
 {% endfor %}
{% endcapture %}
{
"results_count": {{ search.results_count }},
"results": [{{ results }}]
}

search-autocomplete.液体

<script>
$(function() {
  // Current Ajax request.
  var currentAjaxRequest = null;

  // Grabbing all search forms on the page, and adding a .search-results list to each.
   var searchForms = 
 $('form[action="/search"]').css('position','relative').each(function() {

 // Grabbing text input.
   var input = $(this).find('input[name="q"]');

  // Adding a list for showing search results.
    var offSet = input.position().top + input.innerHeight();
    $('<ul class="search-results"></ul>').css( { 'position': 'absolute', 'left': '0px', 'top': offSet } ).appendTo($(this)).hide();    

 // Listening to keyup and change on the text field within these search forms.
   input.attr('autocomplete', 'off').bind('keyup change', function() {

// What's the search term?
  var term = $(this).val();

 // What's the search form?
  var form = $(this).closest('form');

 // What's the search URL?
  var searchURL = '/search?type=product&q=' + term;

 // What's the search results list?
  var resultsList = form.find('.search-results');

  // If that's a new term and it contains at least 3 characters.
  if (term.length > 3 && term != $(this).attr('data-old-term')) {

   // Saving old query.
    $(this).attr('data-old-term', term);

  // Killing any Ajax request that's currently being processed.
    if (currentAjaxRequest != null) currentAjaxRequest.abort();

  // Pulling results.
    currentAjaxRequest = $.getJSON(searchURL + '&view=json', function(data) {
      // Reset results.
      resultsList.empty();

    // If we have no results.
      if(data.results_count == 0) {

     // resultsList.html('<li><span class="title">No results.</span></li>');
        // resultsList.fadeIn(200);
        resultsList.hide();
      } else {

       // If we have results.
        $.each(data.results, function(index, item) {
          var link = $('<a></a>').attr('href', item.url);
          link.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
          link.append('<span class="title">' + item.title + '</span>');
          link.wrap('<li></li>');
          resultsList.append(link.parent());
        });

       // The Ajax request will return at the most 10 results.
        // If there are more than 10, let's link to the search results page.
        if(data.results_count > 10) {
          resultsList.append('<li><span class="title"><a href="' + searchURL + '">See all results (' + data.results_count + ')</a></span></li>');
        }
        resultsList.fadeIn(200);
      }        
    });
  }
});
 });

 // Clicking outside makes the results disappear.
 $('body').bind('click', function(){
  $('.search-results').hide();
 });
 });
</script>

Answer 1

这里是为了后代和完整性。

经过一些调整，我终于让它工作了。

为了修复 jQuery 未定义的错误，我将第一行替换为： window.onload = (function() {

出于某种原因，结果列表从某个地方得到了 display:block，但我找不到它，所以我使用 jQuery 将其更改为块，使其出现。同样在此代码行中，我修改了 term.length 以在 2 上启动 ajax 请求，否则如果您键入 cat/dog 则需要键入另一个字母或 space 以开始搜索。

// If that's a new term and it contains at least 2 characters. if (term.length > 2 && term != $(this).attr('data-old-term')) { $('<ul class="search-results"></ul>').css( { 'display': 'block'} )

搜索结果出现，全部正确！只需要对定位进行一些 CSS 调整。

Ajax/jQuery 在搜索框中自动完成 (Shopify)

Ajax/jQuery autocomplete in search box (Shopify)

ajax

jquery

shopify