0

このチュートリアルで見られるjQueryオートコンプリートプラグインコードを参照しています：http： //net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

このチュートリアルの問題は、サーバー上で見つかったアイテムのみをサポートすることです。私がやりたいのは、ユーザーがサーバー上にあるアイテムを使用できるようにすることです（現在は機能します）が、プラグインを壊すことなく新しい値を入力できるようにすることもできます...例：ユーザーのメールアドレスを入力できます、Enterキーを押してから、プラグインの使用を続行します。サーバーで別のアイテムを見つけて、もう一度Returnキーを押します。

アイデア？可能？

4

1 に答える 1

2

入力されている内容を提案のリストに追加してみてください。そうすれば、基本的に「req.term」を使用して入力内容を選択できます。このような：

//process response
$.each(data, function(i, val){                              
    suggestions.push(val.name);
});
//append what has been typed in so it's available for selection
suggestions.push(req.term);
//pass array to callback
add(suggestions);

次に、select：関数で、選択範囲がまだ存在しない場合は、ajax呼び出しを使用してデータベースに挿入できます。

//define select handler
select: function(e, ui) {

    //create formatted friend
    var friend = ui.item.value,
        span = $("<span>").text(friend),
        a = $("<a>").addClass("remove").attr({
            href: "javascript:",
            title: "Remove " + friend
        }).text("x").appendTo(span);

    //add friend to friend div
    span.insertBefore("#to");

    //insert selected email if doesn't already exists
},

入力時にフォーマットした友達を挿入するためのキープレスの例を次に示します。

$("#to").keypress(function(e){
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //Enter keycode
        e.preventDefault();

        //create formatted friend
        var friend = $(this).val(),
            span = $("<span>").text(friend),
            a = $("<a>").addClass("remove").attr({
                href: "javascript:",
                title: "Remove " + friend
            }).text("x").appendTo(span);

        //add friend to friend div
        span.insertBefore("#to");

        $(this).autocomplete('close');
    }
});
于 2010-09-24T22:25:39.340 に答える