Voronov-IT: Blog http://voronov-it.com/blog Mon, 24 Nov 2008 09:51:02 +0000 http://wordpress.org/?v=2.6 en Пишем скрипт автозаполнения поисковых форм http://voronov-it.com/blog/pishem-skript-avtozapolneniya-poiskovyx-form/ http://voronov-it.com/blog/pishem-skript-avtozapolneniya-poiskovyx-form/#comments Tue, 12 Aug 2008 05:51:21 +0000 Rii http://voronov-it.com/blog/?p=29 Сегодня попробуем сами написать скрипт для автозаполнения поисковых форм, например как в Google или Википедии. По моему довольно удобная функция. И, как оказалось, довольно проста в реализации. Ну что же, приступим!

Система простая: при вводе в поле символа – отправляем с помощью ajax`а запрос. В серверной части обрабатываем его и выдаём. В нашем примере сделаем простой поиск по именам. Для начала создадим саму поисковую форму:

<br />
<html><br />
<head></p>
<p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p>
<style type="text/css">
.searchbar {
  position: absolute;
  width: 230px;
  display: none;
  border: 1px solid #333;
}
.asearch {
  background-color: #FFFFDE;
  cursor: pointer;
  padding: 1px 0px 1px 5px;
}
</style>
<p><script language="JavaScript" src="autosearch.js" type="text/javascript"></script></p>
<p></head><br />
<body></p>
<form action="" method="post">
<input type="text" name="search" id="search" size="35" onKeyUp="ajaxSend(event,this.value)">&nbsp;</p>
<input type="submit" value="Искать">
</form>
<div class="searchbar" id="sbar"></div>
<p></body></html><br />

Пишем скрипт автозаполнения поисковых форм

Теперь по порядку. Мы имеем простую формочку, состоящую из текстового поля и кнопки. Сразу под ним – блок, где мы будем выводить результаты. Ширину, рамку и остальное меняем в классе searchbar. Класс asearch – это уже само оформления вариантов подсказки (подробнее будет дальше).

Так, с формочкой вроде разобрались. Теперь разберём что у нас будет в autosearch.js.

<br />
function sendRequest(file,_resultId,getRequestProc) {<br />
  resultId = _resultId;<br />
  document.getElementById(resultId).innerHTML = '';<br />
  httpRequest.open('get', file);<br />
  httpRequest.onreadystatechange = getRequestProc;<br />
  httpRequest.send(null);<br />
}</p>
<p>function getRequest() {<br />
  if (httpRequest.readyState==4 &#038;& httpRequest.responseText!='') {<br />
    document.getElementById(resultId).innerHTML = httpRequest.responseText;<br />
    document.getElementById('sbar').style.display = 'block';<br />
  }<br />
}</p>
<p>function m_over(obj) {<br />
  obj.style.backgroundColor='#3A4057';<br />
  obj.style.color='#FFFFFF';<br />
}<br />
function m_out(obj) {<br />
  obj.style.backgroundColor='#FFFFDE';<br />
  obj.style.color='#000000';<br />
}<br />
function m_change(val) {<br />
  document.getElementById('search').value=val;<br />
  document.getElementById('sbar').style.display='none';<br />
}</p>
<p>function ajaxSend(event,text) {<br />
  if(event.charCode) var charCode=event.chatCode;<br />
  else if (event.keyCode) var charCode=event.keyCode;<br />
  else if (event.which) var charCode=event.which;<br />
  else var charCode=0;<br />
  if(charCode<31) return false;<br />
  sendRequest('request.php?s='+encodeURIComponent(text),'sbar',getRequest);<br />
}</p>
<p>var resultId = '';<br />
if (navigator.appName == "Microsoft Internet Explorer")<br />
  var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");<br />
else<br />
  var httpRequest = new XMLHttpRequest();<br />

Тут всё просто. Функция sendRequest – служит для отправки запроса, getRequest – получение данных. m_over меняет внешний вид варианта подсказки при наведении курсора, m_out – при уходе курсора с объекта. m_change – при клике на подсказку вставляет текст в поле и исчезает (тут к примеру можно поставить после клика начинать поиск).
В функции ajaxSend я поставил ограничение на клавиши, чтобы избежать отправки запросов при нажатии на Shift, Ctrl и другие не символьные клавиши.

Запросы мы будем отправлять в файл request.php. Так как у IE ajax-запросы отправляются в win-1251 кодировке (а не utf-8, как у всех остальных браузеров) мы кодируем текст на кириллице с помощью функции encodeURIComponent(). Я на этом моменте долго помучался, пока разобрался =)

Ну, а теперь серверная часть нашего скрипта. Тут уже каждый может менять код под свои нужды, усовершенствовать и дополнять его.

<br />
<?php<br />
header("Content-type: text/plain; charset=utf-8");<br />
$s = mysql_real_escape_string(substr(trim($_GET['s']),0,50));<br />
if(!empty($s)) {<br />
  mysql_connect('localhost','root','');<br />
  mysql_select_db('test');<br />
  mysql_query("SET NAMES utf8");<br />
  $res = mysql_query("SELECT name FROM names WHERE name LIKE '".$s."%' ORDER BY name ASC LIMIT 7");<br />
  while($row = mysql_fetch_array($res)) {<br />
?></p>
<div class="asearch" onMouseOver="m_over(this)" onMouseOut="m_out(this)" onClick="m_change('<?=$row['name'];?>')"><br />
<?=$row['name'];?>
</div>
<p><?php }} ?><br />

В итоге серверная часть скрипта должна выдать что-то вроде этого:

</p>
<div class="asearch" onMouseOver="m_over(this)" onMouseOut="m_out(this)" onClick="m_change('Анатолий')">Анатолий</div>
<div class="asearch" onMouseOver="m_over(this)" onMouseOut="m_out(this)" onClick="m_change('Антон')">Антон</div>
<p>

Рабочий вариант скрипта
Скачать архив со скриптом (1.7Кб)

Вот, пожалуй, и весь скрипт. Я решил, что не стоит загружать фреемворками. Для тех, кто ищет вариант с фреемворком могу предложить AutoCompleter(для MooTools).

]]> http://voronov-it.com/blog/pishem-skript-avtozapolneniya-poiskovyx-form/feed/ Как загрузить и распаковать ZIP-архив на сервере http://voronov-it.com/blog/kak-zagruzit-i-raspakovat-zip-arxiv-na-servere/ http://voronov-it.com/blog/kak-zagruzit-i-raspakovat-zip-arxiv-na-servere/#comments Wed, 06 Aug 2008 23:57:19 +0000 Rii http://voronov-it.com/blog/?p=3 Привет!! Думаю у вас случалось, когда нужно было залить на сервер какой-нибудь движок или скрипт. Но он состоял из большого количества различных файлов и его загрузка занимала довольно много времени. Эх, как бы хотелось всё это сделать быстро и одним файлом. Вот и пришла мне идея написать небольшой скрипт для облегчения своей и вашей жизни.

В сети я нашёл очень удобную библиотеку для работы с zip-архивами. Знакомьтесь – PCLZip.

Теперь наш скрипт распаковщика:

<br />
<?php<br />
set_time_limit(0);  // Установим максимальное время выполнения скрипта до бесконечности</p>
<p>$loadarch = $_FILES['arch']; // Это для удобства</p>
<p>// Если ничего не загружено или произошла ошибка при загрузке - выводим форму<br />
if(empty($loadarch['name']) || $loadarch['error']!=UPLOAD_ERR_OK) {<br />
?></p>
<form action="" method="post" enctype="multipart/form-data">
  <b>Выберите zip-архив:</b></p>
<input type="file" name="arch">
  <b>Извлечь в папку:</b></p>
<input type="text" name="fold">
<input type="submit" value="Загрузить">
</form>
<p><?php<br />
exit; // Вывели формочку и закончили<br />
}</p>
<p>// Если файл загружен, выполняем код ниже</p>
<p>// Проверим, является ли файл zip-архивом<br />
if($loadarch['type']!='application/zip' &#038;& $loadarch['type']!='application/x-zip-compressed')<br />
  die('Ошибка! Это не zip-архив!');</p>
<p>// Загружаем архив в папку со скриптом<br />
copy($loadarch['tmp_name'],$loadarch['name']);</p>
<p>// Подключаем библиотеку для работы с ZIP-архивами<br />
require_once('pclzip.lib.php');</p>
<p>// $loadarch['name'] - название архива<br />
$zip = new PclZip($loadarch['name']);</p>
<p>// Если указана папка для извлечения, распаковываем туда<br />
if(empty($_POST['fold']))<br />
  $ext = $zip->extract(PCLZIP_OPT_SET_CHMOD, 0777);<br />
// Иначе, в папку со скриптом<br />
else<br />
  $ext = $zip->extract(<br />
    PCLZIP_OPT_PATH,$_POST['fold'],<br />
    PCLZIP_OPT_SET_CHMOD, 0777<br />
);</p>
<p>// Если возвращает 0, выводим ошибку и выходим<br />
if($ext==0)<br />
  die("Ошибка! ".$zip->errorInfo(true));</p>
<p>// Выводим список загруженных файлов<br />
foreach ($ext as $val) {<br />
  echo $val['filename']."<br />";<br />
}<br />
echo "<b>Файлы успешно извлечены!!</b>";</p>
<p>// и удаляем уже распакованный архив<br />
unlink($loadarch['name']);<br />
?>

Итак, что в итоге получилось. Когда открываем страничку, мы видим перед собой простую форму с 2 полями: для выбора загружаемого архива и для указания каталогу, куда всё это дело распаковать. Поле с каталогом не обязательное, и если его оставить пустым – архив распакуется в папку со скриптом. После распаковки скрипт выведет список распакованных папок и файлов.

Скачать скрипт распаковщика

Вот в принципе и всё! Конечно, скрипт очень простой, но то, что должен делать – он делает исправно. Жду ваших вопросов, отзывов и идей по поводу библиотеки и нашего скрипта.

]]> http://voronov-it.com/blog/kak-zagruzit-i-raspakovat-zip-arxiv-na-servere/feed/