Question

After search and click on result search and click on plus(button add input) next to input “INSERT VALUE HERE” in the example, in new input $('.auto_complete').keyup(function () { ... not work.

I believe that have to bind the events separately and use a closure so that each element has its own set of variables(or change the logic so that only use the value in the field and don’t need any state variables),

how is it?

EXAMPLE: see here

Js full code: http://jsfiddle.net/6yPxn/

$.each:

var ac = $(this).text();
var ok = $.grep(data, function (e) {
    return e.name == ac;
})[0].units;
$.each(ok, function (bu, key) {
    //alert(key.name_units);
    $("<div class='mediumCell'/>").hide().fadeIn('slow').append('<b>' + key.name_units + '</b>', $('<div class="column" style="float: left;" />')).appendTo(".list_units");
});

Answer 1

It runs fine, but I don’t see anywhere in that code you’ve provided where you’re adding an event handler to the input box.

The issue is in http://www.binboy.gigfa.com/files/js/admin.js, somewhere around the top:

$('.auto_complete').bind('keyup',function () {
 /* ... */
});

When the page loads it binds several event handlers to input boxes and the like. When you create a new one this functionality is not added unless you’re using jQuery’s .live or something similar. As the documentation notes:

This method [.live()] is a variation on the basic .bind() method for attaching event handlers to elements. When .bind() is called, the elements that the jQuery object refers to get the handler attached; elements that get introduced later do not, so they would require another .bind() call.

I don’t really want to wade through all the nested click and delegate and bind calls, but I guarantee you that’s where your problem lies. To fix it you’ll probably need to have either the autocomplete section run on your newly created node, use .live instead, or just .clone the original.