Ajax Live Data Search with jQuery PHP MySQL

hello everyone welcome back to my channel today i am gonna show you ajax live data search using jquery php mysqli [Music] [Music] let's begin now first of all create a folder called live search under this create an index.php file i have already written the front-end part which is created by using bootstrap [Music] add the jquery cdn search jquery cdn click on this link copy this link and paste it in your index file now we need to create our database i have already created it this is the database i am going to use and this is my table now let's create the config.php file for connection to the database um [Music] [Music] [Music] now we will write our jquery ajax code go to index.php file and start the jquery code give this input field an id here i have given live search using this id we will perform an event on this input type [Music] this code means when an user type any value or releases any key then that value will be stored in a variable called input and will be shown using alert function let's check it on browser as you can see it is showing us the type value let's continue our code [Music] [Music] this code means if this input is not empty then using ajax method page redirects to livesection.php with the data input create a div section with an id called search result [Music] using this id we will display our data that will come from this page this code means after success function data will be shown in the div section with an id search result if this input is empty then this section will be hidden now let's create this file [Music] write a simple code first just to check that is working properly or not [Music] so as you can see after giving a value to this input field page redirects to the livesearch.php now let's write our further code include config.php file here [Music] this code means if input is set then this query will run this query selects those table rows whose column name value starts with this input this percentage symbol represents zero one or multiple characters means if we will write character a in this input type then any number of characters can occur after this a character [Music] [Music] [Music] this message will be displayed when no row will match with this query criteria [Music] now display the search data in the form of table [Music] give all the table columns as headings [Music] [Music] fetch all the column values [Music] [Music] [Music] [Music] [Music] [Music] oh i have given the wrong parameter here let's correct it let's now check our code on browser as you can see it is working properly to make your search according to these other columns we have to add like operator to all the remaining columns using or operator so that query work for all other columns [Music] [Music] [Music] now let's check it see our code is working successfully you can also add limit clause in your query to limit the number of results matched with this criteria in this database there are total three number of rows whose column values are starting with j letter let's search a table row starting with j letter using limit clause if i put three here then it will show three matched results if we will add limit to then it will show us only two results matched with our query from the database regardless of the total number of matched results as you can see there is a problem here our data is not showing to prevent this go to index.php and make the display of this div section block using cssjquery method [Music] now as you can see we have successfully created our ajax live search task so this is it for today hope you liked and learned something from this if you do then hit a like and subscribe to my channel [Music]

Channel: WebsiteGeek

Views: 1,917

Keywords: Coding, jQuery Ajax with Validation, website, code, java, jquery, script, javascript, registration, form, login, in, Ajax, tutorial, validation, error, php, wordpress, html, how, to, howto, beginners, responsive, media, queries, coder, Decode, EasyTutorials, mysqli, CSS, web design, www, programming, json, response, guide, development, formdata, database, livesearch, live, ajax, search database, search, mysql, sql, sqli, query, search query, fetch, coding, boostrap 4, data, pure javascript, chat app, chat, app, keyup, input, live search

Id: Yggrlux69MQ

Length: 10min 20sec (620 seconds)

Published: Tue Sep 28 2021