Dropdown list on textbox (autocomplete) disappear when no result

Question

My javascript code autocomplete call ajax to get result(json) from test2.php(query data) It's work if have result and if result is null autocomplete should disappear but don't disappear I try to get some bug or error, press F12 on browser in console appear "Uncaught TypeError: Cannot read property 'length' of null"

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$('#name1').autocomplete({
        source: function( request, response ) {
            var name = $('#name1').val();
            $.ajax({
                url: 'test2.php',
                dataType: 'json',
                data: {
                    p : name
                },
                success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            value : item.name
                        };
                    }));
                }
            });
        },
        minLength: 1,
        select: function(event, ui) {
            $(this).val(ui.item.value);
        }
    });
</script>

Please help I'm newbie jquery ajax

Answer 1

I use .autocomplete('close') to solve my problem. Thanks every answer and comment ;)

success: function(data) {
                    if(jQuery.isEmptyObject(data)){
                        $('#name1').autocomplete( "close" );
                    }else {
                        response($.map(data, function(item) {
                            return {
                                value : item.name
                            };
                        }));
                    }
                }

Answer 2

See if this helps if a empty result is returned. Any actin on Null value will throw error. So added "if(data){do some thing...}" so you can apply your logic there.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$('#name1').autocomplete({
    source: function( request, response ) {
        var name = $('#name1').val();
        $.ajax({
            url: 'test2.php',
            dataType: 'json',
            data: {
                p : name
            },
            success: function(data) {
                if(data){
                 response($.map(data, function(item) {
                    return {
                        value : item.name
                    };
                }));
            }else{alert("No result so do some thing")}
            }
        });
    },
    minLength: 1,
    select: function(event, ui) {
        var test = ui.item ? ui.item.id : 0;
         if (test > 0)
         {
          $(this).val(ui.item.value);
         }            
    }
});
</script>