如何在jQuery自動完成中給添加新項選項？

Question

我已經實現了自動完成功能。 我有bootstrap Modal實現。 我要做的就是在自動完成響應中添加一個新選項，即在末尾Add new Item 。

那么如何實現這一點。 我的自動完成代碼如下：

$(document).ready(function () {
            var makesCache = {}, modelsCache = {}, makesXhr, modelsXhr;

            $('#<%= txtName.ClientID%>').autocomplete({
                source: function (request, response) {
                    var term = request.term;
                    if (term in makesCache) {
                        response(makesCache[term]);
                        return;
                    }
                    if (makesXhr != null) {
                        makesXhr.abort();
                    }
                    makesXhr = $.getJSON('AutoComplete.svc/GetProjects', request, function (data, status, xhr) {
                        makesCache[term] = data.d;
                        if (xhr == makesXhr) {
                            response(data.d);
                            makesXhr = null;
                        }
                    });
                }
            });
        });

我希望通過自動完成功能中的選項可見的模式的html：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

那么如何實現呢！

Answer 1

這可以通過對“自動完成”的“打開”事件進行一些更改來完成。

API參考： http ： //api.jqueryui.com/autocomplete/#event-open

$(document).ready(function () {
        var makesCache = {}, modelsCache = {}, makesXhr, modelsXhr;

        $('#<%= txtName.ClientID%>').autocomplete({
            source: function (request, response) {
                var term = request.term;
                if (term in makesCache) {
                    response(makesCache[term]);
                    return;
                }
                if (makesXhr != null) {
                    makesXhr.abort();
                }
                makesXhr = $.getJSON('AutoComplete.svc/GetProjects', request, function (data, status, xhr) {
                    makesCache[term] = data.d;
                    if (xhr == makesXhr) {
                        response(data.d);
                        makesXhr = null;
                    }
                });
            },
            'open': function(e, ui) {
                    // Appends a div at the end, containing the link to open myModal
                    $('.ui-autocomplete').append("<div id='endtext'><a href='#' data-toggle='modal' data-target='#myModal'>Click here to display my modal</a></div>");
    }
        });
    });