模糊自动完成和ul li

I'm beginner in PHP and JS and i have a problem in a function when I assigned a blur function. In fact, i have autocompletion in an INPUT where appears results in UL LI lists. But when i click out of the input the list don't disappear. I tried for 4 days many solution on stack and other sites but impossible to do what i want ! When the list disappear it's impossible to click an element on list to keep it in the input. Otherwise, it's impossible to hide the list when i click anywhere. Please could you give me some help please. Here is a little piece of my problem : (sorry for my bad english ^^)

function megaFunction() {$('.recherche').on('keyup',autocomplete);}



function autocomplete() {
    var searchField = $(this);


        var keyword = searchField.val();
        var typ_id = searchField.data('type');

        $.ajax({
            url: 'autocomplete.php',
            type: 'POST',
            data: {keyword:keyword,typ_id:typ_id},
            success:function(data){
                searchField.next().html(data);
                searchField.next().find('li').on('click',function(){
                searchField.val($(this).text());
                searchField.next().hide();

                })
            }
        });

} 

AND the HTML FORM

 <tr data-id="'.$typ_id.'" >
            <td class="add input_container">
                    <input type="text" class="recherche" data-type="'.$typ_id.'" data-champs="intitule"size="75"/> 

                    <ul class="mets_list_intitules ui-autocompletes"></ul>
            </td>

----> AND I add list (LI) after SQL QUERY in autocomplete.php

foreach ($list as $rs) {
echo '<li class="liste">'.$rs['mets_intitules'].'</li>';}

Where can I put blur function to hide list when i click anywhere but with keeping item of liste if i click an element of the UL LI? Thanks in advance because i'm going to be crazy ! ;)