It goes in this video we will begin to implement our J query auto complete function.
So it those with enrolling students in a course.
But before we get into all of that I want to go through quickly some adjustments that I have made to
the application since the last video and you can feel free to emulate these if you wish.
Firstly I removed the contact and about links from or not bar No we only have home courses students
and enrolments.
All right.
And we could actually just add lecturers here considering that we added a module to managed lecturers
just quickly so are enough bar no only has links to our modules that we have implemented or are implementing.
Secondly you would notice that I have styles that render and this is rendering some styles for Duke
or UI so I added a new bundle to my one to one fig for J.
Query why and I'm including the bass.
All that C assist which includes the bass that census and the things that census files as well as I
had did because I was running an experiment but this should really be autocomplete not CSF.
So I am adding these two files to my overall C Asus imports and I am referencing them in the G.
Query you I says render it and if the need arises to have more than we can just put them in as we know
we need to once again order matters.
So you'd want to make sure you include all of the base files first before the individual CSA files.
All right so now before we get into our G core excitement I want us to just run back over to our documentation
here given to us by G where UI dot com and just take a look at the autocomplete feature.
What we're aiming for is when we type a student's name here and select it.
And in this example it is made with programming languages.
So let's say the programming languages would be our student names and I type something like H S then
the expectation is that any student whose name contains H S should come up in this dropdown so if I
type C need to get a better picture.
And then when I select that it will be that students that will be enrolled.
Once I click Create.
So we're doing it in pieces.
Right now we're just dealing with implementing the autocomplete in the next video.
Then we will deal with actually effecting that adding and enrollment functionality back in Visual Studio
we start this exercise by first finding the create value for our enrollments and then we're going to
do a bit of refractory rearranging of our fields and just by way of recap we have a field or grade we
have a field for course I.D. which gave us a drop down list with all of the courses in there.
We have a field for students which give us a drop bonus for students and another one for lecturers once
again with a drug and in case you've forgotten and you're wondering why we have so many dropdown lists.
Once there is a one to many relationship meaning with enrollments it's literally many to one with all
of these so many students can be in the enrollment soup many courses can be in the enrollment tables
and many lectures.
You'll find that document in scaffolding will actually give you dropdown lists auto generated giving
you all of your possible options and all that's really gets passed by is the course I.D. since that
is what the enrollment table is really storing anyway.
So you want drop bone lists for some of these and for some of these views you want to change them up
a bit at the time of enrollment then we probably don't need and greed.
So actually the greed read and remember in the database that we would have allowed no fourth grade.
So at the time of creating an enrollments that is adding across seeing who is the lecturer and adding
the students we really don't need the grade.
So I can remove this as at the time of creation of often enrollment we probably don't know who the lecturer
is.
So we don't need the lecture idea right.
No.
All of that is really important is to specify which class we're dealing with and which student or students
will be assigned to this class.
Part of this activity will be to make this entire procedure dynamic enough that you don't have the user
won't have to browse a and browse buck every time they want to add a student.
They can just select a course at ABA and a part of the page will refresh but we're not there yet.
Right now we're just dealing with the auto complete.
One to reference the query documentation once again just so we have an appreciation for the code that
we're about to write and the part of the auto complete documentation that I want to focus on is a remote
juice and P data service.
All right.
So we're going to be using Jake or Ajax and you see that me reference it declare Egypt's which will
actually call a link or call adjacent endpoints that we are going to meet right.
No.
That will serve up some list from the database in this case the list of students based on what is being
typed.
So the example here is that they have a database of birds and they have a Euro for the search and they're
specifying the data type and what should be searched for.
So that's what data represents the term to be searched for and then upon a successful query and it will
return the data and they will show the data.
All right.
And then when one is selected so that is actually just an event in this entire process.
So the source of the data will be over Egypt's far they're seeing the minimum length for any search
query should be to so two characters and then you trigger the search and then once it is selected then
they would wish to write to the love that you selected this with that value on that idea.
Now let us begin our journey.
Something to tie up this script thing.
It's the third part of my page.
I'm just putting into the top tier of the view so that we can have a distinct section for it to me probably
later on.
Extract this and put in a script file and reference it directly.
That's fine.
But for now I'm just going to write the thread here and because I'm using J.
Query.
Sometimes you would start off J query as document dots ready.
You can actually just see dollar sign function and then you open and close.
I like to just close my functions at the same time.
We're just getting warmed up here.
But before we even start writing Jake where we have to make sure that we have the appropriate controls
for what we're able to do.
Now remember that we want to be able to type the student's name and we have a drop down list working
with.
So we can't type the student's name with a drop down list and there's another factor to this that the
drop below list is actually tracking the students i.e. a text box won't be checking the students I.D.
or the tracking the name of the student.
So in order to facilitate the need for the user to see the name in a text box and the actual solution
to get an I.D. upon the submission of the form we have to take this out.
So in the sense that you raised this and then went to replace it with two controls a text box and a
hidden field.
All right so I did that real quickly and I'll just walk you through the two lines of code which really
shouldn't be that far.
We have our each helper here and we're using it for you could have used that text box for.
That's fine.
Then you'd realize that the anatomy of the edit 4 and the text box for our kind of different when it
comes to referencing or C assist classes.
But either way they both need model and we're associating the text box with model but students thought
first name and the reason I'm using the first name is that we we did not use the full name column in
students we used first name and last name.
And I'm just going to use this because I just need a text box does remember the Edit 4 is going to yield
a control that is in keeping with whatever data type we're telling that we need it for.
So in this case it's a text we'll get that text box.
I could have used last name if I used a view model which would be an abstraction from the actual entity
coming from the database I could have included a full name data field in that and then used full name
so there are multiple ways to do this.
I'm just keeping it simple so that can get up and running later on and of course actually view models
and you can create that level of abstraction but for now let's just stick to this.
So we have model dot student dot first name and then we're just giving it some new each attributes and
including the class form dash control which gives it that bootstrap loop and then the second line is
a hidden field because we want to track the student I.D. when the student is selected from our autocomplete
struck down list once again this auto complete textbook is only going to show us the name but what the
application needs is the I.D..
So we're just using a hidden force so that the user doesn't have to see the one two three to two thousand
and whatever the student I.D. value is.
So we're hiding that from the user but then when the form is submitted this is what the model really
needs.
This is what the controller needs to see and we can just take a quick look on the post option for print
that's it's really just wanting student I.D. doesn't care about the first name and the last name.
All right.
So this is striking a balance between giving the user a visually acceptable interface and actually making
sure that our solution doesn't break and maintaining the integrity of the D for that we're passing across.
All right.
So we've modified this and we just took out the dropdown box and we added a text box which is going
to serve the purpose of having us facilitate our auto complete functionality and a hidden for which
is just tracking the idea of the student that is selected from this autocomplete text box.
Now bucking Jake wary we we we can actually just go to the documentation and probably copy and paste
some of this code and change it as we go along.
So I'm just going to quickly grab some of this and I'm just going to adjust it as I go along.
All right.
So here we have our code and we're going to start refreshed to or purposes the first change is the target
elements.
Now in January you can target any elements using the name the IP value just I can see as this when insists
you want the element by either use the hashtag or if you wanted by class use a dot.
So in this situation you can actually reference it directly by the IP using the hashtag or directed
by the class name using.
But in this case what we want to target is the edit 4 and if we have student dot first name.
So in other words whatever the model value is here that determines the idea of the elements.
So the idea of this dropdown list is in this case course i.e. the idea for a four is student not not
what's underscore.
When you have that entity and it's property then it's usually on the score.
So that's a little gray area but would go into debug mode and show you how you can determine what's
that idea will be.
In this case the hidden for its ideas is student I.T. so I'm just going to quickly go into Bebo mode
and show you the ideas as they're entered.
All right so this is a little accretion page it looks like right now having stripped todo the drop boxes
and we of course idea the label which we know we can change using our method classes and we have student
I.D. And what we wanted to determine was the idea for this element which is a text box so I can just
go there and inspect element and then by looking at whatever is rendered here I can see that the idea
for the element is student the model is student dot first name.
So in code it's would be student dot first name was a dot is an illegal element in an I.D. in each demo.
So the what is rendered is actually student on this for first name so we can just come out of debug
mode quickly or we can stay in debug mode since what we're able to do is go going to modify the interface
so we can just change this target element to student on the score first name and then we see that we're
following the code dot autocomplete which is calling the function autocomplete on that target elements.
The next step is to change the law that is being referenced.
We're going to have our own you are and you have two ways to read this you can write it using the HDMI
help or you can just read it using the same pattern of slash and end.
So I'm going to use the session endpoint method where I'm going to see a slash and I want it in the.
That's the controller right.
So it would be enrolments slash.
What is the actual name.
And I'd call it.
Get students.
So we need to go into our controller and the means controller and later on make an action that will
get called whenever this function is invoked.
All right.
And the data type we can just modify this to Jason.
All right.
Jason these are specialized formats.
Jason so I feel more comfortable using Jason.
You can test it with either and let me know how it works.
And then for data you need to specify what the name of the variable that is going to Conti and whatever
data is being entered into this element.
That's the name.
So that means when we build our Jason endpoints we have to make sure that it is outfitted and prepared
to take some variable called term and the value that we're passing is a request term.
So this could really be anything.
This could be turned this could be query or you know whatever you want to call it.
Just make sure that when we're implementing this action we have a facility to recognize that this is
a parameter being passed in.
So we will get to that point soon.
I'm just building all this do query code line by line.
The next function is success and success.
Basically it's invoked when the source successfully brought data and so success is said data.
And what I'm going to do here is add quick debug line.
So in the querying you know you don't really get a debugging tool like visual studio to take it line
by line.
So what is a good technique is to just seize console dot log and then you can just put whatever value
is that you want or add to the console on this console would be the browser console or whatever browser
you're using in this case Chrome.
You always have a console tab here and you'll see that we have an error here and in this era.
But when we do console love whatever value it is that we want to see printed here you can just see it
there.
And that is how we go ahead and build on debug and make sure that the values that we expect our to vote
is that where it gets back we can leave the minimum length properties.
So that means that it won't involve the autocomplete until the minimum two characters have gone into
the search box are the elements which in this case is student almost for a first name and select we'll
see.
What do you want me to do when a value has been selected.
This speaks to Parramatta's event which says what was the event that was triggered and UI or C query
or data whatever it is.
And that is whatever value is being returned upon the success or whatever value is being selected.
So I'm just going to put our console love here once again just so that we can make sure that we're getting
back some sensible data not ones that come out of debug more quickly and explain that error.
Let me just bring it up quickly.
So this arrow is basically saying that if you're trying to initialize something when there is a referencing
problem and I would have said it's more than once and if we could that we see that urgency problem is
right here.
Oh sorry we didn't refresh.
All right so it seemed that referencing problem is right there at our function invocation.
And that is because and I'll bring up the food feed source so we can see it.
That is because our script here is running in isolation.
This is a Jew query block of code Jaker and agents and we are running it's at the top of the page when
we're Francine J.
Query at the end of the page and remember that I said sequence matters.
So what needs to happen is that these scripts need to be referenced above this block.
And so everything will work properly.
So I'm going to come out of debug mode.
Go to my layouts and I'm just going to move the C of as a city of a number of techniques to handle this.
You'll see a number of ways I'm just going to move on my files to the top of the page or it's underneath
modernizer all right.
So I have all of my stars and all of my scripts rendering first and then by the time everything would
have been rendered and it gets to the body or the view remember the view gets rendered there.
And in this case this is the view.
Then this script would have already been taken care of in terms of what prerequisite libraries it needs
to reference in order to do the auto companies and the G query functions.
Now that I've done the Joe script portion I'm going to modify my controller and add the action and I
just add it's below the belief confirmed and we're going to type this out quickly so firstly I did specify
that I wanted the type of call to be post that I did not so I'm going to modify that we wanted to be
a post call.
So we'll just say type and we right in quotation marks post so or euro should be called in post and
then in my controller I'm going to modify the code and add an issue d put people's Jason result function.
So up until now we would have seen action results each time.
No we need Jason the results.
We have a public and it's Jason.
And you see that into the sense is hoping it alone.
So they give us a built in function that can return Jason results.
And I did say that the function should be called get students.
So I'm just making sure that the spelling is correct.
And then what we are passing in is a parameter called What Do We Call It term.
So we're getting a middle string term and then this function we're going to declare a variable full
students and or we're going to do just run a quick query.
So by now we should know how parties work because we've been scaffolding we've been modifying code and
so we just want to run up because I'm just going to say D.B. dots and what they're referring students
and then use our dot operator again and then we're going to go into some of the dynamic nature of link
and entity framework.
And so we're going to declare an abstract object with the data values that we really really need for
this operation.
Once again the two data values that we know we need are the actual name which should populate this text
box and the idea whose value we want to place in these elements.
We know however that we can only look at one element at a time when it released the name either the
first name or the last name and the I.D. Well it's there.
So what we need are a name and I.T. and to be very complete in our search we want to make sure that
when we type any two letters that combination of letters needs to be in either the first name or the
last name not just the first name.
So even though we're using first name here we do want to limit our autocomplete to just first name.
So once again this is just because we didn't use a view model that I'm not looking at full name in the
ability to specify what the text box should be I'm just using students first name.
And if you still don't feel comfortable with that you could actually just use a regular input field
type equals text to the books and then you could see the idea is equal to student name and you give
it the bootstrap class of course and then you could just use that here.
Right.
So it's just showing you that the name of the I.D. is immaterial to the operation that we're really
about to perform.
So I'll just leave this bit of code here as a reference point if you wish but continue with this since
you spent so much time ventilating that so that students dots act which then requires me to put in some
parliament those and I have to specify a lumbar expression first.
So cue here is where I can actually declare a brand new object that doesn't necessarily look like a
students object someone to see you because I want a new and abstract object with my own values.
So cue is pointing to a new object and I'm going to fill this abstract object with a name and foreign
name.
I'm going to see two dots and then I remember the cue gives me access to all of the properties of whatever
tune we're looking at.
Cue that first name.
And I'm going to make it look like a full name.
Someone's upon putting a first name.
And the last thing on C Q Dot and the last name.
And of course who puts the space there so it looks user friendly.
So that is the full name of the students.
And then we also want an I.D..
So once again this abstract object allows me to be clear whatever properties I want on the fly.
And then it will construct these objects and put the list off them.
In this students variable.
All right.
So I.D. will be equal to two dots Heidi student I.D. rather.
And right there you said once again from our database and our students table select into a brand new
object.
That's pretty much what they're saying.
Select these properties into our brand new object and this brand new object has the property name and
give me these values and it has an I.D. Give me those values and we could go ahead and just put as many
other properties as we wish.
But once again we really only need the name and the I.D. So those are the only two that I'm selecting.
But it's not finished there because remember that we want to filter.
So this is selecting all of the students into brand new objects with name and I.D. that's fine.
But the fact is we need to filter on term.
We need to make sure that whatever is being returned as students has term in there.
So we're going to add we're we can use cue and the filter command would be CU dots and then you notice
that the queue is not only picking up idea and name because it's only trying to filter on whatever new
object I just selected.
All this data into all right.
So then I want to see where a name which is a combination of first name and last name contains and our
expression is term.
So when to walk through all of this one more time we're running a query and we're storing the results
in a variable called students and this query is looking into the students table and it is selecting
all of the records but it's reconstructing them into on the fly very abstract model that we just created.
We didn't give it we didn't even give it a name.
We just created it's just for this purpose and I'm saying I want the name which will be cued up first
name plus and it's empty space and last name just so it looks user friendly.
That's a full name like what I'll call this full name if I wanted to.
It's really up to you.
I just need my dad's name and then we select the I.D. and we see the I.D. should have the students I.D.
and then we're going to filter all of that.
So all of this will be filtered.
We're the name that is returned on teens this term and then at the end of all of that we need to return
because you noticed that this red line has been here all this time.
We have a Jason results so the return is going to be a bit different so we're going to see a return
to son and we want to return our variable students and we just passing in one of those methods that
we need to pass in.
All right.
So we're returning a juice on results of this object or a set of these objects as do some objects.
And we just add in that behavior.
So I'll get that we can build and just ensure that we have no errors.
All right.
So here in our browser we just test and see if all is going well with our function calls we can quickly
look and see the students that we have in our database.
It's added a few more.
So bucking create remember that our code right.
No it's just monitoring via console that love what is happening with each step.
So when source is successful then it should write the data that it's bringing back to the console.
And also if something is selected.
But right now I think we'll only be able to see what comes back to the console log.
So if I type T you know there's nothing is happening because it's not minimum length.
So if I type T E and then you see the minimum length and you see that there's some action happening
but if we drill down into the console we see that it's actually bringing back some data for ossified
Turkey a it brings back data again and you see that's it's really just filtering based on that search.
So we're bringing up the name and we're bringing by the ivy like likely specified in our abstract object
that we really only need name and I.D. are what we need to do is actually display the actual dropdown
so that we can click and select that value here.
But in the background store this idea value in our hidden field art.
So back in our application I made a change here quickly and just walk you through it.
The whole point of source having two parameters request and a response meaning then that but we really
named them according to what their fourth request is what will be passed and a response is what is received.
So what is received comes back with success and using our response function we can actually map some
data items which would have been what is returned.
So data is an ARI off the search results.
So the response mapping all of those data items and I'm calling a passing each record from this I read
into this function and then returning a label value of item name.
So remember that item or data would have an array of objects that have I.D. and name.
So each item here is going to have a name and then I.D..
So what I'm doing is returning objects with label and value and an I.D. label and value are especially
important for what is displayed on the screen when the names come up and dropped Doctorow dropped Bill
peers use the label is what appears in the drop below.
And when you click and the text feels that takes box then that would be the value.
So you wouldn't want to change these from name since the name is what is expected to be seen in both
situations.
However Heidi once again is just for background purposes.
So we'll back to our interface and bring up the console so we can see what's happening.
And then I'm going to start typing so remember nothing until two characters see a trip and then there
you see you see the peering if I type will.
All right.
So it's actually searching the full name for any character sequence and you see that for each successful
results.
We're getting back that data object.
All right someone to actually select one and remember that we have a console that love tracking when
we select and that was it being fired there and we see here that we have the item object with the label
which would have been what is displayed when it struck down the value which you notice is going into
the text box and the I.D..
So now we need to write some code to make sure that our hidden field gets populated with that idea because
if we look at it specifically there is nothing changing we have the hidden field and there is no value.
All right.
Which is not what we want.
So we want that when we select that name the value of this hidden field gets updated.
So back in Visual Studio we will modify our select function to then update the element in question and
elements in question is student I.D..
So I'll leave the console log query and what I'll do is see the sign open equal use open press kits
and quotation marks.
Student I.D. and do where it makes it easy for us to set the values so we can discard the valve function
and we'll just pass in the value that we want it to be set up so we can see data Dot.
Oh sorry we named the query so this query dot.
And then remember that this is actually being mapped to an object with item and item has name and I.D..
So you need query dot item dots and I'm going to specify with Colin keys since that's how it's written
here.
So it's labeled value and I.D..
So I'm setting the value off or hidden field students idea.
So that's I.T. and remember that is happening when a select event is fired.
So I'm just going to quickly go back refresh and we'll try that again.
And just watch the value for the field.
And there you go you see it's being updated.
So if I say test and we have these two it's being updated each time.
So now we know that we're actually tracking the value of the student that is being selected.
So once again our objective is that we will have this page and that create button when we click Create.
We see a dynamic refresh and reload of the list of students currently associated with this course.
So for now I'm just going to select one from the dropdown box and I'm going to enroll test students
into this.
And then with the click Create and then we see what happens.
OK.
Sorry Adam a break point on that bits of code but if we go here and look at the object you'll see that
we're passing in the essentials.
Of course I.D..
No no.
But then we did a alone no four letter I.D. and fourth grade and students is getting it.
So the two most important parts of this particular model are getting data.
So if we press five and continue then we will be rewrote it to the enrollments index speech.
Now once again we are going to be doing some modifications.
So that will process so it doesn't go back here every time and then we have to create new we will actually
have a partial view of the list of students enrolled refreshing each time create our each time this
is changed it will refresh to show exactly who is enrolled in the selected class.
And once a student is entered here and selected it will refresh and I've been banned no color without
moving away from the speech.