ajax-подсказки для поиска

Автор：Eve Cole Время обновления：2009-06-07 14:56:52

Таблица базы данных: скопируйте содержимое в буфер обмена. Код:

CREATE TABLE `xqbar`.`suggest` (
`id` INT NOT NULL AUTO_INCREMENT ,
`title` VARCHAR( 100 ) NOT NULL ,
`хиты` INT NOT NULL DEFAULT '0',
ПЕРВИЧНЫЙ КЛЮЧ (`id`)
) ENGINE = InnoDB

вставить в submit(title,hits)values('xqbar.com',100);
вставить в submit(title,hits)values('www.xqbar.com',410);
вставить в submit(title,hits)values('http://xqbar.com',700);
вставить в submit(title,hits)values('mail:xqbar.com',200);
вставить в submit(title,hits)values('ftp:xqbar.com',100);
вставить в submit(title,hits)values('http://www.xqbar.com',70)search.php
(Я давно не сталкивался с PHP. Если приведенный ниже PHP слишком многословен, мне бы хотелось получить совет от эксперта)
Возвращаемая информационная строка должна иметь вид xxx1|xxx2$200|100. Соответствующее содержимое копии копируется в код буфера обмена до и после:

<?php.
if($_GET["действие"]!=''){
#Получаем ключевые слова, введенные пользователем
$keyword=$_GET["ключевое слово"];
#Фильтровать ключевые слова
$keyword=str_replace("[","[[]",$keyword);
$keyword=str_replace("&","[&]",$keyword);
$keyword=str_replace("%","[%]",$keyword);
$keyword=str_replace("^","[^]",$keyword);
#Ссылка на базу данных
$conn=mysql_connect("localhost","xqbar","xqbaradmin");
#Выбрать базу данных
@mysql_select_db("xqbar") или умереть('извините');
mysql_query('установить имена utf-8');
#оператор запроса
$sql="выбрать заголовок,результаты из предложения, где заголовок, например '%".$keyword."%', упорядочить по количеству обращений, предел 10";
$result=mysql_query($sql);
#Цикл для получения результатов запроса и возврата строки
#Формат: Результат 1|Результат 2$Количество кликов по результату 1|Количество кликов по результату 2
если ($ результат) {
$i=1;$title='';$hits='';
while($row=mysql_fetch_array($result,MYSQL_BOTH))
{
$title=$title.$row['title'];
$hits=$hits.$row['hits'];
если ($i<mysql_num_rows($result))
{
$title=$title."|";
$hits=$hits."|";
}
$я++;
}
}
mysql_close();
}
?>
<?php echo $title.'$'.$hits;?>js-код для копирования содержимого в код буфера обмена:

После внедрения prototye.js некоторые друзья сказали, что эта библиотека слишком велика или что, если вы к ней не привыкли, вы можете использовать фреймворк jquery.js или напрямую создать объект ajax. Я не хочу об этом говорить. Здесь я прямо цитирую фреймворк prototye.js.
<script type="text/javascript" src="prototype.js"></script>
js-код для создания слоев и отображения результатов запроса
<тип сценария="текст/javascript">
//Определим переменную Lastindex, чтобы она представляла позицию, в которой скользит мышь по результату запроса, первоначально -1
вар последнийиндекс = -1;
//Определите флаг переменной, чтобы указать, следует ли выполнять запрос ajax на основе ключевых слов, введенных пользователем. false означает, что запрос разрешен, а true означает, что запрос запрещен.
вар флаг = ложь;
//Длина массива, сгенерированного возвращенными результатами запроса
вар длина списка = 0;
//Создаем специальную строку для оптимизации эффективности
функция StringBuffer(){this.data=[];}
//назначение
StringBuffer.prototype.append=function(){this.data.push(arguments[0]);верните это;}
//Выход
StringBuffer.prototype.tostring=function(){return this.data.join("");}
//Удаляем пробелы с обеих сторон строки
String.prototype.Trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
//Скрытая функция предназначена в основном для скрытия отображаемого раскрывающегося слоя подсказки и iframe. Функция iframe будет обсуждаться ниже.
функция скрытого поиска()
{
$('rlist').style.display="none";
$('rFrame').style.display="none";
}
//Функция отображения в основном отображает раскрывающийся слой подсказки и номер параметра iframe. В соответствии с этим параметром контролируется высота отображаемого слоя подсказки и iframe.
функция showsearch(num)
{
$('rlist').style.display='';
$('rFrame').style.display='';
//Здесь я определяю высоту подсказки для каждого возвращаемого результата запроса как 20 пикселей, а общая высота слоя подсказки добавляется к num, потому что при определении стиля я использовал заполнение на один пиксель.
$('rlist').style.height=num*20+num+'px';
//Также позиционируем высоту iframe
$('rFrame').style.height=num*20+num+'px';
}
//Возврат функции координат поля ввода текста. Элемент параметра — это возвращаемый объект. Смещение параметра может быть offsetLeft|offsetTop, что соответственно представляет собой абсолютное положение объекта от верхнего угла левого окна.
//www.devdao.com Используйте эту функцию, чтобы найти слой подсказки, который мы хотим отобразить, чтобы слой подсказки правильно отображался под полем ввода текста.
функция getposition(элемент,смещение)
{
вар с=0;
пока (элемент)
{
с+=элемент[смещение];
элемент = element.offsetParent
}
вернуть с;
}
//Функция создания слоя подсказки включает в себя слой подсказки, и чтобы избежать появления раскрывающегося списка выбора под полем ввода текста, наш слой подсказки больше не может выбирать iframe над ним.
//Можно понять, что когда под полем ввода текста есть раскрывающийся список выбора, это слой раскрывающегося списка выбора-iframe-подсказки снизу вверх.
функция создания списка()
{
//Создаем слой подсказок
var listDiv=document.createElement("div");
//Подсказка идентификатора слоя
listDiv.id="rlist";
listDiv.style.zIndex="2";
listDiv.style.position="абсолютный";
listDiv.style.border="solid 1px #000000";
listDiv.style.backgroundColor="#FFFFFF";
listDiv.style.display="нет";
listDiv.style.width=$('ключевое слово').clientWidth+"px";
listDiv.style.left=getposition($('keyword'),'offsetLeft')+1.5+"px";
listDiv.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";

<form id="form1" name="form1" Method="post" action="">
<b>Введите ключевые слова для поиска</b>
<input name="keyword" type="text" class="inputblue" id="keyword" maxlength="20" style="width:300px;" />
</форма>