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):
<?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 post3. edit:
templates/default/header.htmlfind:
<link rel="stylesheet" href="{template_url}/style.css" />
add after:
<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.htmlfind:
<input type="text" name="search_keywords" size="40" value="{search_keywords}" class="input" />
replace with:
<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:
<input type="text" name="search_keywords" size="15" class="searchinput" />
replace with:
<input type="text" name="search_keywords" size="15" class="searchinput" onkeyup="ajax_showOptions(this,'getKeywordsByLetters',event)" />
Hope it works 4you!
Cu by Flo