Missing list items with jquery or javascript

Question

I have the following codes below and I need to make sure that when I click on the autocomplete result, and it fills the field with the values, the list of the autocomplete simply disappears:

<pre>
<style>
            ul.autocomplete_mapa_filter{
                list-style: none;
                display:block;
                float:left;
                position:absolute;
                top:20;
                z-index:999;
                border:1px solid #eeeeee;
                background:#ffffff;
                box-shadow: 1px 1px 2px #444;
            }
            ul.autocomplete_mapa_filter li{
                display:block;
                padding:5px 0;
                line-height:30px;
                border-bottom: 1px solid #eeeeee;
                width:400px;
                cursor:pointer;
            }
            ul.autocomplete_mapa_filter li:hover{
                background: #f4f4f4;
            }
            ul.autocomplete_mapa_filter li img{
                margin-left:5px;
                width:50px;
                height:50px;
                float:left;
            }
            ul.autocomplete_mapa_filter li span{
                margin-top:5px;
                margin-left:1px;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                $('#mapa_filter').keyup(function () {
                    var mapa_filter = $(this).val();
                    $.post('<?= INCLUDE_PATH; ?>/modulos/autocomplete_mapa_filter.php',
                            {search: mapa_filter},
                            function (retorno) {
                                $('.autocomplete_mapa_filter').html(retorno);
                            });
                });
                $('.autocomplete_mapa_filter').delegate('li', 'click', function () {
                    var texto_filter = $(this).text();
                    $('#mapa_filter').val(texto_filter);

                    /**estas linhas abaixo eu coloquei pra tentar fazer sumir após clicar fora, ou quando clicar no item, mais sem sucesso*/
                    texto_filter.click(function () {
                        texto_filter.hide();

                        if (!$(this).closest('li').length) $('.autocomplete_mapa_filter').removeClass("li");
                    });
                });
            });
        </script>

</pre>

Answer 1

Assuming your HTML is something similar to:

<input type="text" placeholder="Procurando por algo?" id="mapa_filter" />
<ul class="autocomplete_mapa_filter"></ul>

Your js would be:

<script type="text/javascript">
    var timeout;
    $(function () {
        $('#mapa_filter').keyup(function () {
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                $.post(
                    '<?= INCLUDE_PATH; ?>/modulos/autocomplete_mapa_filter.php',
                    { search: mapa_filter },
                    function (retorno) {
                        $('.autocomplete_mapa_filter').html(retorno).fadeIn();
                    });
            }, 2000);
        });

        $('.autocomplete_mapa_filter').delegate('li', 'click', function () {
            var texto_filter = $(this).text();
            $('#mapa_filter').val(texto_filter);
            $(".autocomplete_mapa_filter").fadeOut();
        });
    });
</script>

I used the timeout because you make a request for each keyup, so I thought it better to have started a search and given a 2 seconds break, but you can remove it quietly. This would also avoid unnecessary requests but these definitions are yours, ok?

Regarding to disappear the list, I only gave a fadeOut in ul, when you do the search, fadein will try to show the list again for selection.

(=