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)));  
}

Dipesh Parmar · Accepted Answer · 2013-03-26 06:25:06Z

2

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 ,

edited Mar 26, 2013 at 6:25

answered Mar 26, 2013 at 6:03

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Jeemusu Over a year ago

I think you misunderstood the functionality. He is returning all the group_names as a json object, which will be used by the autocomplete jquery ui to find a match.

Jeemusu Over a year ago

Yes, and that page is a json object of all group_names, which is what it should be.

user1661548 Over a year ago

I did find a script on here that seems to be doing it for others, but I can't seem to figure out how to set the global $_GET['term'] with json. stackoverflow.com/a/5529356/1661548

Dipesh Parmar Over a year ago

@ChristianRankin if jeemusu is right then you need to create json object before and call it inplace of url that you have in source

user1661548 Over a year ago

I could send over the value of the input box live to my data_stream.php in the url?

|

samjm · Accepted Answer · 2013-03-26 06:12:36Z

1

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>%

answered Mar 26, 2013 at 6:12

samjm

514 bronze badges

3 Comments

user1661548 Over a year ago

I have a function setup to escape strings, lol. I'm not that much of a n00b! :)

user1661548 Over a year ago

So if jQuery already uses this value, it's being set without me having to do anything?

samjm Over a year ago

Ok, great on the escaping. Yes the value is already being sent to your PHP script. If you view the Remote Datasource example at jqueryui.com/autocomplete/#remote search "spar" and watch the network traffic using Firebug or Developer Tools, you will see that the term parameter is automatically sent through.

user1661548 · Accepted Answer · 2013-03-26 06:48:52Z

0

Got it working right

New jQuery

<script>
    $(function() {       
        $( "#group_name" ).autocomplete({
          source: "/wuzhapnn/php/data_stream",
          minLength: 2,
        });
      });
</script>

New PHP (thanks to Dipesh Parmar)

// 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);

    $result = db_fetch_all($result);
    foreach ($result as $key=>$value) {
        $group_names_array[] .= $value['group_name'];
    }   


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

answered Mar 26, 2013 at 6:48

user1661548

Collectives™ on Stack Overflow

jQuery Autocomplete Input Box

3 Answers 3

11 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related