[MOD] 4images searchform with keywords - like google suggest by using ajax

[Flo2005]

This tutorial explains, how to get existing keywords in searchform:

example:



1. create a new php-file called ajax-list-keywords.php in root/4images with this code in it (edit host-username-password-dbName):

Code: [Select]

<?php

$conn = mysql_connect("host","username","password");
mysql_select_db("dbName",$conn);

if(isset($_GET['getKeywordsByLetters']) && isset($_GET['letters'])){
$letters = $_GET['letters'];
$letters = preg_replace("/[^a-z0-9 ]/si","",$letters);
$res = mysql_query("select word_id,word_text from 4images_wordlist where word_text like '".$letters."%'") or die(mysql_error());
#echo "1###select word_id,word_text from 4images_wordlist where word_text like '".$letters."%'|";
while($inf = mysql_fetch_array($res)){
echo $inf["word_id"]."###".$inf["word_text"]."|";
}
}

?>

2. add the following files to your gallery in root/4images/js folder
http://www.snuup.de/4img_mods/ajax-js.zip
[EDIT] zip file attached to the bottom of this post

3. edit: templates/default/header.html

find:

Code: [Select]

<link rel="stylesheet" href="{template_url}/style.css" />
add after:

Code: [Select]

<style type="text/css">

/* Big box with list of options */
#ajax_listOfOptions{
position:absolute; /* Never change this one */
width:175px; /* Width of box */
height:250px; /* Height of box */
overflow:auto; /* Scrolling features */
border:1px solid #317082; /* Dark green border */
background-color:#FFF; /* White background color */
text-align:left;
font-size:0.9em;
z-index:100;
}
#ajax_listOfOptions div{ /* General rule for both .optionDiv and .optionDivSelected */
margin:1px;
padding:1px;
cursor:pointer;
font-size:0.9em;
}
#ajax_listOfOptions .optionDiv{ /* Div for each item in list */

}
#ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
background-color:#317082;
color:#FFF;
}
#ajax_listOfOptions_iframe{
background-color:#F00;
position:absolute;
z-index:5;
}

form{
display:inline;
}

</style>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajax-dynamic-list.js"></script>

4. edit: templates/default/search_form.html

find:

Code: [Select]

<input type="text" name="search_keywords" size="40" value="{search_keywords}" class="input" />
replace with:

Code: [Select]

<input type="text" name="search_keywords" size="40" value="{search_keywords}" class="input" onkeyup="ajax_showOptions(this,'getKeywordsByLetters',event)" />
you can use this searchform also in your header of 4images:



edit every toplevel html-file like details.html, home.html, register.html, lightbox.html, member.html and some more... and find:

Code: [Select]

<input type="text" name="search_keywords" size="15" class="searchinput" />
replace with:

Code: [Select]

<input type="text" name="search_keywords" size="15" class="searchinput" onkeyup="ajax_showOptions(this,'getKeywordsByLetters',event)" />
Hope it works 4you!

Cu by Flo

[pda]

Wow. It works like a charm. Thanks!!

I just adapted it a little bit to get it work with the memberlist MOD.
There is actually just one problem which occurs.
How can I show  special characters in this Ajax drop down Box?

For example: German umlauts like
ö  ü   ä

Those are now shown by a question mark sign

[cristina]

Hi, nice MOD!

Well, I just installed it BUT... why the need to use DB names and passwords on the php file? Ok, not sure if this will be of interest, but I just modified the file and now it looks like this:

Code: [Select]

<?php

define('ROOT_PATH', './');
include(ROOT_PATH.'global.php');
require(ROOT_PATH.'includes/sessions.php');

if(isset($_GET['getKeywordsByLetters']) && isset($_GET['letters'])) {

$letters = $_GET['letters'];

$letters = preg_replace("/[^a-z0-9 ]/si","",$letters);

$sql ="SELECT i.word_id, i.word_text
FROM ".WORDLIST_TABLE." i
WHERE i.word_text like '".$letters."%'";
$result = $site_db->query($sql);

while($inf = mysql_fetch_array($result)) {

echo $inf["word_id"]."###".$inf["word_text"]."|";

}

}

