Automatically show usernames whilst still typing into the search box? - php

Question

Is there a way I can use a HTML form text box to perform an advanced search where I will be able to start typing a username of one of my members and it will list all members close to what I am still typing, something like the facebook search, but only with names (not profile pictures).
So for example, if I had a member list with contents like:
Jamie123
Jackzo
Josh
Dan
When I typed in my box, "J" all of the above apart from "Dan" would show in a drop box.
When I typed in my box, "Ja", "Dan" and "Josh" would not show... and so on?
Is this possible ? If so, How can i do this ?

Answer 1

I would look into using Select2. You can find out more here: http://ivaynberg.github.io/select2/

Answer 2

Yes...lets start by creating your text box:
<input type="text" name="DEMO_NAME" id="DEMO_NAME" alt="Possible Results" onKeyUp="searchSuggest();" autocomplete="off">
You will need a div sto show your results while the user is typing (place it under the textbox via css):
<div id="search_suggest"></div>
On the top of the html page you will have to include (apart from jquery) a .js file which will handle the request:
<script language="JavaScript" type="text/javascript" src="ajax_search.js" charset="utf-8"></script>
aja_search.js code is:
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Please update your Browser");
}
}
//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();
//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
var str = encodeURI(document.getElementById('DEMO_NAME').value);
searchReq.open("GET", 'search.php?search=' + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
}
//Called when the AJAX response is returned.
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
var ss = document.getElementById('search_suggest')
ss.innerHTML = '';
if(document.getElementById('DEMO_NAME').value.length > 2)
{
var str = searchReq.responseText.split("\n");
for(i=0; i < str.length - 1; i++) {
//Build our element string. This is cleaner using the DOM, but
//IE doesn't support dynamically added attributes.
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
suggest += 'class="suggest_link">' + str[i] + '</div>';
ss.innerHTML += suggest;
}
}
else
{
ss.innerHTML = 'Please insert at least 3 characters';
}
}
}
//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
document.getElementById('DEMO_NAME').value = value;
document.getElementById('search_suggest').innerHTML = '';
}
as you can see from the js above, user must input at least 3 characters in order to fire up the search. I strongly advise you to keep it.
last but not least you need the search.php file which is called by ajax in order to fetch results:
$search = $_GET["search"];
if(!empty($search))
{
$query = mysql_query("SELECT * FROM your_table WHERE username like('%" . simple_protect($search) . "%') ORDER BY username") or die (mysql_error());
while ($row = mysql_fetch_assoc($query))
{ //echo $query;
echo strip_all($row['username'])."\n";
}
}
else
{
echo "No Records available";
}
simple_protect and strip_all are functions of mine, the first one sanitizes the input while the second removes slashes etc. You can use your own.
finally you will need the css that shows results correctl, mine looks like this:
.suggest_link {
background-color: #333333;
padding:2px 4px 4px 2px;
color:#858585; font-family:Verdana; font-size:11px; color:#ffffff;
}
.suggest_link_over {
background-color: #666666;
padding:2px 4px 4px 2px;
color:#858585; font-family:Verdana; font-size:11px; color:#ffffff;
}
#search_suggest {
background-color: #333333;
text-align: left;
z-index:20;
width:240px; height: inherit;
border:hidden;
color:#ffffff; font-family:Verdana; font-size:11px; cursor: pointer;
}
and voila! you have your advanced search...

Answer 3

You have to use javascript for this, i recommend JQuery. You can do this with a built in function in JQuery called ajax, with it you can send a POST request to the server without refreshing the page. And then use php to fetch the data.
I recommend going to youtube and look at some tutorials if you ar new to javascript, look for JQuery tutorials.