0

オートコンプリート機能を備えたフィールドを追加しようとしています。これには JavaScript を使用しました。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css " />
    <script src="http://code.jquery.com/jquery-1.8.2.js "></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js "></script>
 <script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        function split( val ) {
            //document.write(val.length);
            return val.split( /,\s*/ );
        }
        function extractLast( term ) {
            //echo (term.length);
            //document.write(term.length);
            return split( term ).pop();
        }

        $( "#Tag_tag_name" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                var a=0;
//                if (event.keyCode === $.ui.keyCode.TAB)
//                    {
//                       a=a+1; 
//                    }
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).data( "autocomplete" ).menu.active ) {

                    event.preventDefault();

                }
//                if (event.keyCode === $.ui.keyCode.P)
//                    {
//                        alert(a);
//                    }


            })
            .autocomplete({
                minLength: 0,
                source: function( request, response ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                        availableTags, extractLast( request.term ) ) );
                },
                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;
                }
            });
    });
</script>

今、私がやりたいことは、この AvaialbleTags 変数の静的値の代わりに、データベースからの値が欲しいですか? さらに、ユーザーが追加する 3 つの値を制限したいと考えています。

誰でもこれで私を助けることができますか?

4

1 に答える 1

2

これが私がマルチコンプリートを使用しているものです

    $this->widget('ext.widgets.MultiComplete', array(
              'model'=>$model,
              'attribute'=>$attribute,
              'splitter'=>',',
              'sourceUrl'=>$this->createUrl($url),
    // additional javascript options for the autocomplete plugin
              'options'=>array(
                      'minLength'=>'1',
    ),
              'htmlOptions'=>array(
                      'size'=>'60'
                      ),
                      ));
于 2012-10-24T15:58:30.223 に答える