I'm trying to 'popup' jquery autocomplete result under a textbox using the popover components of bootstrap.
I render results of the autocomplete query in an hidden div (#wrapper) and I want on render completion to set the content of my popover and show it.
For this I've overloaded the _renderItem function which append my results' divs inside the hidden container (#wrapper).
I thought the response function is called when _renderItem calls are done but I'm missing something as response function is never called.
Any solution?
Thanks!
$("#bookSearch")
.autocomplete({
minLength: 0,
source: '/Autocomplete/Books',
focus: function (event, ui) {
$("#bookSearch").val(ui.item.label);
return false;
},
search: function(event, ui) {
$('#wrapper').empty();
},
response: function (event, ui) {
$('#bookSearch').popover('destroy');
$('#bookSearch').popover({
html: true,
placement: 'bottom',
content: $('#wrapper').html()
});
$('#bookSearch').popover('show');
}
})
.data("autocomplete")._renderItem = function (ul, item) {
$('<div class="media"></div>')
.data("item.autocomplete", item)
.append("<a class=\"pull-left\" href=\"#\"><img class=\"media-object\" src=\""
+ item.ImgUrl
+ "\"></a><div class=\"media-body\"><h6 class=\"media-heading\">"
+ item.Name
+ "</h6>"
+ item.Author + "</div>").appendTo('#wrapper');
};
I fixed the problem by adding to my css file a z-index style for the autocomplete.
.ui-autocomplete {
z-index: 10000;
}
Remember to set a higher value for the z-index if it is necessary. Just for the record I have something like this in the HTML file
<div class="ui-widget">
<label for="employee">Employee:</label>
<input id="employee" type="text" name="employee" />
</div>
Related
I'm using jQueryUI's tooltip and I get a strange behavior when mouseover or focusout events happen. If you try a lot of times, you'll see, including that the tooltip stops working.
<input id="test" type="text" title="." />
$('#test').tooltip({
disabled: true,
track: false,
show: {
effect: 'highlight'
},
open: function (event, ui) {
var tipElement = $(this);
setTimeout(function () {
$(ui.tooltip).hide();
tipElement.tooltip('disable');
tipElement.tooltip('close');
}, 7000);
}
});
$('#test').on('focusout', function () {
$(this).tooltip("option", "content", 'texto.');
$(this).tooltip('enable');
$(this).tooltip('open');
$(this).focus();
});
Fiddle
How the new jQueryUI's tooltip widget can be modified to open the tooltip on click event on certain element's on document, while the others are still showing their tootip on mouseover event. In click-open case the tooltip should be closed by clicking somewhere else on the document.
Is this possible at all?
Using jqueryui:
HTML:
<div id="tt" >Test</div>
JS:
$('#tt').on({
"click": function() {
$(this).tooltip({ items: "#tt", content: "Displaying on click"});
$(this).tooltip("open");
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
You can check it using
http://jsfiddle.net/adamovic/A44EB/
Thanks Piradian for helping improve the code.
This code creates a tooltip that stays open until you click outside the tooltip. It works even after you dismiss the tooltip. It's an elaboration of Mladen Adamovic's answer.
Fiddle: http://jsfiddle.net/c6wa4un8/57/
Code:
var id = "#tt";
var $elem = $(id);
$elem.on("mouseenter", function (e) {
e.stopImmediatePropagation();
});
$elem.tooltip({ items: id, content: "Displaying on click"});
$elem.on("click", function (e) {
$elem.tooltip("open");
});
$elem.on("mouseleave", function (e) {
e.stopImmediatePropagation();
});
$(document).mouseup(function (e) {
var container = $(".ui-tooltip");
if (! container.is(e.target) &&
container.has(e.target).length === 0)
{
$elem.tooltip("close");
}
});
This answer is based on working with different classes. When the click event takes place on an element with class 'trigger' the class is changed to 'trigger on' and the mouseenter event is triggered in order to pass it on to jquery ui.
The Mouseout is cancelled in this example to make everything based on click events.
HTML
<p>
<input id="input_box1" />
<button id="trigger1" class="trigger" data-tooltip-id="1" title="bla bla 1">
?</button>
</p>
<p>
<input id="input_box2" />
<button id="trigger2" class="trigger" data-tooltip-id="2" title="bla bla 2">
?</button>
</p>
jQuery
$(document).ready(function(){
$(function () {
//show
$(document).on('click', '.trigger', function () {
$(this).addClass("on");
$(this).tooltip({
items: '.trigger.on',
position: {
my: "left+15 center",
at: "right center",
collision: "flip"
}
});
$(this).trigger('mouseenter');
});
//hide
$(document).on('click', '.trigger.on', function () {
$(this).tooltip('close');
$(this).removeClass("on")
});
//prevent mouseout and other related events from firing their handlers
$(".trigger").on('mouseout', function (e) {
e.stopImmediatePropagation();
});
})
})
http://jsfiddle.net/AK7pv/111/
I have been playing with this issue today, I figured I would share my results...
Using the example from jQueryUI tooltip, custom styling and custom content
I wanted to have a hybrid of these two. I wanted to be able to have a popover and not a tooltip, and the content needed to be custom HTML. So no hover state, but instead a click state.
My JS is like this:
$(function() {
$( document ).tooltip({
items: "input",
content: function() {
return $('.myPopover').html();
},
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
$('.fireTip').click(function () {
if(!$(this).hasClass('open')) {
$('#age').trigger('mouseover');
$(this).addClass('open');
} else {
$('#age').trigger('mouseout');
$(this).removeClass('open');
}
})
});
The first part is more or less a direct copy of the code example from UI site with the addition of items and content in the tooltip block.
My HTML:
<p>
<input class='hidden' id="age" />
Click me ya bastard
</p>
<div class="myPopover hidden">
<h3>Hi Sten this is the div</h3>
</div>
Bacially we trick the hover state when we click the anchor tag (fireTip class), the input tag that holds the tooltip has a mouseover state invoked, thus firing the tooltip and keeping it up as long as we wish... The CSS is on the fiddle...
Anyways, here is a fiddle to see the interaction a bit better:
http://jsfiddle.net/AK7pv/
This version ensures the tooltip stays visible long enough for user to move mouse over tooltip and stays visible until mouseout. Handy for allowing the user to select some text from tooltip.
$(document).on("click", ".tooltip", function() {
$(this).tooltip(
{
items: ".tooltip",
content: function(){
return $(this).data('description');
},
close: function( event, ui ) {
var me = this;
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function(){
$(this).remove();
});
}
);
ui.tooltip.on("remove", function(){
$(me).tooltip("destroy");
});
},
}
);
$(this).tooltip("open");
});
HTML
Test
Sample: http://jsfiddle.net/A44EB/123/
Update Mladen Adamovic answer has one drawback. It work only once. Then tooltip is disabled. To make it work each time the code should be supplement with enabling tool tip on click.
$('#tt').on({
"click": function() {
$(this).tooltip({ items: "#tt", content: "Displaying on click"});
$(this).tooltip("enable"); // this line added
$(this).tooltip("open");
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
jsfiddle
http://jsfiddle.net/bh4ctmuj/225/
This may help.
<!-- HTML -->
Click me to see Tooltip
<!-- Jquery code-->
$('a').tooltip({
disabled: true,
close: function( event, ui ) { $(this).tooltip('disable'); }
});
$('a').on('click', function () {
$(this).tooltip('enable').tooltip('open');
});
I've found here that to overwrite one of the autocomplete events. But can somebody please provide me with example how to do the same?
The appendTo option does indeed work as expected, and if you inspect at the DOM, the <ul> results element will be attached to the element. However, due to absolute positioning generated by jQueryUI, the list still appears directly under the <input>.
That said, you can override the internal _renderItem to directly append results to a completely different element, for example:
HTML
<input id="autocomplete"/>
<div class="test">Output goes here:<br/><ul></ul></div>
JavaScript
$('input').autocomplete({
search: function(event, ui) {
$('.test ul').empty();
},
source: ["something", "something-else"]
}).data('autocomplete')._renderItem = function(ul, item) {
return $('<li/>')
.data('item.autocomplete', item)
.append(item.value)
.appendTo($('.test ul'));
};
I have also created a demo to demonstrate this. Please note that the latest jQuery library has not had jQueryUI tested against it fully, so I am using the previous version which allows me to select to include jQueryUI directly with the jsFiddle options.
<div class="test">Output goes here:<br/></div>
<script>
$("input#autocomplete").autocomplete({
source: ["something", "something-else"],
appendTo: ".text",
position: { my: "left top", at: "left bottom", of: ".test" }
// other options here
});
</script>
I needed more control over where to put the data, so this is how I went about it:
$("#input").autocomplete({
minLength: 3,
source: [
"ActionScript",
"AppleScript",
"Asp"
],
response: function(event, ui) {
console.log(ui.content);
// put the content somewhere
},
open: function(event, ui) {
// close the widget
$(this).autocomplete('close');
}
});
hle's answer worked awesome for me and gives you more flexibility! Here is my test code that was modified by his answer:
$("#autocomplete").autocomplete({
minLength: 3,
source: ["something", "something-else"],
response: function(event, ui)
{
console.log(ui.content);
// put the content somewhere
},
open: function(event, ui)
{
// close the widget
$(this).autocomplete('close');
}
});
Although this question is pretty old but i got a pretty easy solution. No hack, nothing just in jQuery way:
Instead of autocomplete response function, just add response data in div on success
$(document).ready(function () {
$("#book-code-search").autocomplete({
minLength: 2,
delay: 500,
source: function (request, response) {
$.ajax( {
url: "server side path that returns json data",
data: { searchText: request.term, param2 : $("#type").val()},
type: "POST",
dataType: "json",
success: function( data ) {
$("#data-success").html(data.returnedData); //returnedData is json data return from server side response
/* response($.map(data, function (item) {
return {
label: item.FullDesc,
value: item.FullDesc
}
})) */
}
});
}
});
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id='data-success' style='color: green;'></div>
<input type='text' placeholder='Enter Book Code' id='book-code-search' />
<input type='hidden' id='type' value='book'>
Mornin' all,
I have troubles to play with jQuery UI autocomplete widget events.
I want to a add a custom class to the parent <li> of the selected item.
The generated markup looks like :
<li class="result">
<a><span></span></a>
</li>
When an item is focus, jQuery add the class .ui-state-hover to the <a>
How can I add a class .selected to the parent <li> ?
I'm trying to do it from a focus event but I don't know how to access to the parent <li>.
I looked to the source of jQuery UI and found where and how the .ui-state-hover is applied but doesn't help.
Here is my code for autocomplete.
/**
* Override the default behavior of autocomplete.data('autocomplete')._renderItem.
*
* #param ul _object_ The conventional ul container of the autocomplete list.
* #param item _object_ The conventional object used to represent autocomplete data.
* {value:'',label:'',desc:'',icon:''}
*/
var renderItemOverride = function (ul, item) {
return $('<li class="result"></li>')
.data("item.autocomplete", item)
.append('<a><span class="name">' + item.label + '</span><span class="type"></span></a>')
.appendTo(ul);
};
$('#live_search').autocomplete({
source: function(request, response) {
$.ajax({
url: "search.json",
dataType: "json",
cache: false,
data: {
term: request.term
},
success: function(data ) {
response($.map(data.contacts, function(item) {
return {
label: item.name || (iterm.firstname + item.lastname),
value: item.name || (iterm.firstname + item.lastname),
id: item._id
}
}));
}
});
},
appendTo: '.live_search_result_list',
autoFocus: true,
minLength: 2,
focus: function(event, ui) {
},
select: function(event, ui) {
console.log("do a redirection");
}
}).data('autocomplete')._renderItem = renderItemOverride;
})
Any ninja can help ?
How about:
focus: function(event, ui) {
$(".live_search_result_list li.result").removeClass("selected");
$("#ui-active-menuitem")
.closest("li")
.addClass("selected");
},
Then, to remove the selected class from any lis when the menu loses mouse focus:
$(".live_search_result_list ul").mouseleave(function() {
$(this).children("li.result").removeClass("selected");
});
Here's a working example: http://jsfiddle.net/andrewwhitaker/4z3SQ/
I have the following piece of Mootools 1.11 code (not upgradable as this is within Joomla), which I want to highlight the form row, when an item within it is focussed. However, this doesn't work. I need to know how to access the parent div of the form item.
window.addEvent('domready', function() {
var list = $$('#ChronoContact_lensorder div.formrow');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('focus', function(){
fx.start({
'background-color': '#e6f0f2',
color: '#FFF'
});
});
element.addEvent('focus', function(){
fx.start({
'background-color': '#FFF',
'color': '#2F9AD0'
});
});
});
});
HTML is:
<div class="formrow">
<label for="ud">Uncut Diameter:</label>
<input type="text" id="ud" name="ud" />
</div>
Thanks
Instead of looking for the <div>s, you might want to look for the actual <input> using var list = $$('#ChronoContact_lensorder div.formrow input'); Then refer to the parent using the .getParent() method when necessary, like this:
window.addEvent('domready', function() {
var list = $$('#ChronoContact_lensorder div.formrow input');
list.each(function(element) {
var fx = new Fx.Styles(element.getParent(), {duration:200, wait:false});
element.addEvent('focus', function(){
fx.start({
'background-color': '#e6f0f2',
color: '#FFF'
});
});
element.addEvent('blur', function(){
fx.start({
'background-color': '#FFF',
'color': '#2F9AD0'
});
});
});
});
Untested code. Note that the second event is now blur instead of focus, or else both events will fire at the same time and might revert each other's effects!