我们跑了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">&#x1F50D;</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)中,但打印部分不工作.

任何有价值的建议都会有所帮助.

推荐答案

a)下面的代码行是不必要的,所以删除它们(也要注意删除相应的闭括号):

function enableautocomplete() {
///// search ////// http://jsbin.com/xavatajiku/edit?js,output
if (document.getElementById('snametag')) {

B)将data.results更改为data

我在您的网站上直接使用了下面的代码,它起作用了:

$('#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);
    };
    
    
    

你网站上的结果:https://prnt.sc/eoLiVv6iGAWO

Jquery相关问答推荐

当一个很长的活动增加标题时,满历js每周都会出现.这是一种让标题只出现一次的方法吗?

可以推迟 jQuery 的加载吗?

Bootstrap 3 RC 1 中的 typeahead JavaScript 模块在哪里?

jquery - 单击事件不适用于动态创建的按钮

不使用插件的 jQuery 缓动函数

lodash debounce 在匿名函数中不起作用

使用 jQuery DataTables 时禁用最后一列的排序

模态窗口中的 Twitter Bootstrap Datepicker

未捕获的 TypeError:data.push 不是函数

移动 chrome 在滚动时触发调整大小事件

使用 jquery 在 radio 上单击或更改事件

如何检测是否安装了 Flash,如果没有,显示一个隐藏的 div 通知用户?

jQuery 如果 div 包含此文本,则替换该部分文本

jQuery:如何创建一个简单的叠加层?

如何使用 JQuery 获取 GET 和 POST 变量?

带有回调ajax json的jQuery自动完成

更改 div 的内容 - jQuery

在 Firefox 上开发的 Javascript 在 IE 上失败的典型原因是什么?

使用 Ajax 下载并打开 PDF 文件

jQuery 将换行符转换为 br (nl2br 等效)