Wstawianie przycisku html jako ostatniego elementu listy autouzupełniania jquery ui

Question

Próbowałem wstawić przycisk html jako ostatni element listy autouzupełniania jquery ui. Przycisk ma otworzyć okno z opcją dodania nowego elementu do listy autouzupełniania. Jest to kod, który wstawia przycisk wewnątrz listy autouzupełniania:

data.push({label: '<input type="button" name="btn_name_field" id="btn_name_field" title="Create" class="button firstChild" value="Add new">'}); 
response(data); 

Jest to funkcja, która otwiera okienko:

$(document).on("click", "#btn_name_field", function() { 
    open_popup("Street_Address", 400, 180, "", true, false, {"call_back_function":"set_return","form_name":"EditView"}, "single", true); 
}); 

Aby móc wstawić html wewnątrz jako " etykieta”, musiałem skorzystać z tej funkcji:

$[ "ui" ][ "autocomplete" ].prototype["_renderItem"] = function(ul, item) { 
return $("<li></li>") 
    .data("item.autocomplete", item) 
    .append($("<a></a>").html(item.label)) 
    .appendTo(ul); 
}; 

Co się dzieje: przycisk pojawia się dobrze i robi to, co ma (otwiera się okienko) Howeve r po otwarciu okna popup cały kod z wejścia html zostanie wstawiony do pola tekstowego. Jest to zachowanie logiczne, ponieważ kod jest wstawiany jako etykieta, , ale czy ktoś wie, jaki byłby najlepszy sposób wstawienia przycisku html jako ostatniego elementu autouzupełniania?

góry dzięki

Answer 1

Jeśli używasz jQueryUI> = 1,9, to wydaje się dobrym zadanie dla response zwrotnego. To wywołanie zwrotne jest wywoływane zaraz po zapełnieniu tablicy źródłowej, ale przed wyświetleniem elementów użytkownikowi. Możesz wykorzystać to wydarzenie, aby wypchnąć nowy obiekt "guziki" na tablicy sugestii.

Ten obiekt "button" ma właściwość label, która jest kodem przycisku, który zamierzasz dodać, a także ma właściwość button ustawioną na true. Można użyć tej właściwości, aby anulować domyślną akcję zdarzenia select:

$.ui.autocomplete.prototype._renderItem = function (ul, item) { 
    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append($("<a></a>").html(item.label)) 
     .appendTo(ul); 
}; 

$("#auto").autocomplete({ 
    source: /* source */ 
    response: function (event, ui) { 
     // Add the "button" object to the list of suggestions: 
     ui.content.push({ 
      label: "<input type='button' value='click me' class='mybutton' />", 
      button: true 
     }); 
    }, 
    select: function (event, ui) { 
     // If this is the button, don't populate the <input> 
     if (ui.item.button) { 
      event.preventDefault(); 
     } 
    } 
}); 

Również polecam użyciu delegowanego obsługi zdarzeń zamiast pisania kodu obsługi zdarzeń wewnątrz znaczników jesteś generowania za pomocą przycisku . Jednym ze sposobów, aby to zrobić, to dać przycisk klasę (Użyłem .mybutton w przykładzie), a następnie napisz delegowanego obsługi zdarzeń za pomocą on:

$(document).on("click", ".mybutton", function() { 
    alert('clicked!'); 
}); 

Oto przykład praca: http://jsfiddle.net/J5rVP/35/