I'm instantiating an autocomplete input for Google Maps API (level 3), like so:
var input = document.getElementById('szukanyAdres');
autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
How to turn the autocompletion functionality on and off at runtime?
To remove all listeners added to autocomplete.
autocomplete.unbindAll();
To remove all listeners added to input element.
google.maps.event.clearInstanceListeners(input);
See https://code.google.com/p/gmaps-api-issues/issues/detail?id=3429
The solution of Dr.Molle doesn't work for me.
The solution I found is to clearListener and remove pac-container:
var autocomplete;
var autocompleteListener;
function disableGoogleAutocomplete() {
if (autocomplete !== undefined) {
google.maps.event.removeListener(autocompleteListener);
google.maps.event.clearInstanceListeners(autocomplete);
$(".pac-container").remove();
console.log('disable autocomplete to GOOGLE');
}
}
function enableGoogleAutocomplete() {
autocomplete = new google.maps.places.Autocomplete($("#inputDiv input")[0], options);
autocompleteListener = google.maps.event.addListener(autocomplete, 'place_changed', function() { ... }
console.log('set autocomplete to GOOGLE');
}
Now I can switch on/off google places Autocomplete.
There are two elements related to the autocomplete
the input-element
a div that contains the list-entries. this div will be appended to the body and has the class "pac-container"
So what you can do: show or hide both elements by modifying their display-style.
When it's not possible to hide the input you may replace the input with a clone of the input, this will remove the autocomplete-functionality.
inputObject.parentNode.replaceChild(inputObject.cloneNode(true),input);
To restore the autocomplete do again what you want to do.
If anything written here does not work for you, you can try to just hide it.
The field with places appearing while typing is in css class .pac-container, so just declare it in css display: none. Then it will not appear during typing in searchbox. Actually it is not the way to customize it.
You can try to hide it with JQuery:
$(".pac-container").hide(); //hide autocomplete
I faced the problem as well (in my app I wanted to run the google's autocomplete only when user typed at least 4 digits into my input field - I am using my custom smart search when typed string has less than 4 digits).
In my case above solutions didn't work either, so my workaround is:
Set opacity: 0 to the $('.pac-container') when you need.
Optionally set also low z-index if needed.
Related
I have some input created dynamically in a web page and every input need an autocomplete options with ajax request.
Every input have same class.
I created that for one input but when other inputs created by user the autocomplete not working for them.
I use something like below:
$('.class').autocomplete(options);
How can correct this problem?
Function .live() is deprecated now.
var options = {
source: ["ActionScript", "AppleScript"],
minLength: 2
};
var selector = 'input.searchInput';
$(document).on('keydown.autocomplete', selector, function() {
$(this).autocomplete(options);
});
Just add this in your ajax code after the code where you're adding new element
$('.newElement').autocomplete(options);
You need to initialize autocomplete the each dynamically added element.
I'm developing a simple plugin for Etherpad to edit formulae using MathQuill. When the toolbar is opened, I'd like the cursor to get into the edit field. The field is mathquillified like this:
var MQ = MathQuill.getInterface(2);
var mathQuillEditor = MQ.MathField(mathQuillField, {
spaceBehavesLikeTab: true,
handlers: {
edit: function() {
latexEditor.value = mathQuillEditor.latex(); // update LaTeX field
jQuery(latexEditor).change(); // fire updating of CodeCogs
}
}
});
To get cursor in the edit field, I've tried:
mathQuillEditor.moveToRightEnd();
which visually puts the cursor there, but the blue margin (that points that the editor is active) does not appear and typing doesn't make any effect; and
mathQuillEditor.el().focus();
which doesn't make any visual difference. I've also tried to combine those, but still no success. Any ideas how to do this?
Ok, this wasn't documented, the answer is simply
mathQuillEditor.focus();
After I've rised an issue, this was explained and docs now contain this method.
I am using Sitecore 7.2 with Web Forms for Marketers 2.4.
Using wffm form designer I created a form that has a droplist in it.
I want to be able to hide or unhide another field in the same form based on the selected value of the droplist. Through my research I came up with exporting the form (via form designer export) and pointing the sublayout to that exported form.
I then added and onChange event to the droplist.
<cc3:droplist runat="server" title="Country" emptychoice="True" id="field_xyz" cssclass="scfDropListBorder fieldid.%7bxyz%7d name.Country" controlname="Country" fieldid="{xyz}" enableviewstate="False" onchange="checkField()">
I then added a javascript to the bottom of the page.
function checkField() {
alert("Hello! I am an alert box!!");
var a = document.getElementById("field_xyz");
alert(a.options[a.selectedIndex].value);
var cityTextBox = document.getElementById("field_abc").parentNode.parentNode;
if (a == "United States") {
cityTextBox.style.display = "block";
} else {
cityTextBox.style.display = "none";
}
alert("Ending Script");
}
I can get the 'Hello!' alert to show every time but not the 'ending' alert and the value of 'a' is always null from what I can tell.
Is what I'm trying to do even possible in Sitecore?
I read something else that said they had a problem because of encapsulation and protection levels.
I can also confirm that when I submit the form it does show up in the WFFM reports so I know it is submitting properly.
Any help/advice/direction would be appreciated.
I've never used the export functionality so can't comment to it's effectiveness or ease of use. My suggestion would be to simply use from custom css classes and jquery on the front-end to hide/show depending on the selected value.
Create 2 new css classes under /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes. Call them "hide-dependent" and "dependent-field"
Add your fields and then on the country field select "hide-dependent" as the CSS class, and for the City select "dependent-field"
Add the following Javascript to your own sites js file.
The code will bind a handler to fire onchange, checked the selected value and then hide/show all field with the dependent-field class. Specifying the chained field-border ensures that we are hiding the whole row and not just the select box.
(function ($) {
var HideDependentFied = function (value) {
var condition = (value == "USA");
$(".dependent-field.field-border").toggle(condition);
};
$(document).ready(function() {
var $field = $(".hide-dependent.field-border select");
$field.on("change", function() {
HideDependentFied(this.value)
});
HideDependentFied($field.val());
});
})($scw);
The above code is using an Immediately Invoked Function Expression and passing is $scw, which is the jQuery variable used by WFFM.
You may also want to fire the function on document ready, to ensure the field is hidden on load and only shown when the appropriate value is selected.
The requirement is to display autocomplete addresses based on the region selected. The Jquery autocomplete is called everytime the region changes. I am getting the correct autocomplete addresses based on the region. But along with the new address list, I also get the address list for previously selected regions.
To solve this problem, I used - $("#address).removeData('events').autocomplete(...)
This solves the problem. But a new problem is introduced now! The scrolling in the autocomplete list does not work properly, items are skipped on pressing down arrow key/up arrow key.
Here is the code snippet:
$("#address).removeData('events').autocomplete({
serviceUrl : 'mysource',
minChars : 2,
params : {
region : selectedRegion
},
noCache : true,
width : 350,
maxHeight : 170,
onSelect : function (value) {
...
...
}
});
Can somebody suggest me the correct approach? I am using jquey.autocomplete-min.js
If youre getting an additional appearing alongside jquery's autocomplete list, it may be an issue with your browser trying to autocomplete the input.
trying adding the autocomplete="off" attribute to the input field you're autocompleting
As mentioned in this answer the issue might not be with your code snippet but with browser http caching in general.
Well, the following worked like a charm to me
var ac = $("#address").autocomplete();
The next time, the region is changed, instead of calling autocomplete()
again, I just do this -
ac.setOptions({ params:{ region : selectedRegion}});
This updates the existing call with new region. I will no more see autocomplete suggestions for the previous selections.
I am using jquery autocomplete combobox
and everything is ok. But I also want to set specific value through JavaScript like $("#value").val("somevalue") and it set to select element, but no changes in input element with autocomplete.
Of course, I can select this input and set value directly, but is it some other ways to do that? I try set bind to this.element like this.element.bind("change", function(){alert(1)}) but it was no effects. And I don't know why.
Edit
I found a workaround for this case. But I don't like it. I have added the following code to _create function for ui.combobox
this.element.bind("change", function() {
input.val( $(select).find("option:selected").text());
});
And when I need to change the value I can use $("#selector").val("specificvalue").trigger("change");
Is this demo what you are looking for?
The link sets the value of the jQuery UI autocomplete to Java. The focus is left on the input so that the normal keyboard events can be used to navigate the options.
Edit: How about adding another function to the combobox like this:
autocomplete : function(value) {
this.element.val(value);
this.input.val(value);
}
and calling it with the value you want to set:
$('#combobox').combobox('autocomplete', 'Java');
Updated demo
I cannot find any available existing function to do what you want, but this seems to work nicely for me. Hope it is closer to the behaviour you require.
I managed a quick and dirty way of setting the value. But, you do need to know both the value and the text of the item that you want to display on the dropdown.
var myValue = foo; // value that you want selected
var myText = bar; // text that you want to display
// You first need to set the value of the (hidden) select list
$('#myCombo').val(myValue);
// ...then you need to set the display text of the actual autocomplete box.
$('#myCombo').siblings('.ui-combobox').find('.ui-autocomplete-input').val(myText);
#andyb,
i think rewrite:
autocomplete: function (value) {
this.element.val(value);
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input.val(value);
}
I really like what andyb did, but I needed it to do a little more around event handling to be able to handle triggering the a change event because "selected" doesn't handle when hitting enter or losing focus on the input (hitting tab or mouse click).
As such, using what andyb did as a base as well as the latest version of the jQuery Autocomplete script, I created the following solution: DEMO
Enter: Chooses the first item if menu is visible
Focus Lost: Partial match triggers not found message and clears entry (jQuery UI), but fully typed answer "selects" that value (not case sensative)
How Change method can be utlized:
$("#combobox").combobox({
selected: function (event, ui) {
$("#output").text("Selected Event >>> " + $("#combobox").val());
}
})
.change(function (e) {
$("#output").text("Change Event >>> " + $("#combobox").val());
});
Hopefully this helps others who need additional change event functionality to compensate for gaps that "selected" leaves open.
http://jsfiddle.net/nhJDd/
$(".document").ready(function(){
$("select option:eq(1)").val("someNewVal");
$("select option:eq(1)").text("Another Val");
$("select option:eq(1)").attr('selected', 'selected');
});
here is a working example and jquery, I am assuming you want to change the value of a select, change its text face and also have it selected at page load?
#
Attempt 2:
here is another fiddle: http://jsfiddle.net/HafLW/1/ , do you mean that you select an option, then you want to append that value to the autocomplete of a input area?
$(".document").ready(function(){
someString = "this,that";
$("input").autocomplete({source: someString.split(",")});
$("select").change(function(){
alert($(this).val()+" appended");
someString = someString+","+$(this).val();
$("input").autocomplete({source: someString.split(",")});
});
});