Чтение RSS каналов

Форум

Открыть Ответить

Поиск AJAX jquery - небольшая трабла...

0

0
1
21.06.2011 09:10:05
Привет, вот пишу систему поиска на jquery и фактически написал, но опять же остались вопросы, почему обработчику пхп достаются слова, предшествующие окончательному слову? Например слово test ввожу, но поиск уже пытается искать по:

t
te
tes

Хотя как видно из моего кода, таймер сбрасывается при факте нового ввода и по идее отсчёт идёт опять с исходного значения.



function seu(value) {
var cu = 2;
var users = $("#users");
var itog = $("#itog");
var timer = setInterval(function(){
cu--;
$("#secunda").html('<br><b>ввод данных доступен</b> '+cu);
$("#seu").keyup(function(){
clearInterval(timer);
});

itog.html('<br><img src=images/ajax-loader.gif>');
if(cu <= 0 ) {
users.fadeTo(500, 0.4);
$("#secunda").html('');
$.post(
'../plugins/users/admin/ajax.inc.admin/usersload.php',
{
act: "users",
id: value
},
function (data) {
users.html(data);
users.fadeTo(500, 1);
}
);
$.post(
'../plugins/users/admin/ajax.inc.admin/usersload.php',
{
act2: "itog",
id: value
},
function (data) {
itog.html(data);
}
);

clearInterval(timer);
}
},1000);
}


и форма поиска


<input style=\"width: 70%; font-size:20px;\" type=text id=seu value='' onKeyUp = 'seu(this.value);' >


скрипт пхп обработчика не стану приводить, там и так ясно, получает значение и он выводит данные из БД, вот только казус, откуда пхп "знает" историю ввода, до окончательного варианта слова test?

Весь прикол в том, что визуально при факте ввода таймер сбрасывается на исходную, но тем не менее данные вводимые до этого остаются доступными сценарию... Ведь по логике переменная value должна обновляться при каждом новом вводе в поле поиска... Честно, немного запутался и потому пришёл посоветоваться сюда.

Помогите пожалуйста, почему сценарий помнит всю историю ввода, мне ведь надо только то, что было введено в последний раз.


Версия PHP: PHP 5
Сервер: Локальный сервер
3.85

3.85
2
21.06.2011 09:40:43
специально для теста исключил пост запросы из скрипта, вместо них алерт функция. показывающая значение value при срабатывании когда таймер кончился.


function seu(value) {
var cu = 6;
var val = value;
var timer = setInterval(function(){
cu--;
$("#seu").keyup(function(){
clearInterval(timer);
});

$("#secunda").html('<br><b>ожидание ввода</b> <font size=14 color=red>'+cu+'</font>');
if(cu == 0 ) {

$("#secunda").html('');

alert(val);

clearInterval(timer);
}
},1000);
}


<input style=\"width: 70%; font-size:20px;\" type=text id=seu value='' onKeyUp = 'seu(this.value);' >


По моей логике, после окончания ввода и отсчёта таймера и срабатывания алерт, в окошке алерта должно быть то значение, которое было последним, однако попробуйте монотонно ввести в поле поиска, например 7777, в алерте будет то, что вводилось до окончательного варианта поиска. В чём дело?
3.85

3.85
3
21.06.2011 10:39:47
Всё, вроде понял суть этой проблемы, зря я скрипту подсовываю переменную value, он её норовит в массив загнать, потому и поиск последовательно искал по тем значением, которые присваивались в процессе ввода переменной value.

Так что, в окончательной версии я вовсе исключил из фукции эту переменную, в пост передал эту инструкцию

$("#seu").val()

В результате живой поиск стал работать более корректно. Поставил задержку ожидания ввода 2, т.е. по сути 1 секунду скрипт ждёт нового ввода в противном случае выполняет инструкции ПОСТ и передаёт данные.

Надеюсь, кому то мой вопрос переросший в небольшой урок станет полезным, при создании быстрого поиска на сайте, некий аналог google.

Спасибо за внимание =)


Версия PHP: PHP 5
Сервер: Локальный сервер
3.85

3.85
4
21.06.2011 10:48:34
Вот окончательный вариант моего JS jQuery скрипта быстрого поиска как в гугл

function seu(value) {
var cu = 2;
var users = $("#users");
var itog = $("#itog");
var timer = setInterval(function(){
cu--;
$("#seu").keyup(function(){
clearInterval(timer);
});

$("#secunda").html('<br><b>ожидание окончания ввода данных</b>');
if(cu == 0 ) {
itog.html('<br><img src=images/ajax-loader.gif>');
users.fadeTo(500, 0.4);
$("#secunda").html('');

$.post(
'../plugins/users/admin/ajax.inc.admin/usersload.php',
{
act: "users",
id: $("#seu").val()
},
function (data) {
users.html(data);
users.fadeTo(500, 1);
}
);
$.post(
'../plugins/users/admin/ajax.inc.admin/usersload.php',
{
act2: "itog",
id: $("#seu").val()
},
function (data) {
itog.html(data);
}
);

clearInterval(timer);
}
},1000);
}


Надеюсь не надо напоминать вам, что нужно подключить в хеддере библиотечку jquery.min для работы этого Аякс приложения.

Данный вариант я использую в админке сайта, для быстрого поиска нужного юзера из базы, мой скрипт например умеет понимать и ключи обращения характера поиска, например mail:user@www.ru ищет всех юзеров на сайте у которых есть такой ящик, так же и частичное совпадение ищет, например mail:www.ru найдёт всех юзеров у кого ящик находится в этом доменом имени

и всё моментально без перезагрузки текущей страницы админки.


Версия PHP: PHP 5
Сервер: Локальный сервер
3.85

3.85
Открыть Ответить
таймеропятьtimerhtmlusersquotkeyupjqueryмоегоitogкодапоискидееclearintervalfunction
Хотите опробовать SLAED CMS в действии?

Технологии

PHP MySQL HTML 5 CSS 3 jQuery jQuery UI

Контакты

  • D-49179, Deutschland
    Ostercappeln, Im Siek 6
  • +49 176 61966679

  • https://slaed.net
Идеи и предложения
Обратная связь