Tagged: Autocomplete with PHP

Ajax Autocomplete Live Search Suggestion using PHP MySQL 0

Ajax Autocomplete Live Search Suggestion using PHP MySQL

Today, We want to share with you Ajax Autocomplete Live Search Suggestion using PHP MySQL.In this post we will show you PHP Ajax Autocomplete Search from Database Example, hear for Auto complete search with Ajax, jQuery, PHP and MYSQL we will give you demo and example for implement.In this post, we will learn about Search Suggestion Functionality with PHP and MySQL with an example.

Ajax Autocomplete Live Search Suggestion using PHP MySQL

There are the Following The simple About Ajax Autocomplete Live Search Suggestion using PHP MySQL Full Information With Example and source code.

As I will cover this Post with live Working example to develop Autocomplete Textbox using jQuery, PHP and MySQL, so the Autocomplete with PHP, MySQL and Jquery UI for this example is following below.

Step 1: HTML Interface

index.html

First of all, let’s simple create HTML an index.html file for Autocomplete or Search Suggestion.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Language" content="en-us">
    <title>Autocomplete Textbox using jQuery, PHP and MySQL - Pakainfo.com</title>
    <meta charset="utf-8">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="//netsh.pp.ua/upwork-demo/1/js/typeahead.js"></script>
    <style>
        h1 {
            font-size: 20px;
            color: #f5f5f5f;
        }

        .content {
            width: 80%;
            margin: 0 auto;
            margin-top: 60px;
        }

        .tt-hint,
        .city {
            border: 2px solid #c60000;
            border-radius: 10px 10px 10px 10px;
            font-size: 24px;
            height: 45px;
            line-height: 30px;
            outline: medium none;
            padding: 10px 12px;
            width: 500px;
        }

        .tt-dropdown-menu {
            width: 500px;
            margin-top: 5px;
            padding: 10px 12px;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 10px 10px 10px 10px;
            font-size: 110px;
            color: #111;
            background-color: #3d3d3d;
        }
    </style>
    <script>
        $(document).ready(function() {

            $('input.city').typeahead({
                name: 'city',
                remote: 'get_members.php?search=%SEARCH'

            });

        })
    </script>
</head>

<body>
    <div class="Pakainfo content">

        <form>
            <h1>Please type of the City or Zip code</h1>
            <input type="text" name="city" size="30" class="city" placeholder="Please Enter Your City or Country ZIP code">
        </form>
    </div>
</body>

</html>

Step 2: Serever Side Source code

get_members.php

And then I shall create a PHP Page mysql.php file which will all the aggregate Mysql Database query to MySQL DB as well as also give outpur response as type of the JSON. Serever Side Code for Creating Autocomplete or Search Suggestion Functionality with PHP and MySQL

<?php

//CREDENTIALS FOR Database
define ('DBSERVER', 'localhost');
define ('DBUSER', 'root');
define ('DBPASS','Mypassword');
define ('DBNAME','memberlist');

$connection = mysql_connect(DBSERVER, DBUSER, DBPASS) or die("Can't connect to server.");
$result = mysql_select_db(DBNAME) or die("Can't your select database.");

//CREATE Mysql search TO Database as wel as PUT RECEIVED DATA INTO PHP ASSOCIATIVE ARRAY
if (isset($_REQUEST['search'])) {
    $search = $_REQUEST['search'];
    $sql = mysql_query ("SELECT zip, city FROM zips WHERE city LIKE '%{$search}%' OR zip LIKE '%{$search}%'");
	$membersarray = array();
    while ($datamembers = mysql_fetch_array($sql)) {
        $membersarray[] = array (
            'label' => $datamembers['city'].', '.$datamembers['zip'],
            'value' => $datamembers['city'],
        );
    }
    //RETURN JSON ARRAY
    echo json_encode ($membersarray);
}

?>

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Ajax Autocomplete Live Search Suggestion using PHP MySQL.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Autocomplete Textbox using jQuery, PHP and MySQLi 0

Autocomplete Textbox using jQuery, PHP and MySQLi

Autocomplete Textbox using jQuery, PHP and MySQLi

Today, We want to share with you Autocomplete Textbox using jQuery, PHP and MySQLi.
In this post we will show you php autocomplete textbox from database, hear for jQuery Autocomplete Tutorial with PHP and MySQLi we will give you demo and example for implement.
In this post, we will learn about jquery autocomplete multiple fields using jquery ajax php and MySQLi with an example.

Making the database connection

simple this source code copy and paste your database connection file such as db_connect.php file.

<?php
	$conn = new mysqli('localhost', 'root', 'YOUR_PASSWORD', 'YOUR_DB_NAME');
 
	if(!$conn){
		die("Error: sorry, Can't connect to database");
	}
?>

Making The Interface

this is source code for main HTML interface File name as a index.php.

<!DOCTYPE html>
<html lang="en">
	<head>
	<title>Autocomplete Textbox using jQuery, PHP and MySQLi - pakainfo.com</title>
<link rel="stylesheet" type="text/css" href="src/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="src/jquery-ui.css"/>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
	</head>
<body>
	<nav class="gst navbar navbar-default">
		<div class="container-fluid gst">
			<a class="navbar-brand" href="https://pakainfo.com">Pakainfo.com</a>
</a>		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-suceess">Autocomplete Textbox using jQuery, PHP and MySQLi</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-2"></div>
		<div class="col-md-8">
			<div class="form-group">
				<form action="" method="POST">
					<label>Find Item here...</label>
					<div class="auto-widget">
						<input class="form-control" id="find_item" type="text" name="item"/>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#find_item").autocomplete({
			source: 'find_item.php',
			minLength: 0,
		});
	});
</script>
</html>

Making the Main Function

It’s server side source code for file name as a find_item.php

<?php
	require_once 'db_connect.php';
 
	$find_item = $_GET['term'];
 
	$query = $conn->query("SELECT * FROM `item` WHERE `item` LIKE '%$find_item%' ORDER BY `item` ASC") or die(mysqli_connect_errno());
 
	$item_lst = array();
	$data_row = $query->num_rows;
 
	if($data_row > 0){
		while($fetch = $query->fetch_assoc()){
			$data['value'] = $fetch['item']; 
			array_push($item_lst, $data);
		}
	}
 
	echo json_encode($item_lst);
?>

We hope you get an idea about Autocomplete Textbox using jQuery, PHP and MySQLi
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.