CODEWITHSUNDEEP
javascriptphpmysqlajaxtypeahead.js
jonboy
jonboy

Reputation: 2749

Typeahead.js Basic With MySQL DB

I am following a tutorial online (http://mycodde.blogspot.co.uk/2013/12/typeaheadjs-autocomplete-tutorial-ajax.html#comment-form) which invloves typeahead.js and a simple MySQL DB and I cannot get it to work.

Using typeahead.js v10.2 jQuery v1.9.1 and Bootstrap v3.2.0

I have included the necessary css and js files, I have also created a connection.php file, which successfully connects to my localhost db.

The problem is that the auto-suggest box doesn't auto-suggest anything. I am possibly doing something silly as I am new to js and programming.

I have included my files below if anybody would be kind enough to point me in the right direction I would appreciate it.

index.php

<!DOCTYPE>
<html lang="en">

<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<title>Typeahead.js Tutorial with Mysql Database</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.23.1" />
</head>

<body>
<input type="text" name="search" id="search"></div>       
</body>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>  
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/bloodhound.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/typeahead.bundle.min.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/typeahead.jquery.js"></script> 
<script>
$("document").ready(function(){
    $("#search").typeahead({
        name : 'sear',
        remote: {
            url : '/connection.php?query=%QUERY'
        }

    });
});
</script>

</html>

connection.php

<?php

$con=mysqli_connect("localhost","myuser","mypassword","mydb");

// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT first_name,last_name FROM actor");

while($row = $result->fetch_object()){
            $user_arr[] = $row->first_name;
            $user_arr2[] = $row->last_name;

}

mysqli_close($con);

?>

When I check the firebug console I get an Uncaught TypeError: undefined is not a function appears at line 22 which is;

$("#search").typeahead({

Can anybody lend some assistance?

Thanks

Upvotes: 2

Views: 8848

Answers (2)

Salman Sheikh
Salman Sheikh

Reputation: 91

You need to add the following code in your .js file:

    var search = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('sear'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    remote: {
        url: '/connection.php?query=%QUERY',

        filter: function(list) {
            return $.map(list, function(search) {
                return {
                    name: sear
                };
            });
        }
    }
});

The json file contains an array of strings, but the Bloodhound suggestion engine expects JavaScript objects so this converts all of those strings.

Upvotes: 1

itnelo
itnelo

Reputation: 1103

Check you jquery DOM Ready bind handler syntax here:

$("document").ready(...

It must be

$( document ).ready(...

Read more: http://learn.jquery.com/using-jquery-core/document-ready/

Upvotes: 0

Related Questions