4images Modifications / Modifikationen > Mods & Plugins (Releases & Support)
[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: ---<?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"]."|";
}
}
?>
--- End code ---
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: ---<link rel="stylesheet" href="{template_url}/style.css" />
--- End code ---
add after:
--- Code: ---<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>
--- End code ---
4. edit: templates/default/search_form.html
find:
--- Code: ---<input type="text" name="search_keywords" size="40" value="{search_keywords}" class="input" />
--- End code ---
replace with:
--- Code: ---<input type="text" name="search_keywords" size="40" value="{search_keywords}" class="input" onkeyup="ajax_showOptions(this,'getKeywordsByLetters',event)" />
--- End code ---
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: ---<input type="text" name="search_keywords" size="15" class="searchinput" />
--- End code ---
replace with:
--- Code: ---<input type="text" name="search_keywords" size="15" class="searchinput" onkeyup="ajax_showOptions(this,'getKeywordsByLetters',event)" />
--- End code ---
Hope it works 4you!
Cu by Flo :wink:
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: ---<?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"]."|";
}
}
?>
--- End code ---
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: ---<input type="text" name="search_keywords" size="40" value="{search_keywords}" AUTOCOMPLETE="OFF" class="input" />
--- End code ---
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!
Navigation
[0] Message Index
[#] Next page
Go to full version