Tag and search system with autofill

I have been looking for a tag and a search system that can be easy to edit and needs to be with an autofill system at typing.

It needs to get the info from a database example: Type "Sh"

In the database gets the following info.

Sharks 2         / 2004 / Drama / Dreamworks
Sherlock Holmes  / 2009 / Drama / UnitedFilms
Sherlock Holmes  / 2012 / Drama /United Films

and it shows it as a list at the moment and with a link.

Also I need a tag system that when I type a letter shows me the users and get the id from that user in a variable.

I cannot do it I am not very good at js and I cannot found a tutorial because I dont like the scipt only I want to understand it.

Ok my idea its making a call from mysql to the database and show a for loop, and i know how to do it with the variable and everithing but i cannot make the code for each time a letter is typed make again the search by mysql all i have in mind is this i dont know if i have the right idea.

<?php
   $var_search = $typed;
   $query = mysql_query("SELECT * FROM movies WHERE name = '%$typed%");
   $rows = mysql_num_rows($query);
    for($i=0, $i = $rows, $++){
      echo "here show the list"
     }

?>

but how can i make that each time a letter it typed i can remake the query.

And sorry for my english, not my first language.

Thanks!!

Solution

Right, Antonio Laguna is right, but from what I can tell what you need to use is ajax:

http://api.jquery.com/jQuery.ajax/

You'll have to create a textbox and use the onkeyup event to launch an ajax request, every time the user types a key, to display a php file with the given output from the database (in this file would be the code you had in your question above).

This would look something like this:

index.html:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        function typing(search){
        $.ajax({
          url: 'get_db.php?q='+search,
          success: function(data) {
            $('#result').html(data);
          }
        });

        }
    </script>
</head>
<body>
    <input type="textbox" onkeyup="javascript: typing(this.value);">
    <div id="results" style="width: 200px; height: 300px;">

    </div>
</body>
</html>

get_db.php:

<html>
<head>

</head>
<body>
<ul>
    <?php
       $typed = $_GET["q"];
       $typed = trim($typed);
       $query="select * from movies where name = '%typed%'";  
        $rt=mysql_query($query);
        echo mysql_error();  
        while($nt=mysql_fetch_array($rt)){
    ?>
        <li>
            <a href="<?php echo "$nt[link]"; ?>"><?php echo "$nt[name]"; ?></a> 
        </li> 
    <?php 
        }
    ?>

    ?>
</ul>
</body>
</html>