(function(){
$(document).on('keyup', '.search-bar input[name="q"]', function() {
var a, b, c, d, e, f, g;
a = $(this), b = a.closest('form'), c = b.find('.display'), d = a.val(), e = a.attr("input-min-length") ? a.attr("input-min-length").val.to_int : 1, f = b.attr('action'), g = b.attr('method');
c.empty(), a.removeClass("search-loading");
if (!$.trim(d) || (e > d.length)) return c.hideDropDown();
a.addClass("search-loading")
$.ajaxq.clear(f), $.ajaxq(f,{
url : f,
type : g,
dataType: 'html',
data : b.serialize(),
success: function (h) {
return c.append(h), c.showDropDown()
},
error: function () {
return c.empty(), c.hideDropDown()
},
complete: function(){
return a.removeClass("search-loading")
}
});
}).on('focus', '.search-bar input[name="q"]', function() {
var a;
a = $(this).parent().find('.display');
a.showDropDown()
}).on('focusout', '.search-bar input[name="q"]', function() {
var a;
a = $(this).parent().find('.display');
a.hideDropDown()
});
}.call(this),
function(){
$(document).on('click', 'a[data-form-url]', function() {
var a, b, c, d;
a = $(this), b = a.attr('data-form-url'), c = a.attr('data-id'), d = a.attr('form-id');
if (!$.trim(b) || !$.trim(c) || !$.trim(d)) return;
$.ajaxq.clear(b), $.ajaxq(b,{
url : b,
type : "POST",
dataType: 'json',
data : {
id: c
},
success: function (h) {
return $('#' + d).loadJSON(h)
}
});
});
}.call(this));
<body style="zoom: 1;">
<form accept-charset="UTF-8" action="/oauth/user_search" class="data-search-to-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="3pSfnCXaQSAafpCV6Gy+gnJgfCRqt8El42dMAN0lM3Y="></div>
<div class="search-bar">
<span class="message" style="display: none;"></span>
<input name="id" type="hidden" value="test">
<input type="text" name="q" placeholder="Search for user" tabindex="1" autocapitalize="off" autocomplete="off" spellcheck="false" class="">
<div class="display hidden" style="display: block;"> <a class="choice" data-form-url="/oauth/user_details" data-id="28" form-id="test" href="#">
<span class="prefix">
<span class="avatar" avatar-id="28"></span>
</span>
<span class="name">Rob Abot ?</span>
</a>
<a class="choice" data-form-url="/oauth/user_details" data-id="29" form-id="test" href="#">
<span class="prefix">
<span class="avatar" avatar-id="29"></span>
</span>
<span class="name">Abot Inc.</span>
</a>
<a class="choice" data-form-url="/oauth/user_details" data-id="27" form-id="test" href="#">
<span class="prefix">
<span class="avatar" avatar-id="27"></span>
</span>
<span class="name">Robber Abot Abot</span>
</a>
</div>
</div>
</form>
<div id="test">
<span id="email"></span>
<span id="id"></span>
<span id="profile_id"></span>
</div>
The a tag 'click' event is not firing when the parent has a 'focus' and 'focusout' event. What should be the proper implementation? Thank you!