Create a searchable select field with Laravel, InertiaJS and vue-multiselect

now whenever we are typing a key an additional request is made so if we do something like [Music] we are making a ton of requests to the server let's imagine we are working on a car service app where we need to have some kind of form to create new jobs for the cars coming to our service some fields we might need are the client name car and description in addition to that we'll need to keep a record of the mechanic worked on the car and the consultant who handled the paperwork for the job these last two fields the mechanic and consultant will be our searchable select fields as you can see i've already added the basic fields using the existing jet stream form components for our searchable field we'll need to install a package called view multi-select so let's grab it from here and run it now that it's installed we'll need to import it so we'll do import multi-select from view multi-select and also make sure to import the styles for this in our app css file so we'll do import and then we'll go up to directories node modules view we'll deselect this viewmultiselect.min.css and now we can go back and continue with the form so we need to add two additional fields called mechanic id and consultant id and now to use the multi-select let's copy this and replace the text area with multi-select we'll add the id mechanic id placeholder search mechanic now we need to pass our list of options and tell it what property to use as a display label so we'll do options and here we'll have mechanics and label which will be named and since mechanics will be an array we'll need to set an unique value for the track by which will be id this value will be used to identify each option in our list next up view multi-select emits a couple of useful events one of those is search change and this is emitted whenever the user types in the select box so when that happens we'll make an inertial request to update the mechanics array let's call this on search mechanics change another useful event is input and that it's trigger whenever the user selects an option we can use this event to set the mechanic id in our form so let's call unselected mechanic and here is mechanics okay let's continue with defining each of these three so mechanics will be a prop coming from the server so we'll have props mechanics which will be of type array and we'll have a default value of an empty array and we can do that by adding a function that returns an m theory next up is on search mechanics change and on selected mechanic these two will be methods so we'll add methods and let's just call the console.log so we'll do console.log and same here and if we check this in the browser it should work and here it is but the list is empty let's go ahead and provide this mechanics prop from the controller so i'll go inside jobs controller and return mechanics which is user wear type mechanic and we'll add a limit of 15. and call the cat method go back and refresh now we receive six mechanics and here is the list and it is searchable but it only searches those six mechanics if i go inside my seeder and increase the user count to let's say 100 and refresh the migrations refresh here login now we have 15 mechanics and whenever we search this list it will only return results from those 15. what we need to do is to make a call to the server and get an updated list of mechanics so let's do just that let's go to create job and here the on search mechanics change receives the term entered in the search box and here we need to make an inertial request specifically a get request to jobs slash create and we'll pass in the term as a query parameter and we can also write it like this now to make sure this request doesn't clear our local state we need to pass in the preserve state option that's true and also the preserve scroll so the page maintains its screw position and also replace true the reason we want replace through is let me show you in the browser but first let's remove this option refresh and now whenever i search or make a new request to the server that request is added to the history which means that if i click back now i will basically go back with each key press and we don't want that we want this request to replace the existing one in the browser history so that's why we are using replace true let's continue our work in the jobs controller by making the query filter the results based on the term we pass in so we can do that with when we have request of term then we need to apply these conditions we'll have builder or query and the second argument will be this value right here so we can call it term and here we need to apply the conditions so query where name like and here we need to add term and let's go in the browser and test this out so refresh and then we search let's check the requests to make sure they are going through and here there check the props no mechanics which is correct let's go back in our create job page component and take care of the unselected mechanic event so whenever that happens we receive a mechanic and we need to set the this dot form dot mechanic id equals to mechanic dot id if we go back in the browser refresh check our create job form here is our mechanic id let's select the and now it's 12 okay that works but somehow our select is empty whenever we select one item we should still see it here to do that we need to set a v model but that v model cannot be our form mechanic id because that needs to be an integer but the model for the multi select needs to be an object from the options so we need v-model mechanic or selected mechanic and this needs to be in our data and now if we go back refresh and select a mechanic here it is before we wrap up this video one final problem we need to address is the number of requests we're making now whenever we are typing a key an additional request is made so if we do something like we are making a ton of requests to the server we should de-bounce or throttle these requests so we can do that with low dash since it comes with the default larval so we can import throttle from low dash and then to use it we need to go to our method here and change it with throttle that will receive a function with the term and here we'll call our get request and let's say a 200 millisecond delay save refresh and now we are still making quite a lot of requests but not as many as we did before we can increase this limit to 300 refresh and this is decent now that we are done let's do the same for the consultant so we'll go up copy and paste this field and let's also update these properties with mechanic id mechanic and search mechanic is okay same here with consultant id and consultant search consultant and we'll have selected consultant consultants on search consultants change and on selected consultant okay now let's add the consultants prop and then a selected consultant duplicate these two methods go in the jobs controller and return consultants refresh the browser and here is our field we have lionel and let's say kessler and that's it that's how you can create a searchable select using inertia and view multi-select subscribe click the bell button bye

Channel: Constantin Druc

Views: 2,901

Keywords: laravel, inertiajs, inertia, vue, multiselect

Id: RPCO8kzDvp4

Length: 13min 11sec (791 seconds)

Published: Wed Feb 17 2021