jQuery autocomplete

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<style >
    .thumb-img {
        width: 25px;
        margin-right: 5px;
    }
</style>
<script type="text/javascript">

    $(document).ready(function() {
        $("#project").keypress(function() {
            //pega valor project
            var searchField = $(this).val();

            //pega json
            $.getJSON('data.php?query='+searchField, function(json){

            //complete field
            $("#project").autocomplete({
              minLength: 0,
              source: json,
              focus: function( event, ui ) {
                $("#project").val( ui.item.label );
                return false;
              }
            });

            //renderisando com html + css
            $("#project").data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                var $li = $('<li>'),
                    $img = $('<img class="thumb-img">');
                    $img.attr({
                      src: item.pic,
                      alt: item.username,
                    });
                    $li.attr('data-value', item.username);
                    $li.append('<a href="#">');
                    $li.find('a').append($img).append(item.username);
                    return $li.appendTo(ul);
                };

            });

        });

    });


    </script>

  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="project-label">Select a project (type "j" for a start):</div>
  <input id="project" autocomplete="off">
</body>
</html>