Currently working on autocomplete based on vanilla javascript. Some how I brought the autocomplete in working condition but I need to append with checkbox for the multiple selection in the autocomplete list the user has to select the check box then it will apply in the field For example if the User type IND in the text field the result will disaply as with the checkbox India and again if the user type ZIM with the checkbox Zimbawae in the text field.
Multiple selection
Here is the sample code
function init(){
outp = document.getElementById("output");
window.setInterval("lookAt()", 100);
setVisible("hidden");
document.onkeydown = keygetter; //needed for Opera...
document.onkeyup = keyHandler;
}
The rest of the code is available in fiddle Link
Kindly guide me
So you can use a comma ( , ) to separate your different items, then you can use
var items = document.getElementsByName("text")[0].value.split(',')
now in items you have an array of items, use your autocompleting functions on the last item of the array:
items[items.length-1]
it should do the trick
Related
I want to create a form with Adobe Acrobat.
I have a CheckBox (named CheckBox) and radio buttons (group name: Group1; options name Opt1 Opt2 Opt3).
With this code in the actions of the CheckBox (run a JavaScript script):
var nDisplay = event.target.isBoxChecked (0)? display.visible: display.hidden;
this.getField ("Group1"). display = nDisplay;
I manage to hide the group (= all options). But I would like to hide only one option (Opt3 for example).
How do I modify my code to achieve this result?
Thank you for your help :)
I see that in your example you add the name of the group to the getfield function:this.getField ("Group1"). This means you are hiding the full group. In order to hide a single option you should instead add the name of that specific option to the getfield function this.getField ("Opt3")
So your code should look like this:
var nDisplay = event.target.isBoxChecked (0)? display.visible: display.hidden;
this.getField ("Opt3"). display = nDisplay;
By dint of research and testing, I finally found the solution.
The problem was with the name of the option. I had this intuition.
In Adobe Acrobat (form), when you create radio buttons, they are part of a group (example "Group1") and each new button will be named "Opt1" "Opt2" ...
To draw a parallel with other languages, the group is actually "a list". So the name of the option "Opt1" is not "Opt1" but the 1st element of "the list" (= "Group1"): Group1.0
And with that, it's won.
I take my original code which hides all group ("Group1"):
var nDisplay = event.target.isBoxChecked (0)? display.visible: display.hidden;
this.getField ("Group1"). display = nDisplay;
If I want to do an action on the 1st element of the list (= "Opt1"), the code would become:
var nDisplay = event.target.isBoxChecked (0)? display.visible: display.hidden;
this.getField ("Group1.0"). display = nDisplay;
(1st element = 0; 2nd element = 1 ...)
Thanks to Stephen for taking the time to help me :) And I hope it helps other people.
I am working on a Gmail Add-on with a dynamically created radio group, something like:
How can I insert an input text box as one of the radio options?
This is what I have so far:
var urlGroup = CardService.newSelectionInput()
.setType(CardService.SelectionInputType.RADIO_BUTTON)
.setTitle("Please select a link")
.setFieldName("radio_group")
//How do I get a text input field here as one of the radio options
// This is the line I cannot figure out
urlGroup.addItem(** insert input textbox here **)
for (var g = 0; (g < getURLsection.length); g++) {
//shorten long links to fit in card
if (getURLsection[g].length > 21) {
var URLname = getURLsection[g].slice(0, 22) + "..." + getURLsection[g].slice(-5);
} else {
var URLname = getURLsection[g]
}
urlGroup.addItem(URLname, getURLsection[g], false)
}
// create radio button group
var section = CardService.newCardSection()
.addWidget(urlGroup)
Any ideas on how to do this?
Preferably I would like to remove the word Other: and just have it as a .setTitle("enter link here") within the textbook.
To generate a text input element in Google's Add-ons you need to create a TextInput widget object which you need to add to the given section later.
As stated in the documentation for the addItem method, it receives the text and value parameters as strings so you can't use a TextInput object there.
As a workaround for what you want to achieve, you can create a radio group option with the 'otherLink' value:
urlGroup.addItem('Enter link below:', 'otherLink', false);
And a text input widget which you insert into the radio button group section:
var textInput = CardService.newTextInput()
.setFieldName("text_input_form_input_key")
.setTitle("enter link here")
// create radio button group section with text input
var section = CardService.newCardSection()
.addWidget(urlGroup)
.addWidget(textInput)
This way, the text input will appear below of the radio buttons and you could work with the value (link) entered in the input text if the selected value from the radio buttons group is 'otherLink'.
To count the number of contols and print their Id into an alert box
I need help with my code
I am trying to count the number of contols in my webpage and display onto the alert box
Example
Textbox: 2
Buttons: 3
Radio buttons: 5
Drop down:3
Listbox: 1
I have used getElementsByTagName("INPUT") and getElementsByTagName("SELECT"). For the input fields I have no problem, but for the select I have to differentiate between for example drop down list or list box and more
i have tried this for listbox but it isnt working
var search_term = "lst"; // search term
var search = new RegExp(search_term, "i");
var arr = jQuery.grep(y, function (value) {
return search.test(value);
});
And secondly after using getElementsByTagName("INPUT") I filter again on type(text,checkbox,radio) I want to extract the Id and push it onto an array
You can use querySelectorAll method instead of getElementByTag name and use CSS selectors for selecting elements. for example Using
document.querySelectorAll('input[type="text"]')
selects all of inputs with type="text" and so on
You can get classes of a DOM element by classList method and id for getting ids
console.log(document.querySelectorAll('#foo')[0].id); // prints foo
and
console.log(document.querySelectorAll('#foo')[0].classList); // prints list of element possible classes
Is there a way to add a item to a combo box from a text box on the same page? Also how would you add that item to multiple combo boxes on the same page? This is an acrobat pdf form. Any examples would be greatly appreciated.
This is possible.
The best is to get the Acrobat JavaScript documentation, which is part of the Acrobat SDK, downloadable from the Adobe website. Of particular interest are the entries for setItems() and getItems() and their referenced Field object methods.
Due to the implementation of adding items, you would first read the current items, then add your new item, and then write them back (for the example, we assume that there are no specific return values):
var f = this.getField("myComboBox") ;
var fitms = new Array() ;
for (var fi = 0 ; fi < f.numItems ; fi++ ) {
fitms[fi] = f.getItemAt(fi, false) ;
}
if (this.getField("myAddingValue").valueAsString.length > 0) {
fitms[fitms.length] = this.getField("myAddingValue").valueAsString ;
}
f.setItems(fitms) ;
Add this code to a button to add the item in the field myAddingValue, and that's about it. There are code samples in the above mentioned documentation.
You might create a document-level function which takes the combo box field and the field for the add-on value as argument.
You can use jQuery to do it.. consider this as HTML
<text id="mytext">
<button id="btnAdd" type="button">Add</button>
<select class="awesomecombo" id="combo_one"></select>
<select class="awesomecombo" id="combo_two"></select>
Javascript is
$("#btnAdd").click(function(){
$(".awesomecombo").append("<option>"+$("#mytext").val()+"</option>");
});
This will solve your purpose.
UPDATE: added class for multiple combobox selection and <option> in append.
Here is the fiddle http://jsfiddle.net/Dano007/b11xarpp/5/
To be clearer. In the drop down box, I'd like two options (text). when the user clicks one of these options the relevant function results are returned. Like see when clicking the buttons, which are for example only.
I've added the drop down box, but cannot see how to bind the results from the two queries to it.
Could I use something like ?
$("select#FriendsConnected option.filter-prop2").show();
$("select#FriendsConnected option.filter-prop1").show();
Feel like I've hot a brick wall with this and ideally would like some help with the fiddle to move past it.
In your HTML, change select id to a valid css id, something like: s_FriendsConnected
<select name="huge" class="btn-group select select-block mbl select-multiple" id="s_FriendsConnected">
In your Javascript, change the select = getElementByID(FriendsConnected)'s ID to your new select id: s_FriendsConnected
var select = document.getElementById("s_FriendsConnected");
This solves it on my local machine... will update with the jsfiddle in a while..
EDIT:
Here's the jsfiddle. : http://jsfiddle.net/b11xarpp/7/
UPDATE:::
As per your requirement, in this new jsfiddle, I've removed the buttons and placed option tags with values in the html.
In Javascript, I've removed the var select = document.getelementbyid() function.
Also, I've replaced your click functions for the buttons with on Change event to the select menu:
$('select#s_Friends').change(function(){
var selection = $(this).val();
if(selection=='f_connected')
FriendsConnected();
else if(selection=='f_requests')
FriendsPending();
});
That's mostly all. Here's the updated jsfiddle: http://jsfiddle.net/b11xarpp/8/