使用 contenteditable div 内的自动完成功能从远程源获取 Json 结果答案

【问题标题】：Get Json results from remote source with autocomplete inside a contenteditable div使用 contenteditable div 内的自动完成功能从远程源获取 Json 结果
【发布时间】：2013-08-31 22:58:38
【问题描述】：

使用 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);
        }
    }
;

【问题讨论】：

问题是您的数据源必须将value 和label 元素作为JSON 对象的一部分。
感谢@DevlshOne。我的问题可能过于复杂。问题是试图提取远程数据，比如来自link 之类的数据源
好吧，只要您从 search.php 脚本返回数据，并在 JSON 对象中使用有效的 value 和 label 元素，就可以了。您的标签在数据库中吗？
就是这样，我似乎无法弄清楚如何从“源”选项中调用数据。当我尝试使用 jQuery 示例获取数据时，如何将其传递以替换下面几行的“tags”数组：' $.getJSON("jqueryui.com/resources/demos/autocomplete/search.php", { term: extractLast( request.term ) }, 响应);'
如果您使用外部源，您将没有tags 数组，您将获得来自源脚本search.php 的任何响应。

标签： jquery datasource jquery-autocomplete jquery-ui-autocomplete getjson

【解决方案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);
?>

【讨论】：