如何在 jquery 自动完成中添加新项目选项？答案

【问题标题】：How to Give add new item option in jquery autocomplete?如何在 jquery 自动完成中添加新项目选项？
【发布时间】：2014-09-15 18:47:27
【问题描述】：

我已经实现了自动完成功能。我已经实现了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">

那么如何实现呢！！

【问题讨论】：

这就是您要查找的内容：stackoverflow.com/questions/5705960/… 然后您可以链接锚点以打开您的模态对话框。

标签： javascript jquery jquery-ui twitter-bootstrap autocomplete

【解决方案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>");
    }
        });
    });

【讨论】：