Ok so Iv’e recently been trying to use twitter typeahead along with bootstrap tagsinput which is found here http://timschlechter.github.io/bootstrap-tagsinput/examples/
I wan’t it to send a query to my database and display username’s as I type the input tags which I know is possible because it says so on the tagsinput page linked above. Although I have tried countless way’s of doing it using bloodhound and it just doesn’t seem to be working.
Below is my HTMLJavascript
<form id="msgForm" action="process2.php" method="POST" name="msgForm" class="form-horizontal" role="form">
<div id="remote" class="input-group" style="padding-bottom:10px;">
<span class="input-group-addon"><span class="glyphicon glyphicon-user" style="font-size: 15px;"></span></span>
<input type="text" class="form-control" name="msgUser" id="msgUser" placeholder="Users Seperated by ," data-role="tagsinput" />
</div>
<script>
var bestPictures = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
null,
remote: {
url: 'search.php?query=%QUERY',
wildcard: '%QUERY'
}
});
$('#remote .input').typeahead(null, {
name: 'best-pictures',
display: 'value',
source: bestPictures
});
</script>
<i><div style="padding-bottom:7;"id="title_message"></div></i>
<div class="input-group" style="padding-bottom:10px;">
<span class="input-group-addon"><span class="glyphicon glyphicon-cog"></span></span>
<input type="text" maxlength="30" class="form-control input-md" autocomplete="off" name="msgTitle" id="msgTitle" placeholder="Message Title"/><br />
</div>
<i><div style="padding-bottom:7;"id="main_message"></div></i>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<textarea class="form-control" maxlength="500" rows="5" name="main" id="main" placeholder="Your message..."></textarea>
</div>
<button type="submit" class="form-control input-md" style="margin-top:20;" name="btnmsg" id="btnmsg">Send Message</button>
</form>
And Here is the php code from search.php:
<?php
include("functions.php");
$param = "{$_GET['query']}%";
// do query
if ($stmt = $con->prepare("SELECT username FROM users WHERE username LIKE ?")) {
$stmt->bind_param("s", $param);
$stmt->execute();
}
// populate results
$results = array();
$result = $stmt->get_result();
while ($row = $result->fetch_array(MYSQLI_NUM)) {
foreach ($row as $r) {
$results[] = $r;
}
}
// and return to typeahead
return json_encode($results);
?>
2
Answers
https://github.com/bassjobsen/Bootstrap-3-Typeahead
Apparently the official one from twitter no longer works with bootstrap 3. So I got a new .js file from here and it seems to work with the following code.
But I am still failing to get it to work with my search.php?query file so any further help will be appreciated!
In your code you have
$('#remote .input').typeahead(
in the JS. However the input in the div with id remote, has no class input. so it should be$('#msgUser').typeahead(
Edit:
This is a piece of my typeahead with a remote ajax call. It has a custom template for the search result so you can skip that part
Just check if you can do something with this piece of code to make it work for you.