[MOD] Search jQuery Tag Suggestion / Keywords

[Lucifix]

On web I've found interesting jquery plugin that suggest you some keywords. To understand it plz check first demo:
http://remysharp.com/wp-content/uploads/2007/12/tagging.php

I was thinking to integrated it with 4images gallery but the everytime I connect it with 4images database my server crashed.

Does anyone have idea how to implent it with database (4images_wordlist table)?

Link: http://remysharp.com/2007/12/28/jquery-tag-suggestion/

UPDATE: after searching on 4images forum I've found great idea. Comming soon

[Lucifix]

Okey, here we go, but I must warn you that this is BETA MOD and it should be tested by someone who knows what he's doing

1. Open member_uploadform.html in your templates folder:

change:

Code: [Select]

<textarea cols="30" class="textarea" rows="10" wrap="VIRTUAL" name="image_keywords">{image_keywords}</textarea>
to:

Code: [Select]

<textarea cols="30" class="textarea" rows="10" wrap="VIRTUAL" name="image_keywords" id="image_keywords">{image_keywords}</textarea>
if its not working try this:

Code: [Select]

<input type="text" name="image_keywords" id="image_keywords" />
2. Open header.html

after:

Code: [Select]

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

Code: [Select]

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="tag.js"></script>
<script type="text/javascript">
<!--
$(function () {

$('#image_keywords').tagSuggest({
url: '{url_tags}',
delay: 250
});
});
//-->
</script>
    <style type="text/css" media="screen">
    <!--
      SPAN.tagMatches {
          margin-left: 10px;
      }
      
      SPAN.tagMatches SPAN {
          padding: 2px;
          margin-right: 4px;
          background-color: #0000AB;
          color: #fff;
          cursor: pointer;
      }
      
      PRE {
          background: #ddd;
          font-family: Courier;
          padding: 5px;
          overflow: auto;
      }
    -->
    </style>

3. Open includes/page_header.php and

after

Code: [Select]

"url_captcha_image" => $site_sess->url(ROOT_PATH."captcha.php"),
add

Code: [Select]

"url_tags" => $site_sess->url(ROOT_PATH."tags.php"),
4. Create new file tags.php and upload it to root folder of your 4images gallery:

Code: [Select]

<?php
$main_template = 0;
$nozip = 1;
define('ROOT_PATH', './');
include(ROOT_PATH.'global.php');
require(ROOT_PATH.'includes/sessions.php');
include(ROOT_PATH.'includes/search_utils.php');

$tag = isset($HTTP_GET_VARS['tag']) ? un_htmlspecialchars(trim($HTTP_GET_VARS['tag'])) : "";
$tag = strip_tags(trim($tag));
$tag = convert_special($tag);
$tag = str_replace("%", "", $tag);
if ($tag !== "") {
  $sql = "SELECT DISTINCT i.word_text
          FROM 4images_wordlist i
          LEFT JOIN 4images_wordmatch c ON i.word_id = c.word_id
          WHERE c.keys_match >= 0 AND i.word_text LIKE '".$tag."%'
          ORDER BY RAND()
          LIMIT 5";
  $result = $site_db->query($sql);
  echo '[';
  while ($row = $site_db->fetch_array($result))
  {
    if (isset($word_text))
      echo ",";
    $word_text = $n = str_replace('"', '&quot;', $row['word_text']);
    echo '"'.$word_text.'"';
  }
  echo ']';
}
?>
5. Download file:
http://remysharp.com/downloads/tag.js

And upload it to your root directory.

I hope that's all, test it and let me know if it's working...

[EDIT by V@no]
fixed error in tags.php plus added little filter and fixed wrong filename tags.js instead of tag.js in header.html

[V@no]

in 4images do not use $_GET/$_POST, unless absolutely necessary and unless your code does filtering these inputs by itself. Otherwise use $HTTP_GET_VARS instead.

And I'm curious, how will that code handle words that using non-latin charset?

[Lucifix]

in 4images do not use $_GET/$_POST, unless absolutely necessary and unless your code does filtering these inputs by itself. Otherwise use $HTTP_GET_VARS instead.

And I'm curious, how will that code handle words that using non-latin charset?

I alway forgot to use $HTTP_GET_VARS insted of $_GET I'll fix that...

Otherwise I have no clue how will this work on non-latin charset - I haven't include this yet in my gallery, but if someone has installed test version of 4images gallery can check this out.

[Kaliha]

кто может обьяснить что именно делает этот мод?

[V@no]

этот мод выводит список подсказок возможных ключевых слов во время ввода в поле поиска, примерно как это делается на google

[Kaliha]

а на основании чего он выводит подсказки? и как проявляется работа?
Up, выдает ошибку в IE матюкается на код $('#image_keywords').tagSuggest({ и ниче не работает ((

[rinaldos]

@Lucifix

Please change in LINE10 this

Code: [Select]

$tag = $HTTP_GET_VARS['tag']);

to

Code: [Select]

$tag = $HTTP_GET_VARS['tag'];

There is a ")" wrong

Gruß

[V@no]

а на основании чего он выводит подсказки? и как проявляется работа?
Up, выдает ошибку в IE матюкается на код $('#image_keywords').tagSuggest({ и ниче не работает ((

Подсказки берутся из ключевых слов записанных в базе данных в таблице "4images_keywords"
на счёт ошибки, нужно изменить tags.js на tag.js в header.html
также нужно исправить ошибку, про которую написал rinaldos (всё уже исправлено в инструкции)


@All:
Keep in mind, this mod will display "real" keywords only. By "real" I mean the keywords that were manually submitted with images, NOT that are automatically generated from image names and descriptions.
If you want to change that, then in tags.php replace:

Code: (MySQL query) [Select]

          WHERE c.keys_match > 0 AND i.word_text LIKE '".$tag."%'
with:

Code: (MySQL query) [Select]

          WHERE i.word_text LIKE '".$tag."%'

Also, it will return only 5 keywords sorted randomly.

[Kaliha]

поправил, но результата в Опере неувидел, может в IE только работает?

[V@no]

у меня работает во-всех браузерах.

[Kaliha]

а можно посмотреть в действии? на каком сайте установленно?

[V@no]

тестирую на локальном...
так я не понял, в IE работает? Если, да, то что опера говорит, есть ли какие ошибки?

[Kaliha]

ни в IE нив Opera у меня неполучилось установить. сегодня поробую на чистый движек поставить
позже
В Опере заработало, но только с латиницой(