mardi 3 février 2015

Display searched users' page in typeahead


I am using Bootstrap 3 with bootstrap-typeahead.js


The typeahead code works as it should. What I need is a link to the page of the user that was selected in the input search box.


The action can happen by selecting user in the search box then goes to the users' page or use a submit button after selecting user in the search box.


The link will be something like this: users/friend?id=ZsvTnt4x9u


The get id ZsvTnt4x9u equals code from the table in the database. Each users code is different.


users.php



<?php
header("Content-Type : application/json");
$db = new PDO('mysql:host=localhost;dbname=dbtest', 'testcourse', 'TAkpqvZ4Lm');
$param = "%{$_GET['q']}%";
$stmt = $db->prepare("SELECT screen_name,last_name,CONCAT(screen_name,' ', last_name) AS value,code,image FROM users WHERE CONCAT(screen_name,' ', last_name) LIKE :query ");
$stmt->bindValue(':query', $param);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
if(!empty($result)) {
echo json_encode($result);
print_r($json);
}
else{
return false;
} ?>


Here is the typeahead code:



$('#users').typeahead({
name: 'user',
template:['<div class="media br-bottom">',
'<a class="pull-left" href="#"><img class="media-object img-rounded" src="{{avatar}}"></a>',
'<div class="media-body"><h5 class="media-heading">{{screen_name}} {{last_name}}</h5>',
'<p>{{code}}<p></div></div>'
].join(''),
engine: Hogan,
remote: 'users.php?q=%QUERY'
}
});
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');
});


index.php



<input id="users" type="text" name="user" class="typeahead input-sm form-control" data-provide="typeahead" placeholder="Find people..." autocomplete="off" />




Aucun commentaire:

Enregistrer un commentaire