Building Autocomplete in SwiftUI (Location Search)

hello everyone and welcome to adam sharma weekly and in this video you're going to learn that how you can perform auto complete operation when you are searching for a particular point of interest this means you're going to start writing burgers and it's going to show you all the different burger shops near your current location so let's go ahead and get started well the first thing we need to do is we need to allow the user to type in something all right and once they are typing in that thing we should be able to search it so i'm going to use searchable and this should be perfectly fine just using the search so i'm just going to pass in the search and let's go ahead and create the search state this is going to at least allow us to see a search bar somewhere on the top all right now one other thing that we'll have to make sure is that we are using a navigation view just to make it look nice and so the search bar can actually appear somewhere on the top all right so if i run it right now you'll be able to see it's not displaying so i'm going to go ahead and wrap this with a navigation view there we go i'm going to wrap it with navigation view and now you can see the search bar being appearing that is great i can also go ahead and write some sort of a text or something i can call it places or whatever you want to call it to give some sort of a title on the top okay great so over here we are searching for something every time we press a key whatever we type over here in the search text box it's going to get populated right there now this is fine but we have a long way to go because we still have to find out user's current location so we don't even know where the user is for this i'm going to go ahead and create a brand new file i'm going to call it location manager and the job of the location manager would be to find user's current location so let's go ahead and import core location we're going to go ahead and use the location manager and one of the things that we're going to do inside location manager we're going to also make sure that location manager is an observable object we'll have some properties that we want to publish and one of those properties will be location which is cl location and the other property that we want to give the user access to is a region so this is the mk coordinate region and basically this is the region near your kernel location and i'm going to go ahead and import mapkit now if you want you can give some sort of a default region to this that's perfectly fine or you can keep it empty i usually give it some sort of a default region so in order to do that i'm just going to go ahead and create a new file mk coordinate region plus extensions and i'm just going to provide some sort of a latitude and longitude some default latitude and longitudes that we can use as a default region now i can go ahead and say mk coordinate region dot default region so we will have some sort of a default region available next step if we want to get the actual location we will have to make use of the cl location manager and currently we have not used that so let's go ahead and say private let location manager now this is the actual location manager it's a cl location manager that is going to access or that is going to allow us to access the current location we're also going to go over here and make sure that we can override the init and we'll call super dot in it now why am i overwriting in it well i'm going to go ahead and also conform or use the ns object and the reason i'm using ns object is that eventually we will have to confirm and become a delegate of the location manager so that's why this is needed a couple of different things we need we need to set the distance accuracy and distance filter you can see the distance accuracy is best this means that go ahead and take some time to find our location and distance filter means we are not really filtering it by any distance now we need to since this is an ios application we will need to request for permission so i'm just going to say request always for authorization and now i can go ahead and say location manager dot start updating location when the location will be found the location manager delegate will be fired so i'm going to set the delegate to self where self is location manager that we created currently you can see that our location manager is not conforming to the cl location manager delegate and if it's not conforming to the cl location manager delegate all those delegate functions uh when they fire we're not going to get notified so i'm going to go ahead and create an extension you don't really need to create an extension but extensions do make your code organize a little bit more better and now we're conforming to the cl location manager delegate now this delegate the clocation manager delegate comes with many different functions one of them that we are interested is did update locations which is fired whenever the location manager finds or updates the location what we're going to do is we're simply going to go ahead and get the actual location either you get the first location or the last location it doesn't really matter there we go and now we can assign it to our location so location property equals to location and we can also assign it to the region so region equals to mk coordinate region well in this case i guess it's not going to be mk coordinate region we're going to go ahead and create a region so let's go ahead and do that there we go now both of these properties the location property and the region property are declared right here and they are marked with published so whenever something is marked with publish we need to make sure that we are doing that on the main queue so i'm going to say dispatch queue dot main dot async and simply go ahead and wrap this inside over here and just going to make sure that this particular self actually does exist and there we go so we're just going to go ahead and wrap it with weak self all right so this is going to allow us to get the location now since this is an ios app in order to get the location we must add some keys to our info.plist file so i'm going to go to my application click on info and right over here somewhere we can just go ahead and add a plus sign and add a new key which is ns location always and when it's used description and some sort of a description so this app requires your location to work be descriptive obviously this is a very generic kind of a message so make sure that you're writing a very descriptive method nice message okay so now we can go back to our actual content view and we can go ahead and see that how we can get the location i'm going to go over here create state object var or private var is fine private var location manager and we can create an instance of the location manager as soon as we create an instance of the location manager all of this code is going to get fired which means it should request for authorization all right so let's go ahead and run this and see if that particular authorization model or alert comes into play or not okay we're going to launch it and we're going to wait for this to appear i don't think we have anything on the content view so here we go so it is appearing like this it hasn't really asked us anything regarding the uh location so maybe we need another key so what we will do is go back to our code over here and let's see where is our key that we just added so here's the key that thing that we just added i'm going to go ahead and add another key which is ns location when in use description and i'm going to say this app requires your location to work let's go ahead and run it again there we go this is nice this is basically saying that hey can i have permission to access your location i'm going to say allow once allow when i'm using the app or don't allow so you have three different options i'm just going to go ahead and say allow once and now hopefully it will have my location all right now this is great i think everything is working nice over here the next thing that we want to do is once it has our location i think the next step would be to allow us to search for something right so currently we are not really searching for anything so if i go over here we can type in the name of the place but what we really want to do is we want to search a particular thing so i'm going to go ahead and say over here on change and when the search state changes probably it has a new value we will grab the search text so whatever the text that you entered we are going to grab that all right and then probably we can perform a search now who will be responsible for performing that kind of a search we will create a search results view model and that will perform the search so i'm just going to go ahead over here and probably create a new class we will call it search results view model so this is our view model that is going to be performing the actual search class search results view model which will be an observable object and it only has one simple function which is basically search and in that you're going to pass in the text that you are searching so you can be searching for burgers and the region in which you're searching so this can be your location now in order to search in ios there is already something and in map mac os also there's something called mk local search so we can create a request for mk local search and the way that you search is is you simply assign the natural query language property with the text that you're searching now since we want to search for some stuff that is near harvard current location we are going to assign the region once we have done that we will create a search which is mk local search object which takes in the request and next and finally we can go ahead and use the search search dot start it's going to give us a response or is going to give us an error if the response is good then we can go ahead and probably unwrap it so that will be great and after unwrapping it what we really want to do is we want to populate some sort of a view model that can be displayed on the screen but currently we don't really have any view model so i think it will be a good idea to probably create some sort of a view model now it would be a good idea to create a view model in a different file that is perfectly fine i'm just going to save some space and just add the view model right over here that view model we will call it place view model and that since it will eventually be displayed on the screen i will simply make it identifiable now this particular view model which is place view model is going to get the information from the map item which we are going to get somewhere from here so in order to create a place view model we're going to pass in the mk map item and once we have the map item one of those map items well all of those map items will have a properties that can allow us to get the name of that particular location a title of that location and other stuff so i'm going to go ahead and create a name property which will be string and i'm going to return map item dot name so this will be the name of that particular location now if we go back to our search results view model we can go ahead and create an instance of an array of places and we can use our response to iterate through the map items and create places which is place view model array so i can say response dot map items dot map and that can be place view model dot init we want to make sure that this particular places or publish property is set on the main thread so we're going to decorate it with the main actor so we don't really have to use dispatch and all that stuff okay so what other things do we actually need uh we need the name so that is great we can have the city and all that stuff if you want you can do the city also that is fine too all right let me go ahead and build it all right let's first go ahead and run this and see that if we are able to get the items or places or not so first i'm going to go back to the content view and when i'm in the content view i want to go ahead and display all those different things meaning all the different things that you are basically fetching so i'm going to go ahead and create a view model perform the search v model dot search passing in the text which in this case i guess will be search text and the region which will be location manager dot region and finally when it performed the search it is going to change this particular property the places property since the property is marked with published it is going to generate that kind of uh event and we can handle it somewhere over here now you can create a search result list control that is perfectly fine but i'm gonna try to do it simply over here so list of places well there's no places i guess so vm.places we will get access to a place and for now we're going to go ahead and see that if we can simply go ahead and display the name of the place if you can display the name of the place that always will be a great start let's go ahead and run this allow once now let me go ahead and say burgers and there we go you can see all the different stores that contain burgers near my current location now if i go ahead and say coffee then you can see all the different coffee stores all right so that is pretty cool that we are able to do all of those different things pretty cool right now if i remove all of them you can see that it still shows me some sort of uh you know items um that is something that we'll have to figure out how to solve this uh one of the things that we can do is we can check for search text if the search text dot empty well if it's not empty then we will perform this kind of a request else if it is empty then vm dot places we can simply assign it kind of like empty array all right if it has any problems then we'll have to check it out but let's go and search for coffee okay and if i remove all of this stuff it kind of give me the suggestion for some reason which is like empty now if i go ahead and say chicken well i guess all of these different store comes up which are chicken stores or sells chicken right and you can see that sometime when i type in it doesn't really it doesn't really clear it out all right so we'll have to figure out how to clear out those things so yeah so even if i type in coffee and if i remove coffee or delete coffee one letter at a time then it kind of works okay but if i type whatever burgers and i remove it really quickly then you can see that it for some reason show shows me all of this result uh with some errors being thrown in the console so i'm not really sure what that is um it should only be searching when the search text is search text is not empty and if it is empty then it should simply go ahead and let the places to be something else all right um so that is one of the things that we will have to figure out that what exactly is going on um i think searchable also contains some is searching or things like that i'm not sure if it's available over here but not but yeah you can probably do those things also but if you find a easier solution let me know but anyways we were at least able to build this application quickly you can see that if i go ahead and search for chicken you can see that all the different chicken stores are coming into play i can go ahead and remove that and i can go ahead and search for coffee and all the different coffee stores are coming now if i go ahead and remove that i can go search for park and all the parks are coming in and so on all right so that hopefully will help you out and if you find a solution for why it is not removing if i quickly remove it it shows me all of this stuff then let me know and i will probably add it in the comments or something thank you so much hope you have enjoyed this video

Channel: azamsharp

Views: 210

Keywords: swiftui, swiftui tutorial, swiftui maps, swiftui location, swiftui autocomplete, swiftui 2.0

Id: cOD1l2lv2Jw

Length: 20min 55sec (1255 seconds)

Published: Mon Dec 13 2021