php, Jquery autocomplete multiple values, remote!

Question

am new to jquery! I'm using jquery ui autocomplete in my application where the auto complete values comes from database. Here are codes that am using but nothing happens

search.php

<?php

    $conn = mysql_connect("localhost", "root", "");
    mysql_select_db("webforum", $conn);

    $q = strtolower($_GET["term"]);

    $query = mysql_query("select name from groups where name like %$q%");
    while ($row = mysql_fetch_array($query)) {
        echo json_encode($row);
    }
    ?>

Here is test.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta  charset="utf-8">
    <title> jQuery UI Autocomplete - Multiple, remote </title>
    <link rel="stylesheet" href="theme/jquery.ui.all.css">
        <script type="text/javascript" src="jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.position.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.autocomplete.js"></script>
        <style type="text/css">
    .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
    </style>
        <script type="text/javascript">
    $(function() {
        function split( val ) {
            return val.split( /,\s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }

        $( "#birds" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).data( "autocomplete" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                source: function( request, response ) {
                    $.getJSON( "http://localhost/webforum/search.php", {
                        term: extractLast( request.term )
                    }, response );
                },
                search: function() {
                    // custom minLength
                    var term = extractLast( this.value );
                    if ( term.length < 2 ) {
                        return false;
                    }
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( ", " );
                    return false;
                }
            });
    });
    </script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds" size="50" />
</div>

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

Can anyone help me with this? Thanx in Advance!

Community · Accepted Answer · 2017-05-23 12:04:24Z

1

How does your json looks like? in order to work wit jquery-ui autocomplete you need to have at least label and value properties:

{
   'label' : 'your_label',
   'value' : 'your_value'
}

in your js code you are asking for value property which doesn't seem to bes set on your json produced by php.

here is a similar question: Having problems with jQuery UI Autocomplete

so php has to build the results in the right way:

    $conn = mysql_connect("localhost", "root", "");
    mysql_select_db("webforum", $conn);

    $q = strtolower($_GET["term"]);

   $return = array();

    $query = mysql_query("select name from groups where name like %$q%");
    while ($row = mysql_fetch_array($query))
    {
        //since we have just 1 value from the db just use it as both value and label
        array_push($return,array('label'=>$row['name'],'value'=>$row['name']));
    }

   echo(json_encode($return));

P.S. it is not that safe make queries with $_GET[] parameters.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Feb 20, 2011 at 0:08

Dalen

9,0264 gold badges49 silver badges53 bronze badges

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

2 Comments

Sam Samson Over a year ago

thanx for your help, it worked fine. Is there a way of displaying the name in the suggestion and the text field and being able to capture the id of that group

Dalen Over a year ago

you have to select it on the query and the pass it to the json object as value property. If the answer worked you should accept it.

Community · Accepted Answer · 2020-06-20 09:12:55Z

Taken from jQuery autocomplete docs.

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above.

Assuming the above; adjust your code to the following:

<?php

$conn = mysql_connect("localhost", "root", "");
mysql_select_db("webforum", $conn);

$q = strtolower($_GET["term"]);

$query = mysql_query("select name from groups where name like %$q%");
$results = array();
while ($row = mysql_fetch_array($query)) {
    array_push($results, $row);
}
echo json_encode($results);

?>

Collectives™ on Stack Overflow

php, Jquery autocomplete multiple values, remote!

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related