Shopify 预测搜索 JQuery GET 运行两次

Question

我在 theme.liquid 中实现了以下代码，使我的搜索具有预测性。第一部分是获取搜索输入，然后是 JQuery 调用。它有效，但不幸的是它运行了两次。当我开始在搜索框中输入一个字母时，我收到了警报，我单击确定，然后再次出现相同的警报。任何帮助将不胜感激！谢谢！！

 <script>
  // 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();

      var url2 = '&resources[type]=product,collection'
      jQuery.getJSON({
        'url':  "/search/suggest.json?q=" + term + url2,
        'type': 'GET',
        'dataType': 'json', // added data type
        'limit': 5,
        'success': function(response) {
            console.log(response);
            var productSuggestions = response.resources.results.products;
            if (productSuggestions.length > 0) {
                var firstProductSuggestion = productSuggestions[0];
              alert(firstProductSuggestion.body);
            }
        }
         });
      });
   });
  </script>

Answer 1

原因是您在每个 keyup/change 事件触发器上发送搜索请求，如果有任何结果，则会显示警报消息。因此，当您搜索 blah - 将发送 4 个请求：

/search/suggest.json?q=b
/search/suggest.json?q=bl
/search/suggest.json?q=bla
/search/suggest.json?q=blah

警报将针对每个请求触发，并根据 q 参数中提供的搜索词提供结果。

您可以通过引入一个变量来保留请求并在下一个运行之前取消它来解决这个问题。见下文：

// Grabbing all search forms on the page, and adding a .search-results list to each.
var xhrSearch;
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() {
      if (xhrSearch) {
        xhrSearch.abort();
      }
      // What's the search term?
      var term = $(this).val();

      var url2 = '&resources[type]=product,collection'
      xhrSearch = jQuery.getJSON({
        'url': "/search/suggest.json?q=" + term + url2,
        'type': 'GET',
        'dataType': 'json', // added data type
        'limit': 5,
        'success': function(response) {
          console.log(response);
          var productSuggestions = response.resources.results.products;
          if (productSuggestions.length > 0) {
            var firstProductSuggestion = productSuggestions[0];
            alert(firstProductSuggestion.body);
          }
        }
      });
    });
  });

注意添加到代码中的 xhrSearch 变量。

Shopify 预测搜索 JQuery GET 运行两次

Shopify predictive search JQuery GET runs twice

jquery

shopify