jQuery Autocomplete Input Box

Question

So I created an auto complete box using jQuery and PHP to pull the content from the database, and it's working fine, except when I go to type in the input box it pulls back all the results, instead of the results similar to what I'm typing.

So if you type Test it pulls back:

This
is
a
Test

Instead of displaying

Test

Here is my HTML

<input type="text" id="group_name" name="group_name">

Here is the jQuery I'm using

<script>
     $(document).ready(function() {
        $( "#group_name" ).autocomplete({
              source: "/wuzhapnn/php/data_stream/group_names",
              select: function(event, ui) { 
              $("#f").submit(); }
        });
    });
</script>

Here is my php page

if ($_GET['run'] == 'group_names') {
    // pulls live data from database
    $db = db_open();
    $query = "SELECT group_name FROM groups";
    $result = db_query($db, $query);
    if (db_num_rows($result) > 1) {
        $result = db_fetch_all($result);
        foreach ($result as $key=>$value) {
            $group_names_array[] .= $value['group_name'];
        }   
    } else {

    }

    echo json_encode(array_values(array_unique($group_names_array)));  
}

• Recent Updates

New jQuery

<script>
    var availableName;

    $.getJson('/wuzhapnn/php/data_stream',function(response){
        availableName = response;
    });

     $(document).ready(function() {
        $( "#group_name" ).autocomplete({
            source: availableName,
              select: function(event, ui) { 
              $("#f").submit(); }
        });
    });
</script>

New PHP Page

if ($_GET['run'] == 'group_names') {
    // pulls live data from database
    $db = db_open();
    $query = "SELECT group_name FROM groups WHERE group_name LIKE '%".$_GET['term']."%'";
    $result = db_query($db, $query);
    if (db_num_rows($result) > 1) {
        $result = db_fetch_all($result);
        foreach ($result as $key=>$value) {
            $group_names_array[] .= $value['group_name'];
        }   
    } else {

    }

    echo json_encode(array_values(array_unique($group_names_array)));  
}

Answer 1

You need to add LIKE clause.

"SELECT group_name FROM groups WHERE group_name LIKE '%".$_GET['term']."%'";

because "SELECT group_name FROM groups" this will give all the result from database but you need only those who match with typed words so use LIKE MySQL clause.

Other Person Comment Response.

if you want to create json object before use it you can do it as below,

var availableName;

$.getJson('/wuzhapnn/php/data_stream/group_names',function(response){
   availableName = response;
});

after this just use below code for autoComplete.

$( "#group_name" ).autocomplete({
     source: availableName ,

Answer 2

Your PHP snippet doesn't actually use the value sent by the autocomplete plugin. If you are using JQuery's plugin then the value send is a GET parameter called terms.

This needs to be included in your PHP.

$term = $_GET['term'];

You then need to include that in your query something like the following, but first please escape this value before using it directly in an SQL statement.

SELECT group_name FROM groups WHERE group_name LIKE %<term>%