Некоторое время назад я хотел использовать Google Offer и нашел много результатов в Интернете, но меня это не удовлетворило, поэтому я потратил некоторое время на его написание. По сути, это то же самое, что и Google Offer. Последующие приблизительные результаты выходят за рамки рассмотрения. эта программа. Более полный код см. в версии, поддерживающей базу данных. После редактирования и тестирования Script House.
Asp+Ajax имитирует версию базы данных эффекта подсказки поиска Google
Есть места, которые необходимо доработать:
Скопируйте код кода следующим образом:
javascript.js
var url=ajax.asp // Адрес бэкэнда;
var time_delayajax=300 //Задержка поиска;
var time_delayupdown=100 // Задержка клавиши направления
obj_div.style.top = (xtop + 20) + px; //20 — это почти высота поля ввода, отрегулируйте ее в соответствии с реальной ситуацией.
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //Значение, отправленное в фоновый режим
dd=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>about +c [1]+result</span>+c[0]+</li>;//Отображение ****li
Формат результатов фонового вывода должен быть «Текст 1, Текст 2»....
'java,2''javascript,11''пример Java,22' и т.д.
default.css
Скопируйте код кода следующим образом:
.ajaxsearch {
width:300px; //Ширина слоя подсказки;
}
Homeindex.html
Скопируйте код кода следующим образом:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<голова>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<link rel=тип таблицы стилей=text/css href=default.css />
<script Language=JavaScript src=javascript.js type=text/javascript></script>
<title>Google предлагает пример высокой имитации</title>
</голова>
<body onResize=removediv();>
<div style=margin:20px 50px>
<input style=width:298px;height:18px type=text autocomplete=off onBlur=blurdeal(); onKeyDown=keydowndeal(event); onFocus=focusdeal(event);
</div>
</тело>
</html>
Скриптjavascript.js
Скопируйте код кода следующим образом:
////////////////////////////////Окно подсказки поиска////////////// /// ///////////////////
var obj_div; //Объект слоя подсказки
var obj_input; //Объект поля ввода
var main_delay; // Объект задержки изменения значения судьи
var ajax_delay; // объект поиска с задержкой ajax
var updown_delay; // Объект задержки клавиши направления
вар ajax_xmlhttp // объект Ajax;
var div_word=null //значение поиска, соответствующее текущему слою подсказки;
var li_num=-1 //Позиция псевдокурсора, запрашивает номер li выбранного слоя, начиная с 0
var li_down=-1 //Порядковый номер слоя подсказки при нажатии мыши;
var value_ed=; //Значение поля ввода до задержки
var value_ing=; //Текущее значение поля ввода
var value_unexit=; //Поиск начала значения без результатов
var updown_run=false; //Разрешить клавиши со стрелками вверх и вниз
var ajax_run=false; //true означает нормальный процесс, false останавливает ajax
var ajax_run_ing=false; //true работает, false — простаивает
var input_focus = false // Фокус текстового поля;
var url=ajax.asp //Адрес бэкэнда *************************************; *********************
var time_delayajax=300 //Задержка поиска***************************************; ***** *******************
var time_delayupdown=100 //Задержка клавиши направления***************************************; ** ****************
вар $=функция(Fun_id){
вернуть документ.getElementById(Fun_id);
}
пытаться{
ajax_xmlhttp= новый ActiveXObject('Msxml2.XMLHTTP');
}поймать(е){
пытаться{
ajax_xmlhttp= новый ActiveXObject('Microsoft.XMLHTTP');
}поймать(е){
пытаться{
ajax_xmlhttp= новый XMLHttpRequest();
}catch(e){ajax_xmlhttp=null;}
}
}
/////////////////////////Создать слой подсказок////////////////////// // /
функция createajaxdiv(){
вар create_div = document.createElement(div);
create_div.type = div;
вар Promptdiv = document.body.appendChild(create_div);
Promptdiv.className = ajaxsearch;
obj_div = Promptdiv;
}
/////////////////////////Установите положение слоя подсказки/////////////////// //// //
функция удаленаiv(){
if(!obj_div || !obj_input)возвращает ложь;
if(obj_div.style.display==none)возвращает false;
вар obj = obj_input;
вар xtop=0;
вар xleft = 0;
в то время как (объект) {
xtop += obj[offsetTop];
xleft += obj[offsetLeft];
объект = объект.offsetParent;
}
obj_div.style.left = xleft + пикселей;
obj_div.style.top = (xtop + 20) + px; //20 — это почти высота поля ввода, отрегулируйте ее в соответствии с реальной ситуацией**************** ****** ****************************************8
li_down=-1;
}
////////////////////////Скрыть слой подсказок////////////////////// // /
функция скрытьаджаксдив(){
obj_div.style.display = нет;
li_down=-1;
}
/////////////////////////Установим выбранный стиль <li>css//////////////// /// //////
функция setliststyle(){
for(var i=0;i<obj_div.firstChild.childNodes.length;i++){
obj_div.firstChild.childNodes[i].id=;
}
if(li_num!=-1)obj_div.firstChild.childNodes[li_num].id=liseleted;
}
//////////////////////////Мышь проходит через слой подсказки///////////////// ////// //
функция overli(Fun_seletedlinum){
if(li_num==-1)value_ing=obj_input.value;
li_num=Fun_seletedlinum;
наборстиль();
}
/////////////////////////Слой подсказки перетаскивания мышью//////////////////// // ///
функция перемещения(){
если (window.getSelection) {
установить фокус();
window.getSelection().removeAllRanges();
}еще{
документ.выбор.пустой();
установить фокус();
}
}
/////////////////////////Слой подсказки при нажатии мыши //////////////////// // ///
функция downli(Fun_seletedlinum){
if(!obj_input) вернет ложь;
li_down = Fun_seletedlinum;
input_focus = правда;
}
/////////////////////////Слой всплывающей подсказки мыши////////////////// //// ///
функция upli(Fun_seletedlinum,Fun_event){
if(!obj_input) вернет ложь;
if(Fun_event.button==2){li_down=-1;return}
if(li_down!=Fun_seletedlinum){
li_down=-1;
вернуть ложь;
}
ClearTimeout (ajax_delay);
ClearTimeout (updown_delay);
updown_run = правда;
ajax_run = ложь;
ajax_run_ing = ложь;
li_num=-1;
div_word = ноль;
value_ed=obj_div.firstChild.childNodes[Fun_seletedlinum].childNodes[1].nodeValue;
obj_input.value=value_ed;
value_ing=value_ed;
скрытьаджаксдив();
obj_div.innerHTML =;
}
/////////////////////////Установим текстовое поле, чтобы получить фокус ///////////////// ///// //
функция setfocus(){
если (окно.событие) {
вар r = obj_input.createTextRange();
r.moveStart('character',obj_input.value.length);
r.collapse(истина);
р.выбрать();
}еще{
obj_input.selectionStart=obj_input.value.length;
obj_input.focus();
}
}
/////////////////////////Текстовое поле теряет фокус /////////////////// //// //
функция размытия(){
если (input_focus==истина){
установить фокус();
setTimeout(setfocus());
вернуть ложь;
}
updown_run = ложь;
ajax_run = ложь;
ajax_run_ing = ложь;
ClearInterval (main_delay);
ClearTimeout (ajax_delay);
ClearTimeout (updown_delay);
скрытьаджаксдив();
if(value_ed!=obj_input.value)obj_div.innerHTML=;
}
//////////////////////////Текстовое поле получает фокус //////////////////// /// //
функция focusdeal(Fun_event){
если (!obj_div)createajaxdiv();
если (input_focus==истина){
input_focus = ложь;
вернуть ложь;
}
var obj=((window.event)?Fun_event.srcElement:Fun_event.target);
if(obj.type!=text)вернуть false;
updown_run = правда;
ajax_run = правда;
ajax_run_ing = ложь;
if(obj_input==obj && value_ed==obj.value && obj_div.innerHTML!=){
obj_div.style.display = блок;
удаленоiv();
}еще{
obj_input = объект;
value_ed=obj.value;
value_ing=obj.value;
value_unexit =;
li_num=-1;
li_down=-1;
div_word = ноль;
obj_div.innerHTML =;
удаленоiv();
}
main_delay = setInterval (mainajax (), 10);
}
/////////////////////////Основная функция /////////////////////// ///
функция mainajax(){
если (value_ed == obj_input.value) вернуть ложь;
if(value_unexit!= && (obj_input.value).indexOf(value_unexit)==0){hideajaxdiv();obj_div.innerHTML=;return false;}
if(value_ed!=obj_input.value && ajax_run_ing==false){
ajax_run = правда;
value_ed=obj_input.value;
ClearTimeout (ajax_delay);
если(obj_input.value!=){
ajax_delay = setTimeout (getsearch();,time_delayajax);
}еще{
скрытьаджаксдив();
obj_div.innerHTML =;
ajax_run = ложь;
вернуть ложь;
}
}
}
////////////////////////Получить контент поиска////////////////////// /// /
функция getsearch(){
вар temp_value = obj_input.value;
если (ajax_xmlhttp== null) {
вернуть ложь;
}иначе если(ajax_xmlhttp.readyState!=0){
ajax_xmlhttp.abort();
ajax_run_ing = ложь;
}
ajax_xmlhttp.onreadystatechange=function(){
if(ajax_run==false){ajax_xmlhttp.abort();ajax_run_ing=false;вернуть false;}
если (ajax_xmlhttp.readyState == 4) {
obj_div.innerHTML =;
if(ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304){
вар содержимое = ajax_xmlhttp.responseText;
if(contant!= && ajax_run==true){
div_word = temp_value;
obj_div.innerHTML=resetcontant(contant);
obj_div.style.display = блок;
удаленодив();удаленодив();
}еще{
скрытьаджаксдив();
}
updown_run = правда;
ajax_run_ing = ложь;
li_num=-1;
если (contant==)value_unexit=temp_value;
}
}
}
ajax_xmlhttp.open(post,url,true);
ajax_xmlhttp.setRequestHeader('Тип контента','application/x-www-form-urlencoded');
ajax_run_ing = правда;
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //Значение, отправленное в фоновый режим****************************** * ***********
}
/////////////////////////Реорганизация контента/////////////////////// //
функция resetcontant(Fun_contant){
if(Fun_contant==null || Fun_contant==)return ;
var a=Fun_contant.substring(1,Fun_contant.length-1);
if(Fun_contant==null || Fun_contant==)return ;
вар b=a.split('');
вар с;
вард;
d=<ul>;
for(var i in b){
c=b[i].split(,);
//************************************************ ***************
d=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>about +c [1]+результат</span>+c[0]+</li>;
//************************************************ ***************
}
d=d+<li onmousedown=/input_focus=true;li_down=-1;/ onmouseup=/li_down=-1/ onmousemove=/moveli();/><span><a class=/shutajaxdiv/ onclick=/hideajaxdiv( );/>Закрыть</a></span></li>
д=д+</ul>;
вернуть д;
}
/////////////////////////События клавиатуры////////////////////// ////
функция keydowndeal (Fun_event) {
var keyc=((window.event)?Fun_event.keyCode:Fun_event.that);
if(keyc==13){hideajaxdiv();вернуть ложь;}
если(keyc==27){
if(obj_div.style.display==block && li_num>-1)value_ed=obj_input.value=value_ing;
скрытьаджаксдив();
вернуть ложь;
}
if(keyc==40 || keyc==38){
if(div_word==obj_input.value && obj_div.style.display==none && obj_div.innerHTML!=){
obj_div.style.display = блок;
удаленоiv();
вернуть ложь;
}
если(li_num==-1){
if(div_word!=obj_input.value) вернет ложь;
}еще{
if(div_word!=value_ing) вернет ложь;
}
if(updown_run==false || ajax_run_ing==true || obj_div.style.display==none)вернуть false;
updown_delay = setTimeout (updownli (+ keyc +), time_delayupdown);
updown_run = ложь;
}
}
//////////////////////////Движение клавиш направления li//////////////////// /// //
функция updownli(Fun_key){
if(!obj_div){вернуть ложь;}
updown_run = правда;
если(li_num==-1){
if(div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}еще{
if(div_word!=value_ing){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}
если (updown_run == false) вернуть false;
если (li_num==-1)value_ing=value_ed;
если(Fun_key==40){
if(li_num<obj_div.firstChild.childNodes.length-2){
li_num++;
}еще{
li_num=-1;
}
}
если(Fun_key==38){
если(li_num>=0){
li_num--;
}еще{
li_num=obj_div.firstChild.childNodes.length-2;
}
}
если(li_num!=-1){
value_ed=obj_input.value=obj_div.firstChild.childNodes[li_num].childNodes[1].nodeValue;
}еще{
value_ed=obj_input.value=value_ing;
}
наборстиль();
}
фон ajax.asp
Скопируйте код кода следующим образом:
<%@LANGUAGE=КОДОВАЯ СТРАНИЦА VBSCRIPT=65001 %>
<%опция явный%>
<%Response.CodePage=65001%>
<%Response.Charset=utf-8 %>
<!--#include file=conn.asp-->
<%
dimSift_value
тусклый Sql,Rs,I,Num
dimContant
Содержание=
Число=10
Sift_value=replace(unescape(request.form(sift_value)),,)
Sql = выберите верхнее ключевое слово &Num&, номер совпадения из поиска, где ключевое слово типа &Sift_value&% упорядочивается по идентификатору
установите Rs=server.CreateObject(adodb.recordset)
Rs.open Sql, Conn, 1,1
если нет (Rs.eof и Rs.bof), то
от I=0 до Num-1
Contant=Contant&'&rs(0)&,&rs(1)&'
рупий
если Rs.eof, то выходим на
следующий
конец, если
ответ.Запись(Contant)
рупийблизко
установить Rs = ничего
%>