1.想做一个想百度搜索页的效果,支持在搜索结果中通过上下键选择不同结果,但是当我按向上键的时候,文本框中的光标却跑到前面,如何让其一直停留在最后面?
2.代码:
//js
$('.searchInput').click(function(e){
e.stopPropagation();
}).keyup(function(){
var newVal = $(this).val();
if(newVal.toLowerCase() == 'jy' || newVal.toLowerCase() == 'sy'){
$('.fixed-input .search-result').slideDown('fast');
}else{
if(!$(this).is(":focus")){
$('.fixed-input .search-result').slideUp('fast');
}
}
}).keydown(function(e){
var key = event.keyCode;
var curIndex = $('.search-result li.cur').size() > 0 ? $('.search-result li.cur').index() : -1;
if (key == 13){
$('.search-result li.cur a').click();
} /*回车搜索*/
if ($.trim($(this).val()).length == 0)
return;
if (key == 38) { /*向上按钮*/
if(curIndex > 0){
$('.search-result li').eq(curIndex - 1).addClass('cur').siblings('li').removeClass('cur');
}else if(curIndex == -1){
$('.search-result li').eq(0).addClass('cur');
}else{
$('.search-result li').eq($('.search-result li').size() - 1).addClass('cur').siblings('li').removeClass('cur');
}
var inputVal = $('.search-result li.cur a span').text();
$(this).val(inputVal);
//TODO 如果是向上按钮,则需设置光标位置
} else if (key == 40) {/*向下按钮*/
if(curIndex == -1){
$('.search-result li').eq(0).addClass('cur');
}else if(curIndex < $('.search-result li').size() - 1){
$('.search-result li').eq(curIndex + 1).addClass('cur').siblings('li').removeClass('cur');
}else{
$('.search-result li').eq(0).addClass('cur').siblings('li').removeClass('cur');
}
$(this).val($('.search-result li.cur a span').text());
}
});
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
这种控件现成的非常多噢。
jQuery UI Autocomplete
Bootstrap typeahead.js
好像是应该添加prevent阻止默认事件