Question

So I have this jquery:

    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });


var $content = "";
$('#tags').keyup(function() {    
     $content =  $('input').attr('value'); 
     $content2 =$('.ui-widget').parent().html();
     $("#placehere").append($content2)

});


$('.ui-widget').parent().css('color', 'red');

And this HTML:

<div class="demo">
<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>
    <div id="placehere">Click</div>
</div>

I would like the results which are appended to the #placehere div to be ONLY the text inside of the input boxes that are generated by the autocomplete form.

Currently, It just copies the HTML of everything .parent() to the .ui-widget div.

Answer 1

You will not be able to pull back the active autocomplete list using the keyup event because the ui-autocomplete div has not been created yet. You can verify by putting a break point in your keyup event. You can get around that by creating a timeout or using an animated delay with callback.