JQuery.autocimplete. Как обработать нажатие Enter без выбора значения
Т.е. есть код:
задача которого достаточно проста - ввести первые буквы, если в списке есть - выбираешь и посылается запрос на сервер, который возвращает требуемый HTML-код. А если пользователь нажал Enter - мне нужно введеные буквы передать другому скрипту - и получить от него данные. Первая часть работает как и задумано - а вот как мне обработать нажатие Enter? Пробовал вариант - не связывать в цепочку вызовы - тот же результат - при нажатии Enter происходит выбор первого слова, начинающегося на эту букву. Но мне нужно совершенно не то. Можно конечно устанавливать флаг, при селекте его сбрасывать а при закрытии проверять - но тогда хъерня получается какая-то
Код:
jQuery("#Book_book_name").autocomplete({
source: "/books/book/autocomplete",
minLength: 1,
zIndex: 9999,
selectFirst:false,
autoFill:false,
selectOnly:false,
formatResult: function(data,i,n){
},
select:function(event, ui){
$.ajax({
url: "/books/book/viewajax/id/"+ui.item.id,
cache: false,
success: function(html){
$("#notfound").remove();
$("#resultaccess").append(html);
}
} );
return true;
},
change:function(event,ui){
//$('#Book_book_name').val('');
// alert('OOOO');
},
close:function(event,ui){
//$('#Book_book_name').val('');
//alert('OOOO');
}
}).keypress(function(e){
if(e.keyCode==13)
{
if($(this).value == '')return;
//alert(this.value);
$.ajax({
url: "/books/book/viewajaxlist?term="+this.value,
cache: false,
success: function(html){
$("#notfound").remove();
$("#resultaccess").append(html);
}
} );
}
});
source: "/books/book/autocomplete",
minLength: 1,
zIndex: 9999,
selectFirst:false,
autoFill:false,
selectOnly:false,
formatResult: function(data,i,n){
},
select:function(event, ui){
$.ajax({
url: "/books/book/viewajax/id/"+ui.item.id,
cache: false,
success: function(html){
$("#notfound").remove();
$("#resultaccess").append(html);
}
} );
return true;
},
change:function(event,ui){
//$('#Book_book_name').val('');
// alert('OOOO');
},
close:function(event,ui){
//$('#Book_book_name').val('');
//alert('OOOO');
}
}).keypress(function(e){
if(e.keyCode==13)
{
if($(this).value == '')return;
//alert(this.value);
$.ajax({
url: "/books/book/viewajaxlist?term="+this.value,
cache: false,
success: function(html){
$("#notfound").remove();
$("#resultaccess").append(html);
}
} );
}
});
Блин, вот я лохопет!
Это же JavaScript.
В обработчике обозначь объект как-нибудь типа var _that = this
И в $.ajax используй уже значение _that.value.
А у тебя в в $.ajax получается ты используешь this.value объёкта $.ajax
Это же JavaScript.
В обработчике обозначь объект как-нибудь типа var _that = this
И в $.ajax используй уже значение _that.value.
А у тебя в в $.ajax получается ты используешь this.value объёкта $.ajax
Так надо сначала value ему назначить по keypress. А у тебя получается в keypress - this.value, и от отрабатывает то что в Input написано (по логике то же самое и в value).
Вот не разбирался с jquery-ui особо. Но как-то так, догадываюсь.
Вот не разбирался с jquery-ui особо. Но как-то так, догадываюсь.
Цитата: mfender
Блин, вот я лохопет!
Это же JavaScript.
В обработчике обозначь объект как-нибудь типа var _that = this
И в $.ajax используй уже значение _that.value.
А у тебя в в $.ajax получается ты используешь this.value объёкта $.ajax
Это же JavaScript.
В обработчике обозначь объект как-нибудь типа var _that = this
И в $.ajax используй уже значение _that.value.
А у тебя в в $.ajax получается ты используешь this.value объёкта $.ajax
точно блин. я совсем тупанул что контекст this меняется. Спасибо. Действительно причина в этом. Все работает.
Пример работающего кода - avabook.net - получи книгу бесплатно
Вот так выглядит итоговый код:
Вот так выглядит итоговый код:
Код:
<script type="text/javascript">
$(document).ready(function(){
jQuery("#Book_book_name").autocomplete({
source: "/books/book/autocomplete",
minLength: 1,
zIndex: 9999,
selectFirst:false,
autoFill:false,
selectOnly:false,
// formatItem: function(data,i,n,value){
// return data[0]+'<em style="position:absolute;bottom:-2px;right:5px;font-size:0.8em;">'+data[1]+'</em>';
// },
formatResult: function(data,i,n){
},
select:function(event, ui){
if($('.post-tag:contains('+$('#Book_book_name').val()+')').text() != '')
return false;
$.ajax({
url: "/books/book/viewajax/id/"+ui.item.id,
cache: false,
success: function(html){
$("#notfound").remove();
$("#resultaccess").append(html);
}
} );
return true;
},
change:function(event,ui){
},
close:function(event,ui){
}
}).keypress(function(e){
if(e.keyCode==13)
{
if(this.value == '')return;
var _this = this;
$.ajax({
url: "/books/book/viewajaxlist?term="+_this.value,
cache: false,
success: function(html){
$("#notfound").remove();
$("#resultaccess").append(html);
}
});
}
$("#Book_book_name").autocomplete('close');
});
});
</script>
$(document).ready(function(){
jQuery("#Book_book_name").autocomplete({
source: "/books/book/autocomplete",
minLength: 1,
zIndex: 9999,
selectFirst:false,
autoFill:false,
selectOnly:false,
// formatItem: function(data,i,n,value){
// return data[0]+'<em style="position:absolute;bottom:-2px;right:5px;font-size:0.8em;">'+data[1]+'</em>';
// },
formatResult: function(data,i,n){
},
select:function(event, ui){
if($('.post-tag:contains('+$('#Book_book_name').val()+')').text() != '')
return false;
$.ajax({
url: "/books/book/viewajax/id/"+ui.item.id,
cache: false,
success: function(html){
$("#notfound").remove();
$("#resultaccess").append(html);
}
} );
return true;
},
change:function(event,ui){
},
close:function(event,ui){
}
}).keypress(function(e){
if(e.keyCode==13)
{
if(this.value == '')return;
var _this = this;
$.ajax({
url: "/books/book/viewajaxlist?term="+_this.value,
cache: false,
success: function(html){
$("#notfound").remove();
$("#resultaccess").append(html);
}
});
}
$("#Book_book_name").autocomplete('close');
});
});
</script>
Вот эта фигня в JavaScript здорово напрягает. Сам с ней постоянно маюсь. Тяжело переключаться с более подробных языков на JavaScript/