Blur problems in jQuery search popup

Question

I implemented a search box that acts like a filter. When the user clicks a button in the search area, a drop-down list is displayed showing all the possible options. Input in the search box filters the results. A click outside the window hides the results.

It uses the following HTML / CSS hearchy

&ltdiv class="search"> &ltinput type="text" name="search" value="search" placeholder="search"/> &ltdiv class="results"> &ltdiv class="result"> Result 1 &lt/div> &ltdiv class="result"> Result 2 &lt/div> ... &lt/div> &lt/div> 

I use jQuery to show / hide the focus / blur dropdown event list

 var searchBar = { init : function(){ $('input[name=search]').focus(searchBar.openSearch); $('input[name=search]').blur(searchBar.closeSearch); $('div.result').each(function(e){ $(this).click(draftboardDynamic.selectResult); }); }, openSearch : function(e){ $('div.results').show(); }, closeSearch : function(e){ $('div.results').hide(); }, selectResult : function(e){ console.log($(this)); }, } $(document).ready(searchBar.init); 

This works very well and I can open, close and search (JS removed for clarity) without any problems. The only bit I came across is the selection of results. The blur event seems to trigger the result.click events, and the handler is never called. I can fix this problem by removing the blur snap, however I cannot figure out how to close the drop-down list when the input loses focus.

Any ideas?

Answer 1

This is complicated because the .blur event always fires before .click . There are two possible solutions, none of which are particularly desirable:

• Untie the .blur event .blur you hover over div.result . Cancel it on the mouse.
• Instead, with .blur a click event to the document and make sure that the target is not one of the search components.

Answer 2

Use the "mousedown" event instead of the "click":

 $(".container") .on("blur focus", "input", function({type}) { $(this).next().toggle(type === "focusin"); }) .on("mousedown", "ul", function({target: {innerText}}) { $(this).prev().val(innerText); }); 

 $(".container") .on("blur focus", "input", function({type}) { $(this).next().toggle(type === "focusin"); }) .on("mousedown", "ul", function({target: {innerText}}) { $(this).prev().val(innerText); }); 

 .container { position: relative; display: inline-block; } input, ul { border: solid 1px black; } ul { list-style: none; position: absolute; left: 0; right: 0; z-index: -1; margin: -1px 0 0; padding: 0; } label, li { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="_input"><b>Select value:</b></label> <div class="container"> <input id="_input"> <ul style="display:none"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <a href="#_input">Picked a wrong value?</a> 

Answer 3

Binding and decoupling the blur event on the mouse over the mouse. For those who are interested, I created a fiddle to demonstrate this: https://jsfiddle.net/AdamKMorris/uoqvfy2L/

My example uses standard jquery and .bind / .unbind to switch the search box:

 $("#searchButton").click(function() { $("#searchBar").slideToggle(); $("#searchText").focus(); }).mouseover(function() { $("#searchText").unbind('blur'); }).mouseout(function() { $("#searchText").bind('blur', function() { $("#searchBar").slideToggle("fast"); }); });