We Keep Coding

Dynamical search-function to show/hide divs

this is my first post on StackOverflow. I hope it doesn't go horribly wrong.
<input type="Text" id="filterTextBox" placeholder="Filter by name"/>
<script type="text/javascript" src="/resources/events.js"></script>
<script>
$("#filterTextBox").on("keyup", function () {
var search = this.value;
$(".kurssikurssi").show().filter(function () {
return $(".course", this).text().indexOf(search) < 0;
}).hide();
});
</script>
I have a javascript snippet like this on my school project, which can be found here: http://www.cc.puv.fi/~e1301192/projekti/tulos.html
So the search bar at the bottom is supposed to filter divs and display only those, that contain certain keyword. (t.ex, if you type Digital Electronics, it will display only Divs that contain text "Digital Electronics II" and "Digital Electronics". Right now, if I type random gibberish, it hides everything like it's supposed to, but when I type in the beginning of a course name, it will not hide the courses that dont contain the certain text-string.
Here is an example that I used (which works fine): http://jsfiddle.net/Da4mX/
Hard to explain, but I hope you realize if you try the search-function on my page. Also, I'm pretty new to javascript, and I get the part where you set the searchbox's string as var search, the rest I'm not so sure about.
Please help me break down the script, and possibly point where I'm going wrong, and how to overcome the problem.

in your case I think you show and hide the parent of courses so you can try
$("#filterTextBox").on("keyup", function () {
var search = $(this).val().trim().toLowerCase();
$(".course").show().filter(function () {
return $(this).text().toLowerCase().indexOf(search) < 0;
}).hide();
});

Try this this is working now, paste this code in console and check, by searching.
$("#filterTextBox").on("keyup", function () {
var search = this.value; if( search == '') { return }
$( ".course" ).each(function() {
a = this; if (a.innerText.search(search) > 0 ) {this.hidden = false} else {this.hidden = true}
}); })
Check and the search is now working.

Your problem is there :
return $(".course", this)
From jquery doc: http://api.jquery.com/jQuery/#jQuery-selection
Internally, selector context is implemented with the .find() method,
so $( "span", this ) is equivalent to $( this ).find( "span" )
filter function already check each elements
then, when you try to put $(".course") in context, it will fetch all again...
Valid code :
$("#filterTextBox").on('keyup', function()
{
var search = $(this).val().toLowerCase();
$(".course").show().filter(function()
{
return $(this).text().toLowerCase().indexOf(search) < 0;
}).hide();
});
In fact, you can alternatively use :contains() CSS selector,
but, it is not optimized for a large list and not crossbrowser
http://caniuse.com/#search=contains

You were accessing the wrong elements. This should be working:
$(".kurssikurssi").find('.course').show().filter(function () {
var $this = $(this)
if($this.text().indexOf(search) < 0){
$this.hide()
}
})

How to get ids when a value is selected in fcbkcomplete? - jsfiddle added

Please go through the below fiddle. I am trying to get the ids of the selected products in the fcbkcomplete box and show it as comma separated values in the textbox with id="interest". I wrote a function to achieve that but it didn't work. The function adds the id of the first value and not taking the ids of the other values which are added in the multiple selection box.
http://jsfiddle.net/balac/xDtrZ/1/
I have added json.txt. it contains datas like this
[{"key":"2", "value":"Canon Powershot "},{"key":"3", "value":"Fastrack Bag"},{"key":"4", "value":"Iphone 4 "},{"key":"5", "value":"Levis Jeans"},{"key":"7", "value":"Indig"},{"key":"8", "value":"Dashing Cars"},{"key":"9", "value":"dsdas"},{"key":"10", "value":"fsfs"}]
In the above json value key is the id which I want to display in the textbox as comma separated values. value is the value which will be coming in the dropdown for selection.
while selecting the values in the drop down i want the corresponding key to get added in the textbox as comma separated values.
The problem is that only the key of the first selected item is getting added in the textbox, no matter.
Hope am specific and said all in detail. if anyone want any clarification please ask me i will explain more.

I think I found a simpler solution for you. Keep in mind, due to the problems I mentioned in my comments I had to drastically simplify your fcbkcomplete code to get it working..
$(document).ready(function() {
$("#select3").fcbkcomplete({
addontab: true,
maxitems: 10,
input_min_size: 0,
height: 10,
select_all_text: "select",
onselect: clicker
});
});
var clicker = function() {
var selected = new Array();
$('option', this).each(function() {
selected.push($(this).val());
});
$('#interest').val(selected.join(', '));
};
See it in action here.
Note: I had to manually add <option>'s to the select list to get fcbkcomplete to actually work right. But nevertheless, my logic should work for you regardless.
Also, fcbkcomplete apparently dynamically changes the <option>'s id to something like opt_vaQDzJU37ArScs818rc8HUwz9gm1wypP so I had to use the value instead. There are workarounds for that if you're dead set on using the id instead of the value.
To illustrate my point, modify the loop through each option like this:
$('option', this).each(function() {
for (var i = 0; i < this.attributes.length; i++) {
var pair = this.attributes[i].name + ': '
+ this.attributes[i].value;
alert(pair);
}
selected.push($(this).val());
});
You will see how the attributes end up after fcbkcomplete runs.
Final Edit
After setting it up on localhost and using a JSON txt file, I was able to finally replicate the problem you were having. The thing is, the behavior totally changes when you use JSON instead of hard-coding the <option>s. Here is your working solution:
$(document).ready(function() {
var clicker = function(e) {
var selected = new Array();
// using "this" here was out of context, use #select3
$('option', $('#select3')).each(function() {
selected.push(this.value);
});
$('#interest').val(selected.join(', '));
};
$("#select3").fcbkcomplete({
json_url: "parseJSON.txt",
addontab: true,
maxitems: 10,
input_min_size: 0,
height: 10,
select_all_text: "select",
onselect: clicker
});
});

Below link is example of getting value in fcbkcomplete on select. Same process you can do for id to.
https://github.com/emposha/FCBKcomplete/issues/110
example how to use :
`//auto complete jquery starts here
$("#box").fcbkcomplete({
width: 250,
addontab: true,
maxitems: 1,
input_min_size: 0,
height: 10,
cache: true,
filter_case: true,
filter_hide: true,
filter_selected: true,
newel: true,
filter_case:false,
onselect: function(item)
{
getting_value_dealer(item._value, item._id);
}
});
//auto complete jquery ends here
`

Create instances of function

I have a map with a bunch of buttons that show and hide container div's. I don't want to assign the same code to each button because it's all the same.
I was thinking to create a variable when the button is clicked so it could replace a part in the DIV ID (handler?)
So I could refer to #fiche_8_1980_img_container as #fiche_VARIABLE.
Second part of my question is the animation functions I do are all looking like this:
$('#fiche_8_1980_img_container').animate({"opacity" : 1,}, 150, function() {});
Is there a way to put this in an instance or object so I could call it easier?
Here is a piece of code that I use for the button.
$('#button_8_algiers').click(function() {
$('#fiche_8_1980_img_container').css('visibility','visible');
$('#fiche_8_1980_img_container').animate({"opacity" : 1,}, 150, function() {
});
});
If anyone could point me in the right direction it would be great, I don't know where to start looking...
Thank you

would something like this help?
var ficheHandler = {
animateFiche: function(fiche) {
fiche
.css('visibility','visible');
.animate({"opacity" : 1,}, 150, function() {
});
}
}
$('#button_8_algiers').click(function() {
ficheHandler.animateFiche($('#fiche_8_1980_img_container'));
});

Try this which is basically using the help of jQuery chaining so there is no need to cache the object into local variables.
$('#button_8_algiers').click(function() {
$('#fiche_8_1980_img_container').css('visibility','visible');
.animate({"opacity" : 1,}, 150, function() {
});
});

I'm assuming you have control over the HTML. If you have that many buttons with shared functionality, give them the same CSS class, and add a unique identifier in either the rel or data attributes:
$('a.myButton').click(function(e) {
e.preventDefault();
$('#' + $(this).attr('data-target')).fadeIn(150);
});

How do I pass data from a link to a jQuery function?

$(function(){
$('.tab2').live('click', function() {
$('#coverTextH3').text(data[1].H3)
$('#coverTextP').text(data[1].P)
});
});
Lets say I have a link How do I pass data, the index of an array, to a jQuery function so I do not have to repeat my code, for each index [0]-[7]?
var data = [
{
H3: 'name',
p: 'more'
},
{
H3: 'string',
p: 'more strings'
}]

There are numerous options. If attaching handlers via javascript, I would select basing on element's id or some custom attribute, not the class. So say you have a number of links like this:
Tab 1
Tab 2
Tab 3
javascript in this case would be
$(function(){
$('a[link-number]').live('click', function() {
var index = $(this).attr('link-number') * 1 - 1;
$('#coverTextH3').text(data[index].H3)
$('#coverTextP').text(data[index].P)
});
});
Alternatively, you can attach click handlers right in your a elements declaration:
Tab 1
Tab 1
Tab 1
and define setCover function like this:
function setCover(index) {
$('#coverTextH3').text(data[index].H3)
$('#coverTextP').text(data[index].P)
}
Each of alternatives require changes in your htlm. If for some reason it is not possible, you need to at least now the range of your tabs, which can be quite tricky.

Something similar to this should work:
markup:
<a href="www.link.com" data-index="1" id="link1" />
javascript:
$(function(){
$('#link1').live('click', function() {
var idx = $(this).data('index');
$('#coverTextH3').text(data[idx].H3)
$('#coverTextP').text(data[idx].P)
});
});

if your link IDs correspond to the index order in the array you can do something like this:
example jsfiddle
jQuery:
$(function() {
$('.tab2').live('click', function(e) {
e.preventDefault();
// parse the integer from the ID
// and get the 0-based index (by subtracting 1)
var idx = $(this).attr('id').replace('link', '') * 1 - 1;
$('#coverTextH3').text(data[idx].H3)
$('#coverTextP').text(data[idx].p)
});
});
HTML:
Link 1
Link 2
<h3 id="coverTextH3"></h3>
<p id="coverTextP"></p>

Text
I'm not sure I understand exactly what you're asking. If this doens't fit, please clarify.

jQuery: how to produce a ProgressBar from given markup

So I'm using the ProgressBar JQuery plugin (http://t.wits.sg/misc/jQueryProgressBar/demo.php) to create some static progress bars.
What I want to achieve is to from this markup:
<span class="progress-bar">10 / 100</span>
produce a progress bar with maximum value of 100 and current value of 10. I am using html() method to get the contents of the span and then split() to get the two numbers:
$(document).ready(function() {
$(".progress-bar").progressBar($(this).html().split(' / ')[0], {
max: $(this).html().split(' / ')[1],
textFormat: 'fraction'
});
});
That doesn't work, any suggestions?
I'm pretty sure the problem is with $(this).html().split(' / ')[0] and $(this).html().split(' / ')[1], is that a correct syntax?

Try this:
$(document).ready(function() {
$(".progress-bar").each(function(){
values = $(this).html().split(' / ');
$(this).progressBar(values[0], {
max: values[1],
textFormat: 'fraction'
})
});
});
There is nothing wrong in using a variable for the split. It actually saves you a call.

how about:
$(document).ready(function() {
var pb = $(".progress-bar")[0].innerHTML.split(" / ");
$(".progress-bar").progressBar(pb[0], {
max: pb[1],
textFormat: 'fraction'
});
});
i assumed that you have just one progress bar on the page. if that is the case, this should work, otherwise, try it and see if this works to actually make the progress bar based on 1st progress bar's values, then we can work from there