1

ユーザー名のトリガー@とhrefでユーザー名を作成して、プロファイルページにリンクしようとしています。私はphpスクリプトを作成したばかりで、それもうまくいきますが、jQueryの経験があまりないので、ユーザー名のURLを追加する方法がわからないという問題があります。

ユーザーが @user..... と入力したときに jQuery がアクティブになり、autosuggest が表示されたときに、Facebook のように @user.. と入力しているときと同じように、リンクが必要です。私が今やったことは：

$(function() {

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

});

しかし、それは完全に機能するわけではありません.jQueryでどのように正しく機能するかを教えていただければ、ありがとうございます.jQueryについて多くを学ぶことができます!

更新: 理想的な jQuery コーディングを見つけました: "@" を入力したときに提案を表示する jquery UI オートコンプリートの実装

タグに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;
    }
});
4

1 に答える 1

0

あなたが採用したソリューションを説明するだけです：

jQuery UI Autocompleteのsourceオプションは、ウィジェットがトリガーされたときにドロップダウン リストに表示される項目を含む配列を指定するために使用されます。そのような配列、そのような配列を返す関数、またはそのような配列を生成するリソースへの URL として定義できます。

最終的に値になる配列sourceが空の場合、ウィジェットはドロップダウン リストを表示しません。したがって、が入力された場合にのみsource空でない配列を返すことができる関数として定義すると、ウィジェットが希望どおりに動作します。また、関数であるため、php ファイルに向けられた ajax 呼び出しから取得したデータを含め、任意のデータを使用して、好きな方法で配列を取得できます ;) 。 @

メンションの作成と管理機能 (メンションは、オートコンプリートで作成しようとしているものの単一のインスタンスです)を提供するために、そのような機能を利用する既存の製品を探している場合は、Mentionatorをチェックしてください。補助機能。本当にあなたによって維持されています:)。

于 2016-07-03T20:15:27.533 に答える