0

さまざまなオートコンプリート プラグインを JQuery で動作させるためにかなりの時間を費やしました。

次に、次のチュートリアルを見つけました: jQuery UI オートコンプリート ウィジェットの使用方法

このチュートリアルは古く、Jquery 1.4 と JQuery UI 1.8 を使用しています。その中の Javascript コードを変更して、JQuery2.0 および JQuery UI 1.10 に準拠させるにはどうすればよいですか?

<script type="text/javascript">  
$(function(){  

    //attach autocomplete  
    $("#to").autocomplete({  

        //define callback to format results  
        source: function(req, add){  

            //pass request to server  
            $.getJSON("friends.php?callback=?", req, function(data) {  

                //create array for response objects  
                var suggestions = [];  

                //process response  
                $.each(data, function(i, val){                                
                suggestions.push(val.name);  
            });  

            //pass array to callback  
            add(suggestions);  
        });  
    },  

    //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");  
        },  

        //define select handler  
        change: function() {  

            //prevent 'to' field being updated and correct position  
            $("#to").val("").css("top", 2);  
        }  
    });                       
});  

これには3つの問題があるようです:

  1. 明らかなエラーの 1 つは、JQuery UI-1.10 から削除された .item の使用です。
  2. 両方のライブラリの新しいバージョンを使用しようとすると、テキスト ボックスにデフォルトのテキストが残ります。デフォルトのテキストは JQuery-UI CSS から取得され、「You have 2 results.」のようなものです。
  3. JSONPを使用しているようです。JSONだけを受け入れることは可能ですか?

これについての助けは素晴らしいでしょう!

4

1 に答える 1