2

助けが必要です。次のケース シナリオを機能させようとして行き詰っています: メール入力フィールドがあり、次のように入力します: foo@y - yahoo.com を提供するオートコンプリート ボックスがポップアップするはずです (たとえば)。この提案に従うと、最終的な値は次のようになります: foo@yahoo.com

私はこのコードを書きました (別の jquery UI サンプルを変更しました): 


        $( "#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: 3,
                source: function( request, response ) {
                            var mail_regex = /^([\w.]+)@([\w.]+)$/;
                            var match = mail_regex.exec(request.term);
                            if (match)
                                var matcher = new RegExp( "^" + match[2], "i" );
                            response( $.grep( availableTags, function( item ){
                                return matcher.test( item );
                            }) );
                 },
                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;
                }
            });

完全に動作するインタラクティブなサンプル: http://jsfiddle.net/rRF2s/3/

ただし、foo@をyahoo.comだけに置き換えます-この動作をオーバーライドする方法を一生理解できません...

Javascript/jQuery マスター - 助けてください! この目標を達成する方法は？やってみました: return match[1]+matcher.test( item ) ですが、うまくいきません。

4

2 に答える 2

3

完全なコードは次のとおりです。

$(function() {
    var availableTags = [
        "Yahoo.com",
        "Gmail.com"
    ];
    function extractLast( val ) {
        if (val.indexOf("@")!=-1){
            var tmp=val.split("@");
            console.log(tmp[tmp.length-1]);
            return tmp[tmp.length-1];
        }
        console.log("returning empty");
        return "";
    }

    $( "#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: 1,
            source: function( request, response ) {
                        var mail = extractLast(request.term);
                        if(mail.length<1){return;}
                        var matcher = new RegExp( "^" + mail, "i" );
                        response( $.grep( availableTags, function( item ){
                            return matcher.test( item );
                        }));
             },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = this.value.split(", ");
                // remove the current input
                var ml=terms[terms.length-1].split("@")[0];
                terms.pop();
                // add the selected item
                terms.push( ml+"@"+ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
            }
        });
});
于 2012-11-25T15:06:45.603 に答える
3

select関数は結果の値を で代入していますthis.value =。ただし、入力値をドロップダウン値に追加するのではなく、完全に置き換えています。

以下を十分にテストしなくても、単純化された関数は必要に応じて機能するようです。

select: function( event, ui ) {
    this.value = this.value.substring(0, this.value.indexOf('@') + 1) + ui.item.value;
    return false;
}

これは、たとえば入力用に既に入力された値の最初の部分を取得foo@しfoo@ya、ドロップダウンから選択した項目の値を追加します。

誰かが@シンボルを入力したときにドロップダウンをトリガーしたい場合があります (私にはより直感的に思えます)。その場合、ユーザーが入力した値を正しく抽出するために、この関数を変更する必要がある場合もあります。

于 2012-11-25T15:07:30.813 に答える