Home/ Questions/Q 8159151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T17:49:17+00:00

Here I am trying to implement the jQuery I have two main files one

  • 0

Here I am trying to implement the jQuery I have two main files one is db.php which hold this thing:

<?php

$connection = mysql_connect("localhost","root","");
$db = mysql_select_db("auto",$connection);

$sql = "SELECT * FROM data";

$result = mysql_query($sql,$connection);
//$arr = array();
while($row = mysql_fetch_array($result)){

echo $row['name']."\n";
}
//echo json_encode($arr);

mysql_close($connection);
?>

Then I have another file named as index.html in which I am calling jQuery functions:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css">
<link rel="stylesheet" type="text/css" href="css/autocomplete.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script>

$(document).ready(function(){
    $("#example").autocomplete("db.php");
  });

</script>
</head>

<body>

Auto:<input id="example" type="text">

</body>
</html>

but I am unable to run any code can you tell me why? I am newbie to jQuery so apology for mistakes.

P.S: I tried with json encode function because I search and find out it may be reason of Json data (which I was assigning to $arr then echoing the jsonencode) but still its not working.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok Here is what i come up with the solution I am posting this in answer so that if any other person have problems using this can understand the basic without running around and messing head like me you can take this as a Short Simple Tutorial for Using a Jquery UI Autocomplete:

    First Make a Database Name auto in your mysql Server and Put this Dump Query in SQL or create a file named auto.sql and put all following content in that file and import it from phpmyadmin by going inside that database you just created i.e “auto”:

    -- phpMyAdmin SQL Dump
-- version 3.5.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Jun 27, 2012 at 06:35 PM
-- Server version: 5.5.24-log
-- PHP Version: 5.3.13

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `auto`
--

-- --------------------------------------------------------

--
-- Table structure for table `data`
--

CREATE TABLE IF NOT EXISTS `data` (
  `name` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `data`
--

INSERT INTO `data` (`name`) VALUES
('fahim'),
('asim'),
('yasir'),
('jalil'),
('birdy'),
('gudu'),
('zalim'),
('papu'),
('ozair'),
('saima');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

    Now make a Folder in your XAMPP or WAMP or any web server your using as auto and make following files and put their Contents in respective order:

    First File is db.php:

     <?php

    $connection = mysql_connect("localhost","root",""); 
//make sure you change the hostname, username and password according to your setting
    $db = mysql_select_db("auto",$connection);

    $sql = "SELECT * FROM data";

    $result = mysql_query($sql,$connection);
    $arr = array();
    while($row = mysql_fetch_array($result)){

    $arr[] = $row['name']."\n";
    }
    echo json_encode($arr);

    mysql_close($connection);


    ?>

    Make another File with name index.php and put following content:

    <html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css" type="text/css" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script>

$(document).ready(function() {
        $( "#AC" ).autocomplete({
            source: "db.php"
        });
    });

</script>
</head>

<body>

 <form>
     Text Box: <input id="AC" type="text" />
    </form>
</body>
</html>

    Another thing Notice i am using Online Google API to retrieve the Script Libraries and CSS file so make sure before testing this code you are connected to internet.

    Try to Run the Code it will Run Like a Charm :)….Its pretty simple for a newbie as well thats why i didn’t explained it…just a simple term i am getting data from database and make all that data echo in jason format because Jquery UI Auto complete require by default the Jason data!!

    Hope it helps 🙂

    Another thing i noticed that in firebug that whenever i type something This Autocomplete sends a Ajax request to the Db page from where i am getting the result and in that request it sends a variable name term so if i get that variable in the db.php file i can also use that into my SQL to retrieve Specific String because in above method it will show all the records retrieved from database so if i want to get only Specific terms like for example i put a word “fa” in the text box in the index.html file i want it retrieve only those name from the database which hold the string “fa” for that i can use that $_GET['term'] variable and put it in the SQL statement there i can use SQL LIKE operator to find a certain pattern i will update the db.php file as below:

    <?php

    $connection = mysql_connect("localhost","root",""); 
//make sure you change the hostname, username and password according to your setting
    $db = mysql_select_db("auto",$connection);

    $sql = "SELECT * FROM data WHERE name LIKE '%".$_GET['term']."%'";

    $result = mysql_query($sql,$connection);

    //print_r ($result);

    $arr = array();
    while($row = mysql_fetch_array($result)){

    $arr[] = $row['name']."\n";
    }
    echo json_encode($arr);

    mysql_close($connection);


    ?>

    Now what i am doing i am saying to SQL get me the names which have the patter of string that $_GET['term'] is retrieving :)….!! T*his is simple Right* ??

    If you want to know more about LIKE operator Check This Link http://www.w3schools.com/sql/sql_like.asp

    • 0