Duration: 18 minutes
In the case of the autocomplete, we have a text box that will show the user the available options as the user is typing in the text box. The drop-down options are matches to what the user has typed so far. The source of these options is an array in this case, but that can be a web service as well.
Technology Used: jQuery UI and Visual Studio 2010
Keyword: jQuery UI, Visual Studio 2010, progressbar, disabled, value, event, create, change, complete, setTimeout, function, option, autocomplete, source.
Transcript: Hello everyone. This is Ayad Boudiab. I'm a senior .NET application developer. We are continuing our series on jQuery UI widgets. We've been discussing some of them, as far as, for example the dialogue. We see how we can work with the dialogue and the different options available for the dialogue. I'll also show you the slider, how we can work with some animations with the slider, for example impacting a span that was underneath it. Changing the value of the slider will actually change the font size of the span. In this case, we need to talk about the progress bar. We need to see how the progress bar would work, and also, as we usually do, we'll discuss some of the options available for the progress bar and also some of the events that we can work with, and how we can call those and impact the appearance and the functionality of a progress bar. Also, after the progress bar, I'm going to show you the autocomplete option. We need to see how that works, as well.
Let's go ahead and get started with the progress bar first. As you see, we have the actual references for our scripts on the top. We normally do that with the actual link of the CSS. I'm using the Dark Hive style, and also the scripts, one for the reference for the jQuery and the other reference is for the jQuery UI.
Here's my functionality that I'm interested in, because when the DOM is ready, that's the function that I want to call. Underneath, in the body, I have the actual H2 for the progress bar with a class of demo hiders coming in from the CSS that you see up here. Also, I have the div for one called progress bar with that specific ID, and another div with a span ID of status.
Taking what you have so far and trying to preview that in the browser, you will see the following. It simply just says progress bar. Okay. Let's see what else we can do and how we can get this functionality going.
Let's go ahead and start with referencing this actual progress bar. Again, in order for me to do that, I'll use my dollar sign, and I need to reference something with an ID. I use the pound sign, and it was named Progress Bar. I'll type "progress bar," and that will be the one that I need, right? Progress bar, and I want to call the progress bar function on it, so I called progress bar with a specific function. Simply having this with a progress bar function and no options provided, let's see what kind of defaults we have on that progress bar. I see a progress bar but nothing in it. It doesn't do anything. It doesn't show me anything. Right? Okay.
As we always do with this functionality, we can provide a list of options. These options are within the curly braces. For example, I can make it disabled. I can make the progress bar disabled with a value of true. Right now the progress bar is not functional. This is a disabled progress bar. Okay. This is one of the options I can have.
Now, what other options can I have with a progress bar? I can, for example, give it a specific value for the progress bar to be 50. Okay. So, progress bar with a value of 50. Try to preview that in the browser. There is a 50/50 progress bar, right? Progress happened up to here and nothing afterwards. This is the value for the progress bar, so happening at 50. Okay.
What other functionality can I work with? There are events, of course, associated with the progress bar. Let's take that value off. Here, let's start writing some of those options. Let's for example return that value to be 0. That's the first option I have. Now, I need to provide some events associated with the progress bar. The first event is to create. When the progress bar is created, I don't provide a value. I provide a function, right? That function takes event and UI as parameters. In this case, I'm going to leave it empty. This is a create event. That's how I can write an event, right? I provide the function name, and it does something when the progress bar is created.
The two cases that I'm interested in, in here is actually the change and the complete. I have the change event that I want to happen, and that of course has a function associated with it. It takes an event and UI as parameters. Now, I'm going to provide the actual body of the function. The second one I'm interested in is complete. When the progress bar is complete, what do you want to do? Also, it's a function that takes event and UI. You want something to happen in this case. These are the two events that in this case I'm interested in. There is nothing under here. These are the two events that I'm interested in for this specific progress bar.
Now, let's go ahead and implement them. For the change event I want some changes that happen to the value. In this case then, here's my jQuery, right? I'm going to reference the actual status. I'm going to use pound, status. Remember, the status is the one down here that I'm talking about, right? That's with the ID. This is the status that I want. I use the pound sign to reference it since it has an ID. Using that status, now I'm going to change the text on that status. I call the function, "Text." Then, I'm going to give it a specific value. What would that value be? The value is the value of the progress bar. Underneath the progress bar, where there is a span named "Status," I'm going to display the value of the progress bar using text. Here, within text I want to provide what that value is.
In order for me to provide that value, I want to call the progress bar and retrieve the option value. Let's go ahead and do that. I'm going to use the dollar sign, and then I'm going to use the pound sign and progress bar. I'm going to call progress bar. That will give me the actual progress bar. Then, in order for me to retrieve the option value, I'm going to call his progress bar function, right? In here, all I did is I retrieved that specific control using jQuery. I called the progress bar on it, and then for that progress bar, I want to retrieve the option value. How do I do that? By providing the first parameter as option, the second parameter as value. That way, I'm calling that progress bar. I'm asking it to provide me the value that it has currently. Any time that changes, I'm going to retrieve that value and put it in the actual span that you see underneath the progress bar.
Now when all that is completed, when the actual progress has completed, I'm going to retrieve that progress bar, again using the pound sign. I'm going to retrieve progress bar. Then, close that. When I retrieve that progress bar, I'm going to hide it. So when the progress has completed, I'm going to hide the progress bar. I'm going to hide it in an animation of slide. That's how I'm going to hide this progress bar. Let's go ahead and save that. We have the change and the complete events for this progress bar.
Here's the body of that function. Now, with an update, what do you want to happen? I'm going to retrieve the progress that just happened by asking for the value option that you saw up there, right? Give me that value option that just happened. This is the progress bar, retrieving the progress bar, calling the progress bar function, retrieving the option named value. Get that value; put it in the variable progress. Then, since it's from 0 to 100, I'm going to ask myself the question, "Did I reach 100?" If progress is less than 100, I'm going to provide some functionality here. If the progress is less than 100, then I'm going to get that specific value and add 1 to it. So I'm going to progress a little bit more. This is the value that I'm going to do. I'm going to call the chief progress bar, call the progress bar function. For this specific option named "Value," I'm going to make it progress plus one. If the progress is 50, 51. If 51, make it 52. If 52, make it 53. The progress is always happening. Why? Because set timeout, this is the piece of code named update, so the update function is going to be called every this period of time, which is the one-fifth of that second that you see over there.
In this case then, when that is done, in order for this to keep progressing, I'm going to set timeout again, and then I'm going to call like I did up there, update also every that period of time. Now, that keeps progressing on and on and on and on, until it reaches the value of 100. When it reaches the value of 100, it's done. When it's done, it's called complete event. This complete event will make it hide to the sliding and hidden from the screen.
Let's see if what we've done is actually working. Let's go ahead and preview that in the browser. Here's the progress bar. It's progressing, and every time it does that on the change, it's calling the text of the span to change its value, right? Now, keep progressing until it reaches the top value that I'm interested in. When it reaches that specific value, it slides away. It reaches a value of 100, and then it slides away. That's how the progress bar is happening because, again, this is the change method being called. I'm sorry, change event being called, complete event being called. I'm setting the timeout to happen on that update every this period of time. That set timeout will call the update. Update will retrieve that value. If that value is less than 100, change it to 1 plus, then call that set timeout on it again until it's done. That's how we can work with a progress bar.
Now, let's go ahead and move into the autocomplete to show you how that works. In the case of autocomplete, here's the page, autocomplete.htm. I have the actual link and the scripts, like we've always done, right? Then here I have the jQuery function. When the DOM is ready, I want something to happen. There are a couple of divs in here, and then I have a label, and input the name "Names," and then the label are for that specific input. That's why you use the keyword "for" in here to refer that label is for this specific textbox.
If I preview that in the browser, that should be able to give me a label with names and then also the actual textbox. You see nothing here, right? Names, and then a text box. So far, so good.
Let's see how we can work with autocomplete. I'm going to provide you with a list of names, for example names list. That's the array. Make it equal to the sum names. Those names are, for example, James, then Tom, then Jessica. Instead of you seeing me typing all those names, let me go ahead and paste them here. I have a list of names, names list - James, Tom, Jessica, Lisa, Robert, Kyle, Amanda, Sarah, Bob, Bool, and Chris. These are the list of names that they're available in the variable names list array.
Now, if I go underneath here and I try to reference using jQuery and my pound sign because I'm referencing an ID, names, which is down here. That's the input box, right? I'm referencing names. For these names, I can say .autocomplete. I'm calling autocomplete on this functionality, and then I'm going to provide it with a source because who is the source of this auto completion? If you want the auto completion to be turned on and available, where is the data coming from? We have multiple options, right? You can call a web service. That web service will give you some values back in adjacent format, and then it can show that over here by displaying them. You can make a call to the server and retrieve that from the database and display the list of names that you're interested in, or for simplicity in this case, we just retrieve those from an array. The source of my information then is actually the names list. I would say source. There'll be names list. The list of names would be the actual source for this auto completion. Names, is names here, with a pound sign to retrieve it, autocomplete to call autocomplete on it, and provide the source of this autocomplete for the names.
Now, let's try to preview that in the browser. I click in the box and I start typing, for example "r," and it gave me Robert, Sarah, and Chris as auto completion. Why? Because Robert has R in it, Sarah has R in the middle, and Chris has R in the middle. These are the three names that match my criteria. It gave me this as auto completion so I can select the value that I want. I can take out the R and say B. So I get Robert, Bob, and Bool as matched. Remember, the match is not only on the first letter. Robert, B is right in the middle. That was also one of my options to select from. This is the autocomplete. Again those values don't have to be provided from an array. They could be form a web service that you called, and then it would give you back those values. You can tap in to the server and retrieve any values that you want in adjacent format. You can display those in the auto completion.
In this video, we discussed how we can work with the progress bar, and also we discussed how we can use autocomplete with jQuery UI. Thank you very much for listening. I'm Ayad Boudiab, and you take care.