Question

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

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

想法？可能的？

Answer 1

您可以尝试将输入的内容附加到建议列表中。这样他们就可以使用“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
},

以下是在enter上插入格式化朋友的按键示例：

$("#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');
    }
});

jQuery AutoComplete，如何接受Found＆amp;未发现的条款

1 个答案: