我们跑了tharuvi.com英里
在搜索框中,UI-AutoComplete下拉菜单突然停止工作.服务器正在返回查询集,但jQuery没有执行response
节.
我的html表单:
<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 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);
};
}
};
例如:如果我们在tharuvi.com搜索框中输入"palm",它将显示与查询匹配的产品列表(ui-autocomplete).现在,产品打印在控制台日志(log)中,但打印部分不工作.
任何有价值的建议都会有所帮助.