Feuer Click-Ereignis von li vor ul versteckt

Question

habe ich eine Textbox und dann eine ungeordnete Liste wie unten:

<div> 
    <input type="text" /> 
    <button>Go</button> 
</div> 
<ul> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
</ul> 

Jetzt im Unschärfe Ereignisse von Textbox:

$('input').on('blur', function() { 
    $('ul').hide(); 
}); 

Der obige Code funktioniert fein.

Ich versuche, etwas wie combobox zu machen.

Also, mein gewünschtes Verhalten ist:

Wenn Textbox den Fokus verliert, sollten Vorschläge verstecken (die oben gezeigt wird)

Wenn auf einem Vorschlag geklickt hat, sollte ihr Click-Ereignis ausgelöst und dann Text dieses Vorschlags gefüllt werden soll in Textbox und dann sollten alle Vorschläge

Also, für die zweite Funktionalität verbergen, wenn ich auf jeden li den click Fall li klicken soll abfeuern und dann ul versteckt werden soll.

Answer 1

var items = ["Apple", "Banana", "Celery", "Peach", "Plum"]; 
 

 
$('input').on('input', function() { 
 
    var text = $(this).val(); 
 
    $('ul').show().empty().append(items.filter(function(item) { 
 
    return item.match(new RegExp(text, 'i')); 
 
    }).map(function(text) { 
 
    return $('<li>').text(text); 
 
    })); 
 
}); 
 

 
$('input').on('blur', function() { 
 
    $('ul').fadeOut(); 
 
}); 
 

 
$('ul').on('click', 'li', function() { 
 
    $('input[type=text]').val($(this).text()); 
 
    $('ul').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="text" /> 
 
    <button>Go</button> 
 
</div> 
 
<ul> 
 
</ul>

Answer 2

Aktualisieren Sie einfach die Textbox und dann die ul innerhalb der gleichen Klick-Ereignis der li.

$("li").on("click", function() { 
    $("input[type=text]").val(this.text()); 
    $("ul").hide(); 
}); 

Sorry, wenn die jQuery nicht perfekt ist - ich benutze es nicht so oft. Das sollte sowieso helfen.