Auto complete text box with PHP, jQuery and MySql


Auto complete text box with PHP, jQuery and MySql
In this tutorial I want to show you how easy to do a auto complete text box with PHP, jQuery and MySql.

Creating database table


We need to create a table in our database before writing our script. I also add some data for this table. Import following SQL statement via phpMyAdmin or any other MySQL tool.

CREATE TABLE `tag` (
  `id` int(20) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

INSERT INTO `tag` (`id`, `name`) VALUES
(1, 'php'),
(2, 'php frameword'),
(3, 'php tutorial'),
(4, 'jquery'),
(5, 'ajax'),
(6, 'mysql'),
(7, 'wordpress'),
(8, 'wordpress theme'),
(9, 'xml');

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Complete Input box</title>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script>
 $(document).ready(function(){
  $("#tag").autocomplete("autocomplete.php", {
        selectFirst: true
  });
 });
</script>
</head>
<body>
<label>Tag:</label>
<input name="tag" type="text" id="tag" size="20"/>
</body>
</html>

autocomplete.php

This file is called from our jquery script. This php script is easy to follow.
<?php
 $q=$_GET['q'];
 $my_data=mysql_real_escape_string($q);
 $mysqli=mysqli_connect('localhost','username','password','databasename') or die("Database Error");
 $sql="SELECT name FROM tag WHERE name LIKE '%$my_data%' ORDER BY name";
 $result = mysqli_query($mysqli,$sql) or die(mysqli_error());

 if($result)
 {
  while($row=mysqli_fetch_array($result))
  {
   echo $row['name']."\n";
  }
 }
?>
We have done. Run your project and type in your text box you will see following screenshot. 


Comments

  1. سمارت تكنولوجي1 January 2015 at 10:43

    please attach these files
    jquery.autocomplete.css
    jquery.js
    jquery.autocomplete.js

    ReplyDelete

Post a Comment

Popular posts from this blog

How To Convert JSON Data Into Html Table Using Javascript jQuery

Image
In this tutorial i am going to explain about how to display the json data into html table using javascript & jquery. For explaining how we convert the json data into html table using javascript & jquery we have created a json file that contains the below json data. Json File [ {"Model" : "Iphone 18", "Name" : "iOS", "Share" : 57.56,"Price Range":"$800 - $1000","Brand":"Apple"},  {"Model" : "Nexus 23", "Name" : "Android", "Share" : 24.66,"Price Range":"$600 - $800","Brand":"Samsung"},  {"Model" : "Tom-tom", "Name" : "Java ME", "Share" : 10.72,"Price Range":"$200 - $900","Brand":"X Brand"}, {"Model" : "Nokia 66610", "Name" : "Symbian", ...
Read more

Read and write json file with php and mysql

Image
JavaScript Object Notation or JSON is a lightweight data-interchange format which is very easy to read and write, we use JSON to transfer data from server to web-application or vice versa as an alternative to XML. In this post I will be showing you how to read and write JSON file with php and mysql. What is json? How does it looks?  JSON is nothing but a data format similar like arrays. It comes in key value pair e.g. {Name:Rahul, Age:22}. JSON is a human-readable text format that is completely language independent but uses conventions of programming language like C, C++, JavaScript. See how JSON data looks like. [ { "player_name": "Sachin Tendulkar", "country": "India", "sports": "Cricket" }, { "player_name": "Roger Federer", "country": "Switzerland", "sports": "...
Read more

convert Json data to Php Array

How To convert Json data to Php Array json_decode ( ) - Decode JSON Formatted Data The json_decode() PHP function converts JSON data to PHP array data. Parameters data The json data that you want to decode in PHP. dataTypeBoolean Optional boolean that makes the function return a PHP Associative Array if set to "true", or return a PHP stdClass object if you omit this parameter or set it to "false". Both data types can be accessed like an array and use array based PHP loops for parsing. depth Optional recursion limit. Use an integer as the value for this parameter. options Optional JSON_BIGINT_AS_STRING parameter. A very simple example: <?php $jsonData = '{ "user":"John", "age":22, "country":"United States" }'; $phpArray = json_decode($jsonData); print_r($phpArray); foreach ($phpArray as $key => $value) {     echo "<p>$key | $value</p>"; } ...
Read more