Help need to crate autocomplete input box with database

i need a autocomplete input box to read data from database with the submit button to get the field data form database. That means i have some product name and details in my database table , so if the user start typing any word it will show the products which are starting from the letter , then user hit the submit button to get the product description,details and the price.

Please need some one to help me . bcs i am new in php my sql

Thank you friends

Before posting, please do a search. There is a lot of information out there about this and most if it is based on database methods.

http://www.google.com/search?q=autocomplete+form

Please read my request before you replay, i found already the same auto complete forms in my first research. but those are didn't help me to figure out my problem. and i have mentioned that i am a beginner in php my sql. thats why i search for a help and i need to get the field data result when i select a value from the autocomplete field not only a auto complete form


thank you

You didn't say anything about having already looked up a tutorial. If you want help, please give us all of the information about what you are doing so that we can help you best-- we can't guess what you might have tried.

Still, I think you need to look for a tutorial. You're asking very general questions. If you have a specific question we can try to help, but what you're asking right now is just generally how auto-complete works.

Since you also want to show some extra information, then all you'll need to do is adjust the script so that it retrieves a few values (using Ajax, probably) and displays that information on the page.

Using one of the many auto-complete tutorials and learning about Ajax (potentially through more tutorials or examples) is all you'll need, I think.

But if you do have a specific question, you're welcome to ask it. Without that, though, all we can do is suggest general ideas, and at the moment that is to find some tutorials. Also, if you ask a specific question, please give us some additional information, especially a sample of the code you're using or a link to the tutorial you're following.

Thank you for your reply ,

here is my tutorial which i am following, please consider me and help me to find out the solution.


--
-- Table structure for table `product `
--

CREATE TABLE `product` (
`id` tinyint(4) NOT NULL AUTO_INCREMENT,
`productname` varchar(50) DEFAULT NULL,
`description` varchar(50) DEFAULT NULL,
`price` varchar(30) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

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

INSERT INTO `product ` VALUES(1, 'Solenoid switch', 'Sutable for 60,80 & 140 HP.', '$200');
INSERT INTO `product ` VALUES(2, 'Bearing', '93310-730V8', '$50');
INSERT INTO `product ` VALUES(3, 'Connecting Rod', '688-45631-01', '$60');



here is my rpc.php

PHP Code:

---


<?php
    
    // PHP5 Implementation - uses MySQLi.
    // mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
    $db = new mysqli('localhost', '' ,'', 'test');
    
    if(!$db) {
        // Show error if we cannot connect.
        echo 'ERROR: Could not connect to the database.';
    } else {
        // Is there a posted query string?
        if(isset($_POST['queryString'])) {
            $queryString = $db->real_escape_string($_POST['queryString']);
            
            // Is the string length greater than 0?
            
            if(strlen($queryString) >0) {
                // Run the query: We use LIKE '$queryString%'
                // The percentage sign is a wild-card, in my example of countries it works like this...
                // $queryString = 'Uni';
                // Returned data = 'United States, United Kindom';
                
                // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.
                // eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10
                
                $query = $db->query("SELECT productname FROM product WHERE productname LIKE '$queryString%' LIMIT 10");
                if($query) {
                    // While there are results loop through them - fetching an Object (i like PHP5 btw!).
                    while ($result = $query ->fetch_object()) {
                        // Format the results, im using <li> for the list, you can change it.
                        // The onClick function fills the textbox with the result.
                        
                        // YOU MUST CHANGE: $result->value to $result->your_colum
                         echo '<li onClick="fill(\''.$result->productname.'\');">'.$result->productname.'</li>';
                     }
                } else {
                    echo 'ERROR: There was a problem with the query.';
                }
            } else {
                // Dont do anything.
            } // There is a queryString.
        } else {
            echo 'There should be no direct access to this script!';
        }
    }
?>

---

index.html

Code:

---



<!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>Ajax Auto Suggest</title>

<script type="text/javascript" src="http://www.f-creat.com/jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
        function lookup(inputString) {
                if(inputString.length == 0) {
                        // Hide the suggestion box.
                        $('#suggestions').hide();
                } else {
                        $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
                                if(data.length >0) {
                                        $('#suggestions').show();
                                        $('#autoSuggestionsList').html(data);
                                }
                        });
                }
        } // lookup
       
        function fill(thisValue) {
                $('#inputString').val(thisValue);
                setTimeout("$('#suggestions').hide();", 200);
        }
</script>

<style type="text/css">
        body {
                font-family: Helvetica;
                font-size: 11px;
                color: #000;
        }
       
        h3 {
                margin: 0px;
                padding: 0px;       
        }

        .suggestionsBox {
                position: relative;
                left: 0px;
                margin: 0px 0px 0px 0px;
                width: 200px;
                border: 1px solid #666666;       
                color: #000;
                background-color:#ccc;
        }
       
        .suggestionList {
                margin: 0px;
                padding: 0px;
        }
       
        .suggestionList li {
               
                margin: 0px 0px 3px 0px;
                padding: 3px;
                cursor: pointer;
        }
       
        .suggestionList li:hover {
                background-color: #659CD8;
        }
#apDiv1 {
        position:absolute;
        left:13px;
        top:101px;
        width:414px;
        height:60px;
        z-index:1;
        border: 1px solid #333;
        padding: 10px;
}
</style>

</head>

<body>


        <div id="apDiv1">Result Div</div>
        <div>
<form>
                        <div>
                                Search your product
                                <br />
                                <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" /><input name="submit" type="button" value="Submit" />
                        </div>
                       
                        <div class="suggestionsBox" id="suggestions" style="display: none;">
                               
                                <div class="suggestionList" id="autoSuggestionsList">
                                        &nbsp;
                                </div>
                        </div>
                </form>
        </div>

</body>
</html>

---

Please go through this then you can see the input text box and the submit button. i need to get the description and the price in the result div when user select any product then submit, from the autocomplete input box.

i hope you can help me with this...

thank you