Question

使用jQuery UI自动完成并定位一个满足于“@”字符开头的多个“标签”，我有一个我想要做的事情的例子，但缺少一件事。我需要为数据提取远程源。

下面您将看到“tags”数组，该数组在“source”选项的末尾引用了一半。我已经尝试了各种jQuery.ajax和jQuery.getJson方法来返回数据，但似乎无法做到这一点。 jQuery UI示例都让我失望，因为它们删除了某些已经运行的功能。由于“this.value”不适用于可信任的DIV（仅适用于表单字段），并且在代码执行后运行简单的getJson，我确信有一种方法，但我不知所措。

如果有人可以使用此数据源来帮助我获得结果，那么它真的很棒。 http://jqueryui.com/resources/demos/autocomplete/search.php

我尝试了jqueryui.com/autocomplete/演示的许多变体，并且有太多不断上升的问题。

http://jsfiddle.net/martyk/T45rQ/7/

var tags = [
    "example.com"
    ,"akamai.com"
    ,"2charts.com"
    ,"gmail.com"
    ,"jquery.com"
    ,"yahoo.com"
    ,"ymail.com"
    ,"hotmail.com"
];
var startTyping = "Start Typing";


function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}
function split( val ) {
    return val.split( /@/ );
}
function extractLast( term ) {
    return split( term ).pop();
}

$("#MyText")
    .bind("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    })
    .autocomplete({
        minLength: 0,
        source: function (request, response) {
            var term = request.term,
                results = [];
            if (term.indexOf("@") >= 0) {
                term = extractLast(request.term);
                if (term.length > 0) {
                    results = $.ui.autocomplete.filter(tags, term);
                } else {
                    results = [startTyping];
                }
            }
            response(results);
        },
        focus: function () {
            return false;
        },
        select: function (event, ui) {
            if (ui.item.value !== startTyping) {
                var value = $(this).html();
                var terms = split(value);
                terms.pop();
                terms.push(ui.item.value);
                $(this).html(terms.join("@"));
                placeCaretAtEnd(this);
            }
            return false;
        }
    })
    .data("autocomplete")._renderItem = function (ul, item) {
        if (item.label != startTyping) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a><div>" + item.label + "</div></div></a>")
                .appendTo(ul);
        } else {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.label + "</a>")
                .appendTo(ul);
        }
    }
;

Answer 1

这是您更新的jsFiddle

稍微重写.autocomplete()选项：

$("#MyText")
    .bind("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    })
    .autocomplete({
        minLength: 0,
        search: function (request, response) {
            var term = request.term,
                results = [];
            if (term.indexOf("@") >= 0) {
                term = extractLast(request.term);
                if (term.length > 0) {
                    results = $.ui.autocomplete.filter(tags, term);
                } else {
                    results = [startTyping];
                }
            }
            response(results);
        },
        source: 'search.php',
        focus: function () {
            return false;
        },
        select: function (event, ui) {
            if (ui.item.value !== startTyping) {
                var value = $(this).html();
                var terms = split(value);
                terms.pop();
                terms.push(ui.item.value);
                $(this).html(terms.join("@"));
                placeCaretAtEnd(this);
            }
            return false;
        }
    })

假设您有一个存储在数据库中的所有这些域名的列表。您的search.php文件看起来像这样：

<?
$return_data = [];
$term = $_REQUEST[term];
$q = "SELECT domain_name AS value, domain_name AS label FROM domain_table WHERE domain_name LIKE '" . $term . "%'";
$r = $mysqli_db->query($q);
while ($row = $r->fetch_assoc()) {
    array_push($return_data,$row);
}
$r->free();
echo json_encode($return_data, JSON_PRETTY_PRINT);
?>

从可信任的div中的自动完成获取远程源的Json结果

1 个答案: