Fetch data from database on keypress and add if not present

I am using Joomla CMS and PHP as programming language.. I have a situation wherein in I have to enter the club name in the textbox. Now if club name is present it should be displayed below and if the name is not present then on clicking save button that name should be added into database.

Just like google. If i write B, All names starting with B should come 开发者_开发技巧and if i write BA then all names starting BA should be displayed .....I guess it can be done by using only AJAX if i am not wrong but i dont know AJAX. I could not find any tutorial that can help me to get a solution.

Can anyone please help me or suggest me with their experience as how should i proceed and solved this issue of mine ???

Thanks a lot in advance

What you need is an autocomplete plugin:

• http://docs.jquery.com/Plugins/autocomplete
• http://madrobby.github.com/scriptaculous/ajax-autocompleter/

There are lots of solutions on the web:)

You can do something similar to:

HTML:

<input type="text" id="your_id" />
<div id="result"></div>

JQuery:

$('input#your_id').keypress(function() {
    var content = $(this).val();
    $.ajax({
      url: "/functions/loadClubs.php",
      global: false,
      type: "POST",
      data: ({ team : content }),
      dataType: "html",
      async:false,
      success: function(data) {
         $('div#result').html(data);
      }
   });
});

loadClubs.php

<ul>
<?
    $team = mysql_real_escape_string($_POST['team']);
    $result = mysql_query("SELECT * FROM teams WHERE teamName LIKE '%" . $team . "%'");
    while ($row = mysql_fetch_assoc($result)) {
        echo "<li>" . $row['teamName'] . "</li>"
    }
?>
</ul>