I am using the jQuery UI autocomplete functionality searching and returning some values via ajax. Currently I am using it like this:
$(".myautocomplete").autocomplete(
{
source: "myajaxSourceAsJson",
minLength: 1,
delay: 500,
response: function( event, ui ) {
// Do something with the response data
}
});
My JSON-Object not only contains "value" and "label", but also some more objects, which I am using in the response of the autocomplete. Now I still see the autocomplete-list below the html input field, which I'd simply like to hide, because I don't it in this case. I know I also could create the same same functionality with a "normal" ajax-request and the key-events, but I need the minlength and delay-functionality of the autocomplete. Is there a possibility of hiding the list of results below the input field? I tried with "display:none;" for some of the autocomplete classes, but it quite likely is overwritten by the autocomplete itself.
I also tried
.ui-autocomplete { height: 0px; overflow-y: scroll; overflow-x: hidden;}
But then there is a small area of white pixels visible every time someone triggers a search inside the field.
Now I still see the autocomplete-list below the html input field,
which I'd simply like to hide, because I don't it in this case.
I'm not sure if I fully understand your question... Why would you want auto-complete functionality if you just want to hide it?
But I can recommend using an anonymous function to create the data for your auto-complete..
$(".myautocomplete").autocomplete(
{
source: function(request, response){
// do some data manipulation here...
// perhaps return an empty list...
},
minLength: 1,
delay: 500,
response: function( event, ui ) {
// Do something with the response data
}
});
Related
Basically I have implemented a dropdown using select2, and I wired it up with ajax. That all works alright.
However the problem I have, is that I prepopulate some options via html. So what happens when I click on the select2 dropdown, it resets the options and waits for keyboard input. When I type in the keyword, it works as it should.
So is there a way to prevent select2, from clearing the items that were pre-populated whenever it gains focus? I would prefer that it would only get reset, once I actually type something in.
var merchantCategorySelect = $('#merchantCategory');
merchantCategorySelect.select2({
width: '100%',
ajax: {
url: "/admin/offers/not-matched/fetch-categories",
data: function (params, page) {
return {
term: params['term'],
merchantId: merchantCategorySelect.data('merchantid'),
}
}
}
});
I'm using jquery UI for my tooltips. I would like to have more than one on the same page and have them open and close on click. I found a solution for having them open on click:
http://jsfiddle.net/rjGeS/83/
(taken from this link -> jQueryUI tooltip Widget to show tooltip on Click)
What I need help with is having multiple tooltips on one page.
I tried altering the code slightly to make it work, but its just opening them all
$('#tooltip_1').click(function() {
var $this = $(this);
$(".tooltip").html(function() {
$('.ttip').css({
left: $this.position() + '20px',
top: $this.position() + '50px'
}).show()
}).fadeIn();
});
$('#tooltip_2').click(function() {
var $this = $(this);
$(".tooltip").html(function() {
$('.ttip').css({
left: $this.position() + '20px',
top: $this.position() + '50px'
}).show()
}).fadeIn();
});
The example code you've posted actually has nothing to do with jQueryUI Tooltips, I'll give a clean example instead.
You can use the open() and close() functions to show and hide tooltips programmatically. If you also need to stop the default tooltip functionality (as in, showing them on mouseover events) the easy way to do that is to use the disabled option.
Since you didn't specify if this should be click-once-show-all or not, here's a fiddle doing it for all: http://jsfiddle.net/wuL9M/ and here's a fiddle doing it individually: http://jsfiddle.net/qnYRy/
Note this line:
$(".tooltip").off("mouseleave focusout");
It disables the default closing behaviour while the tooltip is open.
If you want to partially preserve only some of the default tooltip functionality, you can use a custom flag (instead of the disabled option), or you can attach extra event handlers to tooltipopen and tooltipclose. It's all pretty well documented here.
ADD: You can use the content option to customise the tooltip with any (potentially non-static) data. eg: http://jsfiddle.net/qnYRy/1/ You can change it after initialisation with the option function:
$("#myTooltip").tooltip("option", "content", "My updated tooltip data");
$("#myTooltip").tooltip("option", "content", function() { return "My updated tooltip data"; });
For obvious reasons this would require you to set the content for each tooltip separately. Also note that it will ignore any html title attribute you may have.
Anyone know good sample code using jQuery UI's autocomplete widget that can autocomplete words in the middle of a text box, not just autocomplete of the word at the end only?
I'm using the jquery UI autocomplete widget for a component that supports entry of multiple tags. It's like like stack overflow's tag editor, but simpler: no fancy formatting in the autocomplete dropdown, no "tag" background images in the edit box. I started with the jQuery UI Autocomplete Multiple sample and modified it.
It's working OK, except autocomplete doesn't work for tags in the middle of a multi-tag string. For example, if I type C Fortran and then put the caret right after C and type +, I'd expect to see C++ in the autocomplete list but instead I see Fortran again.
Here's the code so far: http://jsfiddle.net/WCfyB/4/
This is the same problem described by autocomplete in middle of text (like Google Plus), but the problem in that question was simpler because he could rely on an empty # in the text to signal when to show the autocomplete. In my case, I can't just rely on the text-- I actually need to find out where the caret is and autocomplete for the word where the caret is.
I could build this myself using caret or another plugin, but was wondering if there was already a jQuery-UI-based sample online that I could use without re-inventing another wheel, especially if there are browser-specific corner cases to worry about. Ideally, it'd behave like this: whenever the user places the caret inside or at the end of a tag (where tags are always separated by 1+ spaces), autocomplete is shown for that tag. Know a good sample?
I don't know of any examples like this, but here's something that you could start with:
var availableTags = [ ... ];
function split(val) {
return val.split(/ \s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
.bind("keydown", function(event) {
// don't navigate away from the field on tab when selecting an item
if (event.keyCode === $.ui.keyCode.TAB
&& $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
var results = [],
selectionStart = this.element[0].selectionStart
term = extractLast(request.term.substring(0, selectionStart));
if (term.length > 0) {
results = $.ui.autocomplete.filter(availableTags, term);
}
response(results);
},
focus: function() {
return false; // prevent value inserted on focus
},
select: function(event, ui) {
var terms = split(this.value.substring(0, this.selectionStart));
terms.pop(); // remove the current input
terms.push(ui.item.value); // add the selected item
this.value =
$.trim(terms.join(" ") + this.value.substring(this.selectionStart)) + " ";
return false;
}
});
Example: http://jsfiddle.net/WCfyB/7/
The major caveat here is that the selectionStart method does not work in IE. You can replace those function calls with one of those plugins you mentioned in your question.
I'm using jqueryui's autocomplete widget (ui v1.8.4) as a helping tool for a sitesearch.
Without autocomplete the user types in his query, presses enter or search-button and get the results on result-page.
Autocomplete should work as addition while the user types. ... but if i type in a searchterm, i get the list from autocomplete. but now i have to choose one item of it instead of just hitting enter to get to the results page, as i have done without autocomplete.
$("#searchForm input").autocomplete({
source: "/suche",
minLength: 3,
delay: 100
});
I have jQuery UI autocomplete for a similar usecase: quick results as you type, full result page if you press enter.
You could probably change your code like so:
$("#searchForm input").autocomplete({ source: "/suche", minLength: 3, delay: 100 }).keydown(function(e){
if (e.keyCode === 13) {
$(this).closest('form').trigger('submit');
}
});
Which will submit the parent form of your search box. But obviously you could place any kind of custom logic in there.
I am trying to get jQuery.post() to run my php script and then open a jQuery UI dialog with the data that php script returns. Its supposed to come back as a form with a table and a textarea in it. It works great with alert(data); and i get a pop-up with all my data.
The problem starts if i turn off alert(). Now it opens 2 dialogs. One containing only the table, without textarea, and the second one absolutely empty.
What am i doing wrong here? How come all my data shows up in the alert(), but not in dialog? What do i need to do to fix it?
Oh, and do i need to also include $.ajax() before the $.post()?
Thank you.
$.post("/path/to/script.php",
{ id: this.id, value: value },
function(data){
// THIS WORKS
//alert(data);
// THIS DOES NOT WORK
$(data).dialog({
autoOpen: true,
width: 400,
modal: true,
position: 'center',
resizable: false,
draggable: true,
title: 'Pending Changes'
});
}
);
You don't need another $.ajax() call. The $.post() method is a wrapper shortcut to $.ajax(). What might be happening is you may be getting both default behavior and Javascript bound behavior. I'm assuming this $.post action triggered on a click. If so, then at the very end of your $.click() handler you need to return false to prevent default behavior.
$('input[type=submit]').click(function() {
$.post( /* ... */ );
return false;
});
This is how I handle it. I have a empty div and initialize the dialog upon document ready. Now on the ajax return load that div's html with the data received from PHP and call the "open" method of dialog. Simple and definitely works.
HTH
Ah! This was not a problem with the JS, but my php file.
The textarea was sitting outside of <div>blah blah</div>.
Problem solved.