I didn’t quite know how I could easily describe my question in the title, in a way you guys would immedialty understand my question, so ill try to be a bit more specific below.
Recently i downloaded a jquery autosuggest system with which I can search for persons by typing in their first name, last name and/or town. For testing purpose i created 1 ‘fake’ person. I gave my own touch to the autosuggest system but I can’t seem to fix the following problem because i am lacking the jquery skills:
When I search for a person in the search bar, for example Elvis Presley from Nashville, I type in Elvis. As soon I start to type in the E it gives me the autosuggestion Elvis from Nashville, with also the other fields that belong to this person (town and last name) and with a profile picture of the person to the left - so a facebook like autosuggest (table media in the database). Though, what it doesn’t do, if I type in Elvis SPACE Presley or Elvis SPACE Nashville (so 2 different database fields: first name and last name) it gives no results. The reason it wont work is cinda clear to me, at least i think it is, the Jquery widget only searches for 1 word - ‘the searchword’ (1 database field). Elvis Presley has the following columns in the database: Firstname, Lastname and City, so 3 database columns. As soon as I type in the database field: firstname (Elvis) followed by a space (which isnt linked to a database field) and the second database field: lastname (Presley), or the search value ‘city’ (another database field) it will give 0 results.
I tried a couple of things and messed around a but but I really don’t have a clue how I could fix this problem in my current widget. I also searched for multiple solutions but couldn’t find what I was looking for…
So my question is: How can i ‘edit’ my autosuggest system so i can type in 3 different databse values in my search bar (for example city, first and last name) which would return the right suggestion (THAT persons that lives in THAT city). The reason i want to make it work with multiple database input fields is because the simple fact that when the databse is growing the person who want to find someone will want to put ins pecific persons information so he is sure he will find the right persons (for example there could be 100 people with the name Elvis).
The code of the widget is as follows:
The fsearch.jss document:
(function($){
$.fn.fsearch = function(){
var $searchInput = $(this);
$searchInput.after('<div id="divResult"></div>');
$resultDiv = $('#divResult');
$searchInput.focus();
$searchInput.addClass('searchi');
$resultDiv.html("<ul></ul><div id='search-footer' class='searchf'></div>");
$searchInput.keyup(function(e) {
var q=$(this).val();
if(q != '')
{
var current_index = $('.selected').index(),
$options = $resultDiv.find('.option'),
items_total = $options.length;
// When Down Arrow key is pressed
if (e.keyCode == 40) {
if (current_index + 1 < items_total) {
current_index++;
change_selection($options,current_index);
}
}
// When Up Arrow is pressed
else if (e.keyCode == 38) {
if (current_index > 0) {
current_index--;
change_selection($options,current_index);
}
}
// When enter key is pressed
else if(e.keyCode == 13){
var id = $resultDiv.find('ul li.selected').attr('id');
var name = $resultDiv.find('ul li.selected').find('.name').text();
$searchInput.val(name);
$resultDiv.fadeOut();// Here you get the id and name of the element selected. You can change this to redirect to any page too. Just like facebook.
}
else{
$resultDiv.fadeIn();
$resultDiv.find('#search-footer').html("<img src='loader.gif' alt='Collecting Data...'/>");
// Query search details from database
$.getJSON("json.php",{searchword: q},function(jsonResult)
{
var str='';
for(var i=0; i<jsonResult.length;i++)
{
str += '<li id=' + jsonResult[i].uid + ' class="option"><img class="profile_image" src="Userdata/Profiel_fotos/'+jsonResult[i].media+'" alt="'+jsonResult[i].voornaam+'"/><span class="name">' + jsonResult[i].voornaam + '</span> '+jsonResult[i].achternaam+'<br/>'+jsonResult[i].plaats+'</li>';
//OUDE: str += '<li id=' + jsonResult[i].uid + ' class="option"><img class="profile_image" src="Userdata/Profiel_fotos/'+jsonResult[i].media+'" alt="'+jsonResult[i].voornaam+'"/><span class="name">' + jsonResult[i].voornaam + '</span><br/>'+jsonResult[i].achternaam+'</li>';
}
$resultDiv.find('ul').empty().prepend(str);
$resultDiv.find('div#search-footer').text(jsonResult.length + " resultaten gevonden...");
$resultDiv.find('ul li').first().addClass('selected');
});
$resultDiv.find('ul li').live('mouseover',function(e){
current_index = $resultDiv.find('ul li').index(this);
$options = $resultDiv.find('.option');
change_selection($options,current_index);
});
// Change selected element style by adding a css class
function change_selection($options,current_index){
$options.removeClass('selected');
$options.eq(current_index).addClass('selected');
}
}
}
else{
//Hide the results if there is no search input
$resultDiv.hide();
}
});
// Hide the search result when clicked outside
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if ($clicked.hasClass("searchi") || $clicked.hasClass("searchf")){
}
else{
$resultDiv.fadeOut();
}
});
// Show previous search results when the search box is clicked
$searchInput.click(function(){
var q=$(this).val();
if(q != '')
{
$resultDiv.fadeIn();
}
});
// Select the element when it is clicked
$resultDiv.find('li').live("click",function(e){
var id = $(this).attr('id');
var name = ($(this).find('.name').text());
$searchInput.val(name);
});
};
})(jQuery);
The json.php document:
<?php
if($_GET)
{
$q=$_GET['searchword'];
$items = array();
include('db.php'); // Includes database connection settings.
$sql_res=mysql_query("select id,voornaam,achternaam,media,plaats from user where voornaam like '%$q%' or achternaam like '%$q%' or plaats like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$id = $row['id'];
$voornaam=$row['voornaam'];
$achternaam=$row['achternaam'];
$media=$row['media'];
$plaats=$row['plaats'];
$b_voornaam='<b>'.$q.'</b>';
$b_achternaam='<b>'.$q.'</b>';
$b_plaats='<b>'.$q.'</b>';
$final_voornaam = str_ireplace($q, $b_voornaam, $voornaam);
$final_achternaam = str_ireplace($q, $b_achternaam, $achternaam);
$final_plaats = str_ireplace($q, $b_plaats, $plaats);
$items[] = array('id' => $id, 'voornaam' => $final_voornaam, 'achternaam' => $final_achternaam, 'media' => $media, 'plaats' => $final_plaats);
}
header('Content-Type:text/json');
echo json_encode($items);
}
else{
echo json_encode('Geen zoekwoord gevonden');
}
?>
The HTML part:
<div class="container">
<p>Start typing in the search box bellow</p>
<input id="searchInput" placeholder="Search for people, places and things"/>
</div>
</body>
<script>
$(document).ready(function()
{
$('#searchInput').fsearch();
});
</script>
Also a little bit variable translation:
voornaam = first name
achternaam = last name
plaats = city
media = uploaded picture
Hope you guys can help me out! Thanks in advance!