jQuery UI Autocomplete下拉菜单不显示问题求助
搜索框ui-autocomplete下拉菜单不显示(服务器已返回结果但未渲染)
搜索框的ui-autocomplete下拉菜单突然无法正常显示,服务器已返回对应的查询结果集(控制台能打印出数据),但下拉菜单未渲染。相关代码如下:
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() { 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($.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); }; } };
场景示例:在站点搜索框输入“palm”时,控制台能正常打印返回的产品数据,但原本应显示的匹配产品下拉菜单没有出现,求可行解决方案。
内容的提问来源于stack exchange,提问作者user3369417
相关产品推荐
相关产品推荐

