Question

我创建了一个自动建议脚本，我将在我的网站上使用。问题是，在我创建自动建议的手册中，他们使用了具有相关结果的div。

当我使用div时，它会覆盖我的所有页面并破坏其顺序。我正在寻找一种方法在页面顶部显示DIV。

代码 - 有一些伪代码。

//function that uses jquery and ajax to update the autosuggest elements on key up
<input type="text" name="field1" />
<div name="auto_suggest"> </div>

提前致谢。

编辑：这是代码：

$(document).ready(function(){
$('.autosuggest').keyup(function(){

    var search_term = $(this).val();
    $.post('shit5.php', {search_term:search_term}, function(data){
        $('.result').html(data);

        $('.result li').click(function(){
            var result_value = $(this).text();
            $('.autosuggest').val(result_value);
            $('.result').html('');

        });
    });

});
});

Answer 1

在您编辑的问题上（使用$ .post代码）我看到.autosuggest上有一个keyup监听器。我认为它应该在输入上：

$('input[name=field1]').keyup(function(){

然后使用您需要的CSS为.autosuggest提供课程。如果你想用jQuery做这个，你可以：

$('div[name=auto_suggest]').css({
   'position' : 'absolute',
   top: '0px',
   left: '0px'
});

但最好是用CSS创建一个类并将其添加/删除到div。我认为div应该从一开始就隐藏起来。

编辑：

要将其放置在输入字段附近，您还可以使用：

$('input[name=field1]').keyup(function(){
    var thisposition = $(this).position();
    ...

然后将该位置分配给.autosuggest，如：

$('div[name=auto_suggest]').css({
   'position' : 'absolute',
   top: eval (thisposition.top - 15) + 'px',
   left:thisposition.left + 'px',
});

Answer 2

试试这个，它为页面提供了一点动画：

$('div[name=auto_suggest]').css({'position' : 'absolute'}).animate({top: '0px',left: '0px'}, 1000);

如何让div在页面顶部

2 个答案: