CODEWITHSUNDEEP
phpautocompletebootstrap-typeaheadtypeaheadtypeahead.js
Ravindr
Ravindr

Reputation: 196

Typeahead Database method not working

here i try typeahead. its working in JavaScript . if i connect db its not working . pls find out what is wrong. there is any alternate method available to do this

<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div style="margin: 50px 50px">
<label for="product_search">Product Search: </label>
<input id="product_search" type="text" data-provide="typeahead">
<label for="product_search">Name Search: </label>
<input id="namesearch" type="text" data-provide="typeahead">
<label for="product_search">Test Search: </label>
<input id="search" name="search" type="text" data-provide="typeahead">
</div>

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap-typeahead.js"></script>

<script>
$(document).ready(function($) {
// Workaround for bug in mouse item selection
$.fn.typeahead.Constructor.prototype.blur = function() {
var that = this;
setTimeout(function () { that.hide() }, 250);
};

$('#product_search').typeahead({
source: function(query, process) {
return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"];
}
});

$('#search').typeahead({
    name: 'search',
    remote: '/search.php?query=%QUERY'
});

$('#namesearch').typeahead({
source: function(query, process) {
return ["Ravindran", "Aravinthan", "Dakshesh"];
}
});


})
</script>

</body>
</html>

and my db search.php in the root folder

<?php
$link = mysql_connect('localhost', 'root', '');
if (!$link) 
{
    die('Could not connect: ' . mysql_error());
}
if (!mysql_select_db('test')) 
{
    exit;
}

$text = mysql_real_escape_string($_GET['query']);

$sql = 'SELECT id,title FROM games WHERE name LIKE "%'. $text . '%" LIMIT 5';

$result = mysql_query($sql);

while ($row = mysql_fetch_assoc($result)) 
{
    $posts[] = array($row['id'] => $row['name']);
}
echo json_encode($posts);
mysql_close($link);
?>

Upvotes: 1

Views: 717

Answers (1)

Hieu Nguyen
Hieu Nguyen

Reputation: 8623

You are mixing code syntax of 2 different versions of typeahead.

This one is for Bootstrap-Typeahead, which is part of Twitter Bootstrap project:

$('#product_search').typeahead({
    source: function(query, process) {
        return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"];
    }
});

And it is working since you've included the file bootstrap-typeahead.js in your code.

The other one is coded for typeahead.js, which also came from Twitter, but as an independent project:

$('#search').typeahead({
    name: 'search',
    remote: '/search.php?query=%QUERY'
});

And of course it isn't working since you don't include it in your project.

So choose one of them and migrate your code to only that version. Personally I would recommend using typeahead.js.

EDIT:

Since you are so experienced with this, I'm gonna help you a bit further.

First, you should include typeahead.js in your code and remove reference to bootstrap-typeahead.js.

Next, in your JS section, modify the code to use typeahead.js syntax:

$(document).ready(function($) {

    $('#product_search').typeahead({
        name: 'products',
        local: ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]
    });

    $('#namesearch').typeahead({
        name: 'name',
        local: ["Ravindran", "Aravinthan", "Dakshesh"]
    });

    $('#search').typeahead({
        name: 'search',
        remote: '/search.php?query=%QUERY'
    });

});

Your PHP code looks quite good but I wanna add:

$posts = array();

right before the while loop.

Otherwise I think you will be fine, and the rest will be your challenge (if there is any). Remember that the console is your friend.

Hope it helps.

Upvotes: 2

Related Questions