0

我正在引用本教程中看到的 jQuery 自动完成插件代码：http: //net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

本教程的问题在于它只支持在服务器上找到的项目。我想做的是允许用户使用在服务器上找到的项目（因为它现在可以工作）但也允许用户在不破坏插件的情况下输入新值......例如，你可以输入用户的电子邮件地址，按回车，然后继续使用插件，也许然后在服务器上找到另一个项目并再次点击返回..

想法？可能的？

4

1 回答 1

2

您可以尝试将正在输入的内容附加到建议列表中。这样，他们基本上可以使用“req.term”选择他们正在输入的内容。像这样：

//process response
$.each(data, function(i, val){                              
    suggestions.push(val.name);
});
//append what has been typed in so it's available for selection
suggestions.push(req.term);
//pass array to callback
add(suggestions);

然后，在 select: 函数中，如果选择不存在，您可以使用 ajax 调用将选择插入到数据库中。

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

    //insert selected email if doesn't already exists
},

这是一个按键示例，用于在输入时插入格式化的朋友：

$("#to").keypress(function(e){
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //Enter keycode
        e.preventDefault();

        //create formatted friend
        var friend = $(this).val(),
            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");

        $(this).autocomplete('close');
    }
});
于 2010-09-24T22:25:39.340 回答