In search box the ui-autocomplete dropdown has stopped working all of sudden. Server is returning the queryset but jquery is not executing response
section.
My html form:
<form class="d-flex ps-0 pe-0" method="get" action="{% url 'search-name' %}">
<input class="form-control reduceboxsize" value="{{ query }}" name="q" type="search" placeholder="Search" id="snametag" aria-label="Search">
<button class="btn btn-outline-success" name="st" value="{{st.url}}" type="submit">🔍</button>
</form>
<button class="navbar-toggler btn btn-sm ps-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
jquery function:
function enableautocomplete() {
///// search ////// http://jsbin.com/xavatajiku/edit?js,output
if (document.getElementById('snametag')) {
$('#snametag').autocomplete({
minLength: 4,
source: function (request, response) {
$.ajax({
url: "/sm/shpd/",
data: { searchText: request.term, maxResults: 10, shopId: 'organic'},
dataType: "json",
success: function (data) {
console.log('return', data);
//response(data);
response($.map(data.results, function (item) {
console.log('data.results', data.results);
return {
product_name: item.name,
url: item.url,
pfimage_thumb: item.photo,
ourprice: 6,
};
}));
}
})
},
select: function (event, ui) {
return false;
},
close : function (event, ui) {
return false;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
console.log(item.url);
var inner_html = '<div class="row searching-box"><div class="image col-sm-1"><a href="/market/1/'+item.url+'"><img src="' + item.pfimage_thumb + '" height="42" width="42"></a></div><div class="description col-sm-8"><a class="link-decoration-none" href="/market/1/'+item.url+'">' + item.product_name + '<button type="submit" onclick="create_post('+myVars.shId+','+item.products+',\''+item.product_name+'\','+item.ourprice+')" class="btn btn-primary btn-sm">View</button></a></div></div>';
return $("<li class='list-group-item'></li>")
.data("ui-autocomplete-item", item)
.append(inner_html)
.appendTo(ul);
};
}
};
For example: if we type "palm" in tharuvi.com search box it will show a dropdown of products matching the query (ui-autocomplete). Now the products are printed in Console log but dropdown portion is not working.
Any valuable suggestions would help.
a) below lines of code is unnecessay so remove them (take care of removing corresponding closing brackets too):
function enableautocomplete() {
///// search ////// http://jsbin.com/xavatajiku/edit?js,output
if (document.getElementById('snametag')) {
b) change data.results
to data
I have directly used the below code on your site and it worked:
$('#snametag').autocomplete({
minLength: 4,
source: function (request, response) {
$.ajax({
url: "/sm/shpd/",
data: { searchText: request.term, maxResults: 10, shopId: 'organic'},
dataType: "json",
success: function (data) {
console.log('return', data);
//response(data);
response($.map(data, function (item) {
return {
product_name: item.name,
url: item.url,
pfimage_thumb: item.photo,
ourprice: 6,
};
}));
}
})
},
select: function (event, ui) {
return false;
},
close : function (event, ui) {
return false;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
var inner_html = '<div class="row searching-box"><div class="image col-sm-1"><a href="/market/1/'+item.url+'"><img src="' + item.pfimage_thumb + '" height="42" width="42"></a></div><div class="description col-sm-8"><a class="link-decoration-none" href="/market/1/'+item.url+'">' + item.product_name + '<button type="submit" onclick="create_post('+myVars.shId+','+item.products+',\''+item.product_name+'\','+item.ourprice+')" class="btn btn-primary btn-sm">View</button></a></div></div>';
return $("<li class='list-group-item'></li>")
.data("ui-autocomplete-item", item)
.append(inner_html)
.appendTo(ul);
};
The result on your website: https://prnt.sc/eoLiVv6iGAWO