Question

我正在尝试实现jquery-ui自动完成功能，但具有一些自定义功能。我正在尝试搜索标签和说明，然后选择进入网址。

我已经实现了用任何顺序的单词搜索标签和描述，但由于这个原因，我似乎无法在_renderItem或select函数中引用item.desc或item.url。

我确信这里有一些简单的东西，所以任何建议都会很棒。提前谢谢。

$(function() {

        var adminPages = [
            {
                "label": "Manage pages",
                "desc": "here is some text",
                "url": "/managepages.aspx"                    
            },
            {
                "label": "Manage Navigation",
                "desc": "here is some text",
                "url": "/managenavigation.aspx"
            }
        ];
        //var result = adminPages.map(a => a.label);
        var result = $.map(adminPages, function (n, i) {
            return [[n.label, n.desc]];
        });

        $(".admin-search").autocomplete({
            source: function (requestObj, responseFunc) {
                var matchArry = result.slice(); //-- Copy the array
                var srchTerms = $.trim(requestObj.term).split(/\s+/);

                //--- For each search term, remove non-matches.
                $.each(srchTerms, function (J, term) {
                    var regX = new RegExp(term, "i");
                    matchArry = $.map(matchArry, function (item) {
                        return regX.test(item) ? item : null;
                    });
                });

                //--- Return the match results.
                responseFunc(matchArry);
            },
            select: function (event, ui) {
                //window.location = ui.item.url;
            }

        })
        .data("ui-autocomplete")._renderItem = function (ul, item) {
            return $("<li>")
                .append("<a>" + item.label +
                    "<br><span style='font-size: 80%;'>Desc: " + item.desc + "</span>" + 
                    "<br><span style='font-size: 80%;'>Url: " + item.url + "</span></a>")
                .appendTo(ul);
        };
    });

Code pen example

Answer 1

查看您的密码笔后，我有一个建议。就个人而言，我不是SecureString的粉丝所以我在大多数情况下都避免使用它。

这是我的建议：

<强>的JavaScript

.map()

工作示例：https://jsfiddle.net/Twisty/qeqymya1/

将数据传回$(function() { var adminPages = [{ "label": "Pages", "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit libero, malesuada nec orci viverra, elementum iaculis orci.", "url": "#" }, { "label": "Page categories", "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit libero, malesuada nec orci viverra, elementum iaculis orci.", "url": "#" }]; $.each(adminPages, function(i, val) { $("#admin-links").append("<div class='large-8 medium-12 columns'><a href='" + val.url + "'><h2>" + val.label + "</h2></a><p>" + val.desc + "</p></div>"); }); $(".admin-search").autocomplete({ source: function(requestObj, responseFunc) { var matchArry = []; var srchTerms = $.trim(requestObj.term).split(/\s+/); console.log("1 - searching"); $.each(srchTerms, function(J, term) { $.each(adminPages, function(key, val) { console.log("Is '" + term + "' in '" + val.label + "'?"); if (val.label.toLowerCase().indexOf(term) != -1) { console.log("Yes."); matchArry.push(adminPages[key]); } }) }); //--- Return the match results. responseFunc(matchArry); }, select: function(event, ui) { console.log("2 - selected"); console.log("Navigating to: " + ui.item.url); window.location = ui.item.url; } }).data("ui-autocomplete")._renderItem = function(ul, item) { return $("<li>") .append("<a>" + item.label + "<br><span style='font-size: 80%;'>Desc: " + item.desc + "</span>" + "<br><span style='font-size: 80%;'>Url: " + item.url + "</span></a>") .appendTo(ul); }; });时，您希望传递包含所需元素的对象数组。您的原始代码只传递了一个数组，其中包含匹配的标签。

此解决方案传回包含responseFunc，label和desc元素的对象数组。

Jquery ui以随机顺序自动完成搜索单词并链接到url

1 个答案: