Question

我花了不少时间尝试使用各种自动完成插件来使用JQuery。

然后我找到了以下教程： How to Use the jQuery UI Autocomplete Widget

本教程是旧的，使用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个问题：

一个明显的错误是.item的使用已从JQuery UI-1.10中删除。
尝试使用两个库的较新版本时，会在文本框中保留默认文本。默认文本来自JQuery-UI CSS，类似于“你有2个结果。”
似乎使用JSONP。是否可以接受JSON？

任何帮助都会很棒！

Answer 1

是的，只需使用JSON。

$('#someField').autocomplete({
      source: "friends.php?autocomplete=someField"
});

这将使用额外的term参数进行回调以进行自动完成;并期望一组字符串或具有label和value属性的对象。

我已将callback参数名称更改为autocomplete，因为您可能拥有多个参数名称;并且最好使用有意义的＆amp;描述性术语。

请参阅：http://docs.jquery.com/UI/API/1.8/Autocomplete

希望这有帮助。

JqueryUI 1.8和自动完成

1 个答案: