0

使用 jQuery UI 自动完成并定位一个 contenteditable，具有多个以“@”字符开头的“标签”，我有一个我正在尝试做的所有事情的示例，但缺少一件事。我需要为数据提取远程源。

在下面，您将看到“标签”数组以及在“源”选项末尾的中途引用的数组。我尝试了各种 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);
        }
    }
;
4

1 回答 1

0

这是您更新的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);
?>
于 2013-08-31T23:15:23.143 回答