0

同じ入力フィールドに複数の値を追加したい jquery オートコンプリート フィールドがあります。ここに表示されている例では、http://jqueryui.com/demos/autocomplete/#multiple値とラベルが同じであるため、select イベントの内容で問題なく動作します。ただし、私の場合、ユーザーが名前を選択すると、入力ボックスにラベルを表示したいのですが、フォームを送信するときに値を投稿したいと思います。それを回避するために、フォームに隠しフィールドを追加し、値を取得する別の配列を用意しましたが、ユーザーがバックスペースで値を戻したときに問題が発生しました。それはまだ私の配列にあります。それを修正する方法はありますか？またはおそらくより良い解決策ですか？ 

var friend_data = [{"label":"JOhn Doe","value":"12345"},{"label":"Jane Doe","value":"123456"}];

$( "#friends" )
    // 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: friend_data,
        source: function( request, response ) {
            // delegate back to autocomplete, but extract the last term
            response( $.ui.autocomplete.filter(
                friend_data, extractLast( request.term ) ) );
        },
        delay: 0,
        autofocus: true,
        focus: function(event, ui) {
            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.label );
            friend_id_list.push( ui.item.value );
            console.log(friend_id_list);
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join( ", " );
            console.log(this.value);
            return false;
        }   
    })
    .data( "autocomplete")._renderItem = function( ul, item ) {
        var fb_pic_path = '<img src="http://graph.facebook.com/' + item.value + '/picture?type=square">' ;

        return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + fb_pic_path + item.label + "</a>" )
        .appendTo( ul );
    };
4

2 に答える 2

0

select一致する値を指すラベルをキーとする別の配列を作成し、オートコンプリートの関数内から入力する傾向があります。

friend_id_list選択ごとにデータを入力するのではなく、#friendsエントリを分割してそのインデックス (ハッシュ) の内容と比較することで、送信またはぼかしの一部としてサーバーに返される値のリストを作成します。

例: (NB 未テスト)

var selections = {}; //instantiated earlier
var friend_id_list = [];
<snip>
select: ...
        selections[ui.item.label] = ui.item.value;
        ...

$('#friends').blur( function(){
    var entries = $(this).val().split(', *'); // in case space character removed..
    var friend_id_list = [];
    for(entry in entries){
        if(selections[entry]) friend_id_list.push(entry);
    }
    $('#myhiddenfield').val(friend_id_list.join(','));
});

以前にオートコンプリートされた値と一致しないものはすべて削除されます。

于 2012-06-05T02:04:33.427 に答える
0

これを投稿するのは少し気が進まないのですが、b/c 私は javascript/jquery を初めて使用するので、これが最善の方法である可能性はありませんが、私と同じくらい初めてで、機能するものを探しているだけの場合は、これが物事を同期させるために今のところ使用しているもの。 

$("#friends").keyup(function(event) {    
    var friend_label_count = this.value.split(",").length - 1;
    var friend_value_count = friend_id_list.length;
    if (friend_label_count < friend_value_count) {
        friend_id_list.pop();
        }
});
于 2012-06-05T00:35:32.533 に答える