ie receives same ajax response
<p>I have a ajax search that filters as you type. It works fine in chrome and firefox. However, no matter what data you send, IE always returns the same response. Why is that? Below is the code:</p>

<pre><code>var cardSearch = $('&lt;div&gt;').addClass('card_search').appendTo($('body')).hide().css({'position': 'absolute', 'width': '350px', 'height': '300px', 'background': '#D5D5D5', 'padding': '10px'}).append(
    $('&lt;div&gt;').css({'background': 'whiteSmoke', 'padding': '5px', 'height': '290px', 'position': 'relative'}).append(
        $('&lt;input&gt;').css('width', '250px').bind('keyup', function(e){
            $.post('http://api.redemptionconnect.com/cards/find/?a=' + Math.random(), {data: {title: $(this).val(), limit: 10, page: 1}}, function(r){
                $('ul', cardSearch).empty();
                for( var i = 0; i &lt; r.data[0].length; i++ )
                    $('ul', cardSearch).append(
                        $('&lt;li&gt;').append(
                            $('&lt;a&gt;').attr('href', 'javascript:void(0)').html(r.data[0][i].Card.title + ' (' + r.data[0][i].CardSet.abbreviation + ')').attr('card_id', r.data[0][i].Card.id).mouseover(function(){showCardTooltip(this);})
                        ).css({'padding': '5px', 'border-bottom': '1px solid #ccc'})
                    );
            }, 'json'); 
        }),
        $('&lt;button&gt;').html('Search').css({'width': '70px', 'margin-left': '10px'}),
        $('&lt;hr&gt;').css('margin-bottom', 0),
        $('&lt;ul&gt;').css({
            'list-style-type': 'none',
            'margin': 0,
            'padding': 0,
            'width': '100%'
        })
    )
);
</code></pre>

<p>In chrome and firefox, the output is correct. In IE, the output is always the same, no matter what you type. I'm not sure what else to include. You can see it working at <a href="http://redforum.blackfireweb.com" rel="nofollow">http://redforum.blackfireweb.com</a> and click the "Search Cards" menu button.</p>
