I found the jQuery UI autocompleteopen event, but is it possible to catch event (or override something ?) when the autocomplete list is opened ?
Actually autocompleteopen is fired before autocomplete list openning.
Edit I'm wrong ! Moderator ? Please close/delete my question :)
Related
I am using the JQueryUI Autocomplete Combobox at the following link http://jqueryui.com/autocomplete/#combobox. How can I prevent a change? I only allow a change on a condition and it is still calling a menuselect event w/ ui-autocomplete-item and allowing the change. That is line 6881 "this._value( item.value ); of the jquery-ui-1.10.3.js.
Everything worked prior to the change of a select to a jquery ui autocomplete combobox and everything would be fine now if I could prevent the menuselect function.
Thanks
You need to do the condition and event.preventDefault in the select event...
Problem: I have to color my results in the little dropdown based on their value.
Solution: Use the 'open' event hook to loop through options and assign a color.
Problem: So the documentation for the jQuery UI autocomplete says that the open event hook receives two arguments- 'ui' and 'event'. The problem is, 'ui' is just an empty object (someone filed a bug report about this, and the brilliant jQuery UI team said it's not a problem), and 'event' only has the input box, not the dropdown that's generated. At this point, the only way I can select my options list from here is to do this:
$( event.target ).nextUntil("ul.ui-autocomplete").last().next()
That's gross. Please tell me there's a better way?
PS: If anyone says "Just use $('ul.ui-autocomplete')!" you've obviously never worked on anything more complicated than.... something that's not complicated.
The official documentation is terrible, but after lots of exploring I figured it out:
$(event.target).data('autocomplete').menu.element
Are you writing a plugin? You can use this.element
I'm actually working with jQuery mobile 1.0 and the auto complete widget from jQuery UI.
Everything works perfectly except one little thing :
When the user has been redirected (location.href) using the autocomplete feature, there is no back button on the page where he has been redirected.
I've set the $.mobile.page.prototype.options.addBackBtn to true in the mobileinit and the script is loaded before jQuery Mobile.
I didn't find any answer anywhere so this is why i'm asking to you guys
Thanks in advance
By the way sorry for the bad english it's not my first laguage
How do you redirect the user to other page? With location.href? Then that's your problem, setting location.href causes a page refresh and then jQuery Mobile loses it's history (so it won't show the back button)
Please use $.mobile.changePage( url ) to switch to another page
Something like:
$("#yourAutocompleteID").autocomplete({
select: function(event, ui) {
$.mobile.changePage("nextpage.html?id="+ui.item.id);
}
});
For simplicity I pass here the data in the querystring
I think about the solution of situation, when after typing a few letters you will get a words from database and after click on a loaded word will be send the form?
In the basic shape about autocomplete, so after click on a loaded word will this word set to input.
Thank you
The question is not very clear - but I'm guessing that after autocomplete you want to automatically submit the form. You can do this by calling submit in the select callback
I don't know what implementation of autocomplete you are using but if you are using the jQuery-UI autocomplete widget there is a callback you can put right in the autocomplete configuration hash:
$( ".selector" ).autocomplete({
select: function(event, ui) { ... }
});
If you aren't using this widget then my answer isn't as terribly useful of course and I apologize. There isn't a lot of detail in your question.
On a side note, if you're using a home grown autocomplete implementation I'd strongly suggest you investigate the jQuery-UI option
I have a JQuery Mobile (1.0rc1) application that has a list view with a search filter implemented. It's similar to this sample.
Under certain conditions, I am dynamically loading additional items into the list with an ajax call. When this happens I want to clear anything entered in the search filter, otherwise I end up with a partially filtered list.
I've tried firing the clear button like this:
$('.ui-button-clear', $.mobile.activePage).click();
and clearing the form like this:
$("form > input", $.mobile.activePage).val('');
but neither worked. Can someone enlighten me to the proper way to accomplish this?
You should be able to clear clear the searchfilter with
$('input[data-type="search"]').val("");
Edit: To update the list you will also have to trigger the "change"-event on the searchfilter:
$('input[data-type="search"]').trigger("keyup");
JSFiddle
if you talking about Jquery mobile listview, then you need this
$('#autocomplete li').click(function () {
$('.ui-input-clear').trigger("click");
});
I use the following code:
$("form")[0].reset();
The [0] points to the DOM element method.
Also see How to reset (clear) form through JavaScript?