如何在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>"); 
    } 
     }); 
    });