ich suche auf meiner Suche Bars in meinem Shopify Autocomplete-Setup zu bekommen Shop- diese verwendet Flüssig- und AjaxAjax/jQuery die automatische Vervollständigung in das Suchfeld (Shopify)
ich dieses Tutorial gefunden und implementiert sie, wie sie sagt, aber es funktioniert nicht, nichts wird auf einer Suchleiste auf der Website automatisch vervollständigt - ich denke, es könnte ziemlich alt sein und wurde vor den Updates/Änderungen an der Suchfunktion von Minimal/Shopify geschrieben.
https://help.shopify.com/themes/customization/store/enable-autocomplete-for-search-boxes
ich es durch mit Chrome Entwickler-Tool folgen kann, und es scheint, wie es stecken bleibt, wo es die $('<ul class="search-results"></ul>').appendTo($(this)).hide(); Liste Suchergebnisse ergänzt, dies erscheint nicht, wenn der HTML-Code der Seite zu verfolgen. Dies bedeutet, dass wenn es später versucht, diese Liste zu finden, var resultsList = form.find('.search-results'); es nicht findet und daher nicht mit Elementen gefüllt werden kann.
Ich führe das Minimal Thema. Die Website ist testing site mit der Suchleiste auf dem oberen grauen Header und auch auf/Suche
Ein Ort-Test von Shopify baute diese zum automatischen Vervollständigung Demo liegt [https]: //search-autocomplete.myshopify.com/ . Das <ul> Append ist bereits beim Laden der Seite vorhanden.
EDIT:
ein wenig mehr zu graben tun, ich auf diesen Fehler in den Entwickler-Tools gestolpert -
Uncaught ReferenceError: jQuery is not defined at (index):7031
Welche, Sie ahnen es, unter die erste Zeile des jQuery-Code . $(function() { Irgendeine Idee warum die jQuery nicht definiert ist? Das Skript ist am Ende meiner Index-Datei direkt vor </body>, so dass die jquery.min.js bis dahin geladen sein sollte, der Rest der jQuery auf der Website funktioniert gut.
Formular Code auf Testgelände
<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.liquid
<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>