0

GETを介して検索ボックスの内容に基づいてHTMLを返すAJAXスクリプトに接続されたページに検索ボックスがあります。

検索ボックスのすぐ下に結果を表示するには、そのボックスを基準にした位置にdivを作成する必要があります（ボックスの位置は画面の解像度によって異なります）。これを実現するためにjQueryを使用するにはどうすればよいですか？

または、代わりにjQuery UIオートコンプリートを使用できますか？使用する場合は、どのように使用しますか？私はそれでbashを持っていましたが、HTMLを表示するのにまったく問題がありました。

編集： ここにjsfiddleリンクがあります：http： //jsfiddle.net/UxPb8/

あなたはそれがうまくいくと考えることを許されることができます、しかし検索ボックスの左側のページにもっと多くのものがあるとすぐに、ポジショニングは捨てられます、それ故にこの質問。

4

3 に答える 3

2

検索ボックスが「検索」というdivにあるとします。

次に、jQueryafter関数を使用してhtmlを追加できます。

$('#search').after(html);

作成する「div」が返されたHTMLの一部でない場合は、挿入するのは非常に簡単です。

$('#search').after("<div>" + html + "</div>");
于 2010-10-01T12:27:25.640 に答える
0

このように..（HTMLを返した後）

$('.classNameORID').append("<div style='position:relative;'>"+ data +"</div>");
于 2010-10-01T12:28:32.160 に答える
0

私はこれをすることになった：

//calculate the position
var parentDiv = $(this).parents(selector);
var top = parentDiv.position().top + parentDiv.height();
var left = $("#wrapper").width()-427; //427 is a fixed offset - it's still in the right place for any screen res

//run the search
$.ajax({
    url: 'ajax/find.php',
    data: { search: $(this).val() },
    success: function(data) {
        $("#globalFindResults")
            .css({
                'position': 'absolute',
                'top': top,
                'left': left
                })
            .html(data)
            .slideDown('fast');
    }
});
于 2010-10-06T07:01:38.503 に答える