javascript - how to connect jquery ui auto-complete widget with database?

Solution:

You can't include your php in javascript. So you need to create a php script for autocomplete. In this script, its better using an array to store your results then convert it to json using "json_encode".

autocomplete.php :

<?php
include('lib.php');

if(true === isset($_GET['term']) && false === empty($_GET['term']))
{
    $text = $mysqli->real_escape_string($_GET['term']);
    $query = "SELECT * FROM user WHERE area LIKE (:keyword) ORDER BY id ASC 
    LIMIT 0, 10";
    $result = $mysqli->query($query);

    $json = array();
    $first = true;
    while($row = $result->fetch_assoc()) 
    {
        $json[] = $row['area'];
    }
    header('Content-Type: application/json');
    echo json_encode($json);
}
?>
Copy code

For the javascript, use ajax to retrieve your results

$('#term2').autocomplete({    
        minChars:2,
        noCache: false, //default is false, set to true to disable caching    
        // callback functions:
        source: function( request, response ) {
            $.ajax({
                url: "autocomplete.php", //Correspond to PHP page
                dataType: "json",
                data: {term: request.term},
                success: function(data) {
                            return data;
                }
            });
        }
    });
Copy code

Solution:

You were using a string as input but you do need an array as autocomplete source.

If you don't want to code an ajax request, and if your js is generated on the fly by php, you can replace your code by this one:

$(function(){
   var test=["red","blue","pink","Black" ,"Grey"];  
   $("#term2").autocomplete({
    source:<?php include upload_where.php; ?>
    });
 });
Copy code

However it's not a good idea to use php to generate your js. So you can use ThinkTank answer's