How to Give add new item option in jquery autocomplete?

Question

I have autocomplete implemented. I have implementation of bootstrap Modal. All i want to do is to add a new option in autocomplete response i.e Add new Item at the end.

So how to implement this. My code for autocomplete is as:

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

The html for the modal which i want to be visible by the option inside autocomplete:

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

So how to implement this!!

This is what you are looking for: http://stackoverflow.com/questions/5705960/appending-an-item-to-a-jquery-ui-autocomplete You can then link the anchor to open your modal dialog box. — Mysteryos, Jul 24 '14 at 09:31

score 3 · Accepted Answer · answered Jul 24 '14 at 09:38

This can be done by implementing some changes in the "open" event of Autocomplete.

API reference: 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>");
    }
        });
    });

How to Give add new item option in jquery autocomplete?

1 Answers1