?>
BTW, it is nice to turn auto-complete off in the input field so it won't interfere with the AJAX auto-complete div (I used uppercase to you can view it better):

Code: [Select]

<input type="text" name="search_keywords" size="40" value="{search_keywords}" AUTOCOMPLETE="OFF" class="input" />
Excuse me for my poor english, and sorry if something is wrong!

Regards.

[BlueScorpion]

Hello,

I installed this great MOD too and now i need your advice/help.

Is it for this MOD possible too, to filter words depending on authentication of the user/guest like here for the searchform-keywords-list http://www.4homepages.de/forum/index.php?topic=3850.45 ?
But in the other, linked, MOD this sql-statement is used...

$sql = "SELECT `image_keywords` FROM ".IMAGES_TABLE." WHERE 1 AND cat_id IN (".get_auth_cat_sql("auth_viewcat").") order by `image_keywords` DESC";

... and for the ajax-mod is used...

$sql ="SELECT i.word_id, i.word_text FROM ".WORDLIST_TABLE." i WHERE i.word_text like '".$letters."%'";

Any ideas to solve the problem for the ajax-mod too?

Thx
BluE

[Vincent]

Hello i Installed the mod
but ...
on the start page www.foto-kocher.com it is not showing up

if i click "Suchen ..." and i start to fill in it show just writen in white of white feld - so it is difficult to read - if you move over with the cursor it highliht and you could search

to the following toplevel html file - they don't have the requested input to change

edit every toplevel html-file like details.html, home.html, register.html, lightbox.html, member.html and some more... and find:


Code:
<input type="text" name="search_keywords" size="15" class="searchinput" />
replace with:


Code:
<input type="text" name="search_keywords" size="15" class="searchinput" onkeyup="ajax_showOptions(this,'getKeywordsByLetters',event)" />
Hope it works 4you!

[Vincent]

hello
i think i found my problem -  i can't remember in which file i but the search-Box on the leftside!
sincerly
vincent

[Vincent]

Hello
it is working only it is showing withe letters on withe ground so you can't really read it!
how to make some blak letters?
vincent

[Buggy Driver]

In de code you added in step 3 look for

Code: [Select]

background-color:#FFF; /* White background color */

add after

Code: [Select]

color:#000000;  /* text color   (000000 for Black   FFFFFF for White)  */


[Vincent]

thanks a lot
i found it and i change it - the only problem i have is - in europe you have some caracter like  ö ä ü
they are not showing right

sincerly
vincent

[sowtrig]

thx 4 this gr8 MOD,

but how could i use it for anthor lang like Arabic?

[m.a]

thanks a lot
i found it and i change it - the only problem i have is - in europe you have some caracter like  ö ä ü
they are not showing right

sincerly
vincent

thanks Flo2005,
nice MOD!

but it is not only Problem with ö ä ü!, and other language like Persian and Arab letters are not showing right!

can you solve the problem?

best Reg.
m.a

[dave]

Cool, this is a really helpfull MOD for our users! 
And the umlauts are shown correctly if you overwrite

Code: [Select]

echo $inf["word_id"]."###".$inf["word_text"]."|"; with

Code: [Select]

echo $inf["word_id"]."###".utf8_encode($inf["word_text"])."|";.

[Vincent]

@dave
hello - thanks for the code part - but still you can't search for it.
try on my page to find türkei (turkey)

sincerly
vincent

[dave]

...  but still you can't search for it.

Ah, right! It only fixes the suggestion list entries. 
The umlauts get lost due to the string replacement in ajax-list-keywords.php. But the DB plays a role in it, too!
Hopefully someone has more time to take a deeper look at it ...

[ch€ri{Bi}²]

  the link (zip file) is dead

[EDIT]
here is the missing file !
Good pretty MOD 

  How about authentification ? i mean : users can see only keywords they are allowed to access...
  like it was done here