在搜索框(Shopify)
我希望得到我的Shopify内我的搜索栏自动完成设置阿贾克斯/ jQuery的自动完成这个商城 - 液体使用和Ajax在搜索框(Shopify)
我发现这个教程,并实现它,因为它说,然而它不起作用,网站上的任何搜索栏上都没有自动完成 - 我认为它可能比较陈旧,并且在最小/ Shopify搜索功能的更新/更改之前写入。
https://help.shopify.com/themes/customization/store/enable-autocomplete-for-search-boxes
我可以用Chrome浏览器开发工具,遵循它通过,而现在看来似乎被卡住的地方增加了搜索结果列表$('<ul class="search-results"></ul>').appendTo($(this)).hide();
,追踪网页的HTML时,这不会出现。这意味着当它稍后尝试查找此列表var resultsList = form.find('.search-results');
时,它不会找到它,因此无法填充项目。
我正在运行Minimal主题。 该网站是testing site在顶部灰色标题搜索栏,并且还通/搜索
通过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 }}]
}
搜索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>
这里为子孙后代和完整性。
我终于找到了工作,并做了一些调整。
要解决jQuery的未定义错误我替换第一行: window.onload = (function() {
出于某种原因,结果列表是越来越显示:从某处块,但我找不到它,所以使用jQuery我将其更改为使其显示的块。同样在这个代码行中,我修改了term.length
以在2上启动ajax请求,否则,如果您键入cat/dog,则需要输入另一个字母或空格来开始搜索。
// 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调整即可。