为 AutoSuggest 和触发器添加 attr @答案

【问题标题】：Add attr for AutoSuggest and Trigger @为 AutoSuggest 和触发器添加 attr @
【发布时间】：2013-06-22 20:23:06
【问题描述】：

我正在尝试使用触发器 @ 和 href 为用户名创建用户名以链接到他们的个人资料页面。我刚刚制作了 php 脚本，它也能正常工作，但我对 jQuery 没有太多经验，所以我的问题是我不知道如何为用户名添加 url。

我希望 jQuery 在用户输入 @user..... 时激活，并且当它显示自动建议时，必须有一个链接，即使在您输入 @user.. 时也是如此，例如 facebook。我现在做的是：

$(function() {

    //autocomplete
    $("#username").autocomplete({
        $("#username").attr('href'),
        source: "hassearch.php",
        minLength: 1
    });             

});

但它并不完全有效，如果你能帮助我如何使用 jQuery 以正确的方式工作，谢谢你，然后我可以学到很多关于 jQuery 的知识！

更新：我找到了一个理想的 jQuery 编码：Implementing jquery UI autocomplete to show suggestions when you type "@" - 但我现在的问题是，如何加载 php 文件以获取数据库中的用户？

我想在标签中加载php文件：

    var availableTags = [--> to load php file <--];

function split(val) {
    return val.split(/@\s*/);
}

function extractLast(term) {
    return split(term).pop();
}

$("#tags")
// don't navigate away from the field on tab when selecting an item
.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 the user typed an "@": */
        if (term.indexOf("@") >= 0) {
            term = extractLast(request.term);
            /* If they've typed anything after the "@": */
            if (term.length > 0) {
                results = $.ui.autocomplete.filter(
                availableTags, term);
            /* Otherwise, tell them to start typing! */
            } else {
                results = ['Start typing...'];
            }
        }
        /* Call the callback with the results: */
        response(results);
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function(event, ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join("");
        return false;
    }
});

【问题讨论】：

标签： jquery facebook triggers attr autosuggest

【解决方案1】：

只是为了说明您采用的解决方案：

jQuery UI Autocomplete 的source 选项用于指定一个数组，该数组包含在触发小部件时将在下拉列表中显示的项目。它可以定义为这样的数组、返回这样的数组的函数或生成这样的数组的资源的 URL。

如果最终成为source 的值的数组为空，则小部件不会显示下拉列表。因此，将source 定义为仅在 @ 输入时能够返回非空数组的函数将使小部件按您的意愿运行。而且由于它是一个函数，因此您可以使用任何您想要的数据来获取数组，包括从针对 php 文件的 ajax 调用获取的数据；）。

查看Mentionator，如果您正在寻找使用此类功能以提供提及创建和管理功能的现有产品（提及是您正在尝试使用自动完成创建），以及有用的辅助功能。它确实由您维护:)。

【讨论】：