Ajax Autocomplete in Laravel

hi this is webs lesson video tutorial on laravel framework and here we will discuss how to make autocomplete text box in Louisville by using jQuery with Ajax we all know autocomplete is a one feature in web development when we have typed something in text box then it provide lists of suggestion which we have type in text box so this type of features we have to make in Louisville framework by using Ajax jQuery and my SQL database so when we have type in text box then by using Ajax requested will send requests for fetch same data which are available in my SQL database and display below text box in list for display list of suggestion we will use bootstrap library with Louisville framework and here we have take example of country name enter in text box so when we have start type country name character than it will get suggestion of country name which has been start with particular character now let's start learning this topic so this is our testing database and in this we have one apps country's table in this table we have already inserted all country name we will fetch autocomplete suggestion data from this table from our Louisville application by using Ajax this is our Louisville application working folder and here first we want to make database connection so we have open dot env file under this file we have set my SQL credential like host set to local host database set to testing username set to root and password set to blank after this we want to set my SQL database credential in config folder database dot PHP file and in this file also we have also set host to localhost database name set to testing username set root and password set blank after making database connection first we want to make one autocomplete controller in our application for this we have go to command prompt here we have already run composer command and for create controller in Louisville by using command prompt here we have write PHP artisan make double : controller with name autocomplete controller and press Enter this command will make autocomplete controller in our eval application we can find this controller under app folder / HTTP folder / controller folders here we have opened this autocomplete controller under this first we have make index method this is main method of this controller so when we have write base URL / this controller name then it will call this index method under this method we want to load view file so here write return statement with view method and under this we have write autocomplete this is autocomplete blade dot PHP view file so when we have called directly autocomplete controller then it will call this index method and it will load this autocomplete view file in browser now we have go-to resources folder and under this we have open views folder and here we can see autocomplete dot blade PHP file so we have opened this file under this file we have already included JavaScript library jQuery and bootstrap library we will use functionality of both library for this make this feature on this page first we want to make on text box so here we have write input type is equal to text with name and ID is equal to country name we want to make autocomplete feature on this text box so when we have start to type particular character of country then we want to display country name which start with particular character below this text box we have write division tag with ID is equal to country list under this tag we will display list of country name suggestion now here we have write to open bracket and close bracket and between this we have write CSRF field function this function will make one hidden field with hash value and this is for handle multiple exception now we have moved to write jQuery code and here we have write dollar with textbox ID country name with key up method so when we have type into textbox ventas it will execute this code under this we have write query variable is equal to dollar this with value method this will get value of country name textbox value and store under this query variable below this we have write if statement and under condition we have write query variable is not equal to blank value if this condition true then it will execute if block of code under this block we have right underscore token variable is equal to dollar with input name is equal to token with value method this code will fetch value for this field and store under this variable this variable value is required when we have used post method in Ajax requests in Louisville now we have start write Ajax request in this first we have write first option URL set to open and close to bracket and between this we have right autocomplete dot fetch here we have send request to fetch method of autocomplete controller in second option we have right method option set to post here we have used post method for send data to controller in third option we have write data and in this option we can define which data we want sent to server so here we have write query variable and underscore token variable lastly we have write success callback function this function will be called if request completed successfully and it will receive data from server which we can access from this data argument under this function we have write dollar with division tag ID country list with fade-in method this code will display country list tag with fade in effect on webpage below this we have write dollar with country list ID with HTML method and under this method we have write data this code will display country name suggestion under this tag now we have go to autocomplete controller and here we have write used statement with database class object by using this statement we can perform database operation under this controller we have make one fetch method with request argument this method will receive Ajax request for search country name from apps country's table under this function we have write if statement and under condition we have write dollar request variable with get method and under this we have write query if this condition true then it will execute if block of code under this block we have write dollar query variable is equal to dollar request variable with get method with query argument here we have store ajax data under this dollar query variable now we have write dollar data variable is equal to database class object with table method and under this we have write apps country's table this code will make select star from apps country's query after this how can we use like wildcard character under Louisville for this we have right where method with three argument in first argument we have write country name table column in second argument we have write like statement and in third character we have write percentage character with dollar query variable this will add wear condition like country name like character which we have write under text box lastly we want to execute query and get result of query execution so here we have write get method it will execute query and return result in PHP object now we have write dollar output variable is equal to under beardless tag with class is equal to dropdown menu which is bootstrap library class below this we have right for each loop with dollar data variable as dollar row variable by using for each loop we can fetch data from dollar data variable under this loop we have right dollar output variable and under this we have append a CH d ml code like open and close list tag and between this we have right anchor tag with our F attribute in anchor text we want to display country name so here we have write dollar row variable with country name object it will display country name under this tag and make country list suggestion which we have store under this dollar output variable now we want to send this dollar output variable data to Ajax requests so here we have write echo statement with dollar output variable and this data will be displayed below text box as suggestion after this we want to set route of this to index and fetch method of this controller so we have go-to routes folder web dot PHP file under this file we have write route class with get method with two argument in first argument we have write autocomplete controller name and in second argument we have write autocomplete controller at the rate index method so when in browser we have type autocomplete in URL then it will call this index method of autocomplete controller same way we want to set root for fetch method so here we have write root class with post method with two argument in first argument we have write autocomplete slash fetch in second argument we have write autocomplete controller at the rate fetch method so when we have type Oh complete slash fetch in URL then it will called autocomplete controller fetch method for Ajax URL here we have to add name method and under this we have right autocomplete dot fetch which we have right under ajax URL option so here our code is ready now we have go to command prompt and write PHP artisan serve command this will run our Ajax request and product one base URL so we have copy and paste under browser slash autocomplete and press ENTER then we can see text box on web page for enter country name so here we have start write country name like United States so when we have type u in text box then we have get suggestion of country list which start with you after this we have write United then it has suggest country name which start with United now we want to select United States and United States should come in text box and country list suggestion must be removed from web page so in autocomplete dot blade PHP and here we have right dollar document selector with on method and under this we have right click event with list tag so when we have click on country name then it will execute this block of code under this we have right dollar with textbox ID country name with value method and under this we have right dollar with the selector with text method this code will fetch text from country list on which we have click and it will assign value to this country name text box after clicking we want to remove country suggestion list so we have write dollar with division tag ID country list with fade-out method it will remove country suggestion list from web page friends first we have refresh page and after this we have again write United in text box and after this we have received country list suggestions start with United now we want to select United States so we have click on this country and after click on this country United States country has been come into text box this way we can make autocomplete suggestion text box in Louisville by using jQuery AJAX with my SQL if you have any query regarding this Louisville video tutorial part please comment your query in comment box or if you like this video tutorial please share with your friends or even you can also share on social media also if you want to get more update regarding our Louisville video tutorial please subscribe our youtube channel forget more update regarding release of future video lastly keep watching our YouTube channel thanks for watching this video tutorial

Channel: Webslesson

Views: 37,783

Keywords: autocomplete, ajax autocomplete, laravel autocomplete, ajax search, autocomlete search, search laravel, autocomplete laravel example, autocomplete in laravel, ajax autocomplete laravel, laravel ajax autocomplete, jquery autocomplete ajax example, laravel autocomplete search using ajax jquery, search, laravel ajax search, jquery search ajax laravel, autocomplete jquery laravel api example, laravel, ajax live search in laravel using jquery

Id: D4ny-CboZC0

Length: 17min 16sec (1036 seconds)

Published: Wed Jun 06 2018