I have created a search filter that detaches the options that does not match with what the user has entered.
For example, the list contains: "hello", "good bye", "halo", and if I enter "h" then it'll only show "hello" and "halo".
The problem I'm facing is that if there is one option I cannot select it, but if there are multiple options I can.
Here is the (full code) JSFiddle: JSFIDDLE LINK
To recreate the problem: Enter "another" in the input box, and try select the "do another" option in the select menu.
I can select any option if there are more than one, so if I enter the word, "do", then I can select either options with that word inside.
var probOptions = $("#problem>option");
function searchFilter() {
$("#searchInput").change(function() {
var searchString = $(this).val().toLowerCase();
$("#problem").empty().append(probOptions);
$("#problem>option").each(function() {
var text = $(this).text().toLowerCase();
if (text.indexOf(searchString) <= -1) {
$(this).detach();
// THE LINE BELOW FIXES THE PROBLEM (THE LINE BELOW IS NEWLY ADDED)
$("#problem").selectmenu("refresh");
}
});
});
}
searchFilter();
I managed to fix the problem myself.
Apparently for JQuery mobile you need to refresh the list, but standard JQuery you don't need to.
Here's the solution (where #problem is the ID of the select menu):
$("#problem").selectmenu("refresh");
Hope this helps anyone that have this problem.
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.
Here is my fiddle https://jsfiddle.net/juggernautsei/w8yn2ehk/
My jquery has gotten very rusty. The system says I have to put the code in here so here is a snippet below.
$(function() {
$("input[name$='notify_type']").click(function() {
var test = $(this).val();
var selected = $("input[type='radio'][id='notify_type3']:checked").val();
$("div.referral").hide();
$("#ref" + test).show();
if(selected == "4") var opts = [
{name: "Please Select", val:""},
{name:"WMOX", val:"WMOX"},
{name:"WVKL", val:"WVKL"},
{name:"WJDQ", val:"WJDQ"},
{name:"WOWI", val:"WOWI"},
{name:"WTOK", val:"WTOK"}
];
On the left is a list of referral types. I want the block on the left to change depending on the type of referral that is selected. Most of that is accomplished.
What I want to happen is notify_type3 should populate the dropdown list on the right according to the list type selected on the left. The first one works correctly. The rest do not. I think I need an on change but not sure where to place it. Suggestions please
I found a few problems. Two main ones:
1) The way you were getting selected only worked for the first one. For the others selected got the value undefined.
2) The way you decided which block on the right were to be shown ($("#ref" + test).show();) didn't work since test could have a value between 1 and 10 and you only had ref elements for 1-4.
Here is the changes I made: https://jsfiddle.net/w8yn2ehk/41/
Please note is still doesn't work for 7-10 because I only fixed the ones using the select block (ref3), but with this info it shouldn't be a problem to fix the rest.
I am using select2 and I use it for a single choice. I want to move the result of what we have chosen to another div.
Please check my code:
https://jsfiddle.net/hxe7wr65/
How to move it? because I don't want the result to show in the box. I want the box still clear and even after I choose, the placeholder still shows up.
This is the design that i'm doing right now
in that image. its only can choose 1 option. after we choose. the result show up to another place and so the select still have the placeholder in it. please guys help me.
thank so much
Ok I'm not 100% sure this is what you're looking for, but I think you wan't the grab value of the last selected item, transfer it to another div and then clear the input.
For the first step add an event handler to it.
var $eventSelect = $("#position"); //select your select2 input
$eventSelect.on('select2:select', function(e) {
console.log('select')
console.log(e.params.data.id) //This will give you the id of the selected attribute
console.log(e.params.data.text) //This will give you the text of the selected text
})
Now that you have the value, transferring it to the other div is relatively simple.
var $eventSelect = $("#position"); //select your select2 input
$eventSelect.on('select2:select', function(e) {
var text = e.params.data.text
$("#otherdiv").append(text)
})
Then to clear the form
var $eventSelect = $("#position"); //select your select2 input
$eventSelect.on('select2:select', function(e) {
var text = e.params.data.text
$("#otherdiv").append(text)
$(this).val('');
// or depending no what version you are using
$(this).select2('val', '')
})
I'm currently working on http://flickogram.com.
I need to put rich comment textbox like facebook has.
Currently, I've developed a jquery plugin and you can find its working on http://jsfiddle.net/mike_ivanenko/k6zH6/3/
You can use the plugin as following.
$(document).ready(function() {
$('#ttt').richtextbox( {
highlights: [
{char:'#', class:'highlighted', markup: 'topic'},
{char:'#', class:'highlighted', markup: 'people'}
]
,change:function(richtextfield, input) {
$('#output').val(input.val());
}
}
);
});
It works pretty well for putting topic by typing hash(#), but I can't find a way to deal with people's name by typing #.
My intention is as followings.
When user types #, drop-down box with search text field will be shown just below the current textbox and user can search for the name.
Then the result will be shown in the dropdown, and on clicking the item will be entered in the main text field. But it should be non-editable. Deleting by [Delete] or [Backspace] key is available.
Any suggestions?
Or please help me out this on github.com/mike-ivanenko/richtextbox
Thank you
Mike
you should check out html5's contenteditable feature
Edit: (fixed)
here's what you need
http://jsfiddle.net/ZQSHT/2/
$('div').keyup(function(){
var test = $(this).text();
if( test.indexOf('#') >= 0){
// Found world
alert('#');
$('input').focus();
}
});
$('input').change(function(){
alert( $('input').val() );
$('div').append('#'+$('input').val()+'');
});
I want to add the text that a user inputs in the text field of a chosen select multiple input as an option, and automatically select it, all of this when the option doesn't exists, if the option exists, then I would like to select it. So far I have manage to do this:
Chosen.prototype.add_text_as_option = function () {
$('#id_select').append(
$('<option>')
.html(this.search_field.val())
.attr('selected', 'selected')
.attr('value', 0)
);
$('#id_select').trigger("liszt:updated");
return false;
};
I call this function whenever the users presses enter while the input field is in focus within the keydown_check function.
I have two problems:
Top priority, when the user presses enter and has typed a substring of an option, the option won't get selected, but the substring text will be added and selected. Not what I want.
For instance: If I have the option "foo", and start typing "fo", chosen will mark the first
option as candidate ("foo"), so if I press enter, it should be selected, but instead, what happens is that "fo" is added as an option and selected, when I actually wanted to select "foo".
If I select "foo" with a click, then everything works fine. The option chosen marks is selected and the substring text is taken as part of the option.
How can I add a non existent option to chosen, without loosing all the original functionality?
How can I access the select multiple field I initilized whith chosen inside the chosen plugin? As you can see in the code above, the id of the select multiple field is hardcoded. I want to do this to be able to refresh the select when the user adds a new option.
The functionality that I'm looking for is very similar to the skills widget of linkedin
You should try out the select2 plugin which is based off of chosen plugin but it works well with adding elements dynamically.
Heres the link: http://ivaynberg.github.com/select2/
Look at the example for auto-tokenization I think that might be what you are looking for.
I needed this today so I wrote something like this:
$(function() {
// form id
$('#newtag').alajax({
// data contains json_encoded array, sent from server
success: function(data) {
// this is missing in alajax plugin
data = jQuery.parseJSON(data);
// create new option for original select
var opt = document.createElement("OPTION");
opt.value = data.id;
opt.text = data.name;
opt.selected = true;
// check if the same value already exists
var el = $('#tags option[value="' + opt.value + '"]');
if( !el.size() ) {
// no? append it and update chosen-select field
$('#tags').append( opt ).trigger("chosen:updated");
} else {
// it does? check if it's already selected
if(!el[0].selected) {
// adding already existent element in selection
el[0].selected = true;
$('#tags').trigger("chosen:updated");
} else {
alert("Already selected and added.");
}
}
}
})
});
"#"newtag is a form, ".alajax" is a plugin that sends form data in async way and returns server's response in JSON format. In the controller I check if a tag exists otherwise I create it. In response I five "jsoned" tag object.
I created a jsfiddle of jquery chosen which takes text and create as option. In earlier version of jquery chosen have facility create option.
create_option: true;
persistent_create_option: true;
skip_no_results: true;
You can use this code:
$('#id_select').chosen({
width: '100%',
create_option: true,
persistent_create_option: true,
skip_no_results: true
});
jsfiddle link: https://jsfiddle.net/n4nrqtek/
just call it keyup_check
keydown_check is called before the pressed letter is initialized
unlike keyup_check
I found a solution multiple select
var str_array = ['css','html'];
$("#id_select").val(str_array).trigger("chosen:updated");