Autosuggest systeem maar met meerdere (database) input waardes
Het was nog al moeilijk om een goede titel te bedenken bij mijn vraag en daarom zal ik het hieronder proberen wat duidelijker te omschrijven.
Onlangs heb ik een Jquery autosuggest systeem gedownload, welke vergelijkbaar is met het vrienden zoeksysteem van facebook. Met dit systeem kan ik bijvoorbeeld in mijn zoekbalk een persoon zoeken die is opgeslagen in de databse (d.m.v. een registratie). De waardes waarna gezocht kan worden zijn de voornaam van de persoon, achternaam en de plaats. De volgorde zou niet uit mogen maken. Elk van deze waarde is een apart database veld in de database 'user'. Ik heb het gedownloade systeem hier en daar wat veranderd zodat het zou voldoen aan mijn eisen. Maar nu krijg ik een (groot) probleempje niet voor elkaar omdat ik simpelweg niet de Jquery of SQL - PHP vaardigheden ervoor heb. Het gaat om het volgende:
Wanneer ik voor een persoon zoek met het huidige systeem, bijvoorbeeld Elvis Presley uit Nashville, dan typ ik in mijn zoek bar Elvis. Zodra ik begin met de E L -- etc. geeft dit de suggestie Elvis Presley uit Nashville met een bijbehorende foto (database veld: media) van de persoon aan de linkerkant.
Maar zodra ik typ Elvis SPATIE Presley of Elvis SPATIE Nashville (dus 2 verschillende database velden als zoekwoord met een spatie om ze te onderscheiden)dan geeft het geen resultaten. De reden hiervoor is, wat ik denk althans, dat de jquery widget (de autosuggest) alleen in de database zoekt naar één overeenkomend woord/database veld - het zoekwoord. Typ ik 2 verschillende database velden in dan krijg ik geen resultaten omdat dit een niet overeenkomend database veld is, want Elvis Presley komt niet overeen met het database veld Elvis (voornaam), Presley (achternaam) of Nashville (plaats) de spatie komt zelfs helemaal nergens voor.
Ik heb een aantal dingen geprobeerd maar door mijn minimale, sterker nog mijn maximale minimale jquery vaardigheden kom ik er maar niet uit..
Zo heb ik iets gelezen over dat ik moet zorgen dat mijn json.php bestand (de SQL) meerdere parameters (inputs) moet kunnen hanteren. Met het huidige systeem is dit waarschijnlijk maar 1.
Daarnaast zou mijn jquery systeem (fsearch.jss)een space-split moeten gebruiken en evenveel parameters naar de server moeten versturen als dat er element arrays zijn.
Ik heb echter geen idee hoe ik dit voor elkaar kan krijgen aangezien ik nog behoorlijk onervaren ben.. En zo ben ik hier terecht gekomen;)Ik hoop dat jullie mij een beetje vooruit kunnen helpen.
Mijn code is als volgt:
Het fsearch.jss bestand:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
(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);
Het json.php bestand:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?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');
}
?>
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');
}
?>
En het laatste HTML gedeelte:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
<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>
Ik hoop dat mijn vraag een beetje duidelijk is geworden en dat jullie enig idee hebben hoe dit probleem op is te lossen.
Ieder geval bij voorbaat dank!
Groeten
Gewijzigd op 08/04/2014 13:07:51 door Nicolas Mousserin
Er zijn nog geen reacties op dit bericht.