• [MOD] 4images searchform with keywords - like google suggest by using ajax 5 0 5 1
Currently:  

Poll

Rate this!

great
13 (59.1%)
good
7 (31.8%)
not bad
1 (4.5%)
unnecessary
1 (4.5%)

Total Members Voted: 20

Author Topic: [MOD] 4images searchform with keywords - like google suggest by using ajax  (Read 35997 times)

0 Members and 2 Guests are viewing this topic.

Offline Flo2005

  • Full Member
  • ***
  • Posts: 237
  • Copy & Paste Profi :)
    • View Profile
    • snuup.de! - Bilder - Sounds - Videos - fun4FREE!
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 :wink:
« Last Edit: December 24, 2007, 09:53:28 PM by Nicky »

Project offline

Offline pda

  • Newbie
  • *
  • Posts: 11
    • View Profile
Re: 4images searchform with keywords - like google suggest by using ajax
« Reply #1 on: October 31, 2006, 11:25:15 AM »
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



Offline cristina

  • Newbie
  • *
  • Posts: 19
    • View Profile
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.

Offline BlueScorpion

  • Newbie
  • *
  • Posts: 16
  • BlueScorpion
    • View Profile
    • Homepage von BlueScorpion
Re: 4images searchform with keywords - like google suggest by using ajax
« Reply #3 on: June 29, 2007, 09:51:49 AM »
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

Offline Vincent

  • 4images Moderator
  • Addicted member
  • *****
  • Posts: 1.195
    • View Profile
    • www.foto-kocher.com
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!
Beati pauperi spiritus

4images 1.7 // My Installed Mods


Offline Vincent

  • 4images Moderator
  • Addicted member
  • *****
  • Posts: 1.195
    • View Profile
    • www.foto-kocher.com
hello
i think i found my problem -  i can't remember in which file i but the search-Box on the leftside!
sincerly
vincent
Beati pauperi spiritus

4images 1.7 // My Installed Mods


Offline Vincent

  • 4images Moderator
  • Addicted member
  • *****
  • Posts: 1.195
    • View Profile
    • www.foto-kocher.com
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
Beati pauperi spiritus

4images 1.7 // My Installed Mods


Offline Buggy Driver

  • Newbie
  • *
  • Posts: 22
    • View Profile
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)  */


Offline Vincent

  • 4images Moderator
  • Addicted member
  • *****
  • Posts: 1.195
    • View Profile
    • www.foto-kocher.com
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
Beati pauperi spiritus

4images 1.7 // My Installed Mods


Offline sowtrig

  • Pre-Newbie
  • Posts: 2
    • View Profile
thx 4 this gr8 MOD,

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

Offline m.a

  • Jr. Member
  • **
  • Posts: 83
    • View Profile
Re: [MOD] 4images searchform with keywords - like google suggest by using ajax
« Reply #10 on: November 10, 2007, 01:59:25 AM »
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! :D

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
« Last Edit: November 10, 2007, 02:11:25 AM by m.a »

Offline dave

  • Pre-Newbie
  • Posts: 7
    • View Profile
Re: [MOD] 4images searchform with keywords - like google suggest by using ajax
« Reply #11 on: November 21, 2007, 05:11:45 AM »
Cool, this is a really helpfull MOD for our users!  :D
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"])."|";.



Offline Vincent

  • 4images Moderator
  • Addicted member
  • *****
  • Posts: 1.195
    • View Profile
    • www.foto-kocher.com
Re: [MOD] 4images searchform with keywords - like google suggest by using ajax
« Reply #12 on: November 21, 2007, 12:27:14 PM »
@dave
hello - thanks for the code part - but still you can't search for it.
try on my page to find trkei (turkey)

sincerly
vincent
Beati pauperi spiritus

4images 1.7 // My Installed Mods


Offline dave

  • Pre-Newbie
  • Posts: 7
    • View Profile
Re: [MOD] 4images searchform with keywords - like google suggest by using ajax
« Reply #13 on: November 21, 2007, 05:46:13 PM »
...  but still you can't search for it.

Ah, right! It only fixes the suggestion list entries.  :roll:
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 ...

Offline chri{Bi}

  • Sr. Member
  • ****
  • Posts: 315
  • A PRoBLeM wIthOUt SoLuTioN Is NoT rEAllY a PRoBLeM
    • View Profile
    • Pat's Gallery
Re: [MOD] 4images searchform with keywords - like google suggest by using ajax
« Reply #14 on: December 21, 2007, 06:48:15 PM »
:thumbdown:  the link (zip file) is dead :?

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

 :idea: How about authentification ? i mean : users can see only keywords they are allowed to access...
 :arrow: like it was done here
« Last Edit: December 22, 2007, 01:31:10 AM by chri{Bi} »
chri{Bi}