0

これは、このスレッドの続きです (ドロップダウン リストをクリックしてテキスト値を変更します) 。

HTML

<li><input type="text" id="location"></li>
<div id="locationselect"></div>

ユーザーが自分の場所をテキスト入力 id="location"に入力し始めると、AJAX を使用して、ユーザー入力で始まる場所のリストが返されます。(例: "Lon" は、London、Long Eaton などを返し、結果を順序なしリストとして)

JQuery/AJAX コード

getlocations.php

<?php

    if ($location == '') {echo "";}
    else {
        echo "<ul>";
        while($location = mysql_fetch_assoc($result)){
        echo "<li>". $location['location'] ."</li>";
        }
        echo "</ul>";
    }
?>

これはすべてうまくいきます!!! ユーザー入力が入力されると場所のドロップダウンが表示されるので、AJAX 部分が機能しています。

私が今抱えている問題は...文字を入力すると場所のリストが表示されることです。

$('#locationselect li').click(function() {
    $('#location').val($(this).text());
});

リスト アイテムがクリックされたときに、 id="location" 入力テキスト フィールドがオートコンプリートされないようです。getlocations.php ファイルに欠けているものはありますか?

これに本当に混乱しています。新しいスレッドをお詫びしますが、最後のスレッドは技術的に回答されました =) 助けてくれてありがとう。

4

1 に答える 1

1

私が正しく理解している場合は、クリックイベントを #locationselect の下の任意の li にバインドしてから、利用可能にすることをお勧めします。li 要素が読み込まれ、ajax 呼び出しでレンダリングされた後、クリック イベントをバインドする必要があります。これを試して：

$('document').ready(function(){
$('#location').keyup(function() {
    if ($('#location').length == 0) {
        $('#locationselect').hide();
    }
    $('#locationselect').html("");
    var location = $('#location').val();
    location = $.trim(location);
    $.ajax({
        type:"post",
        url:"getlocations.php",
        data:"location="+location,
        success:function(data){
            $("#locationselect").html(data);
            $('#locationselect li').click(function() {
                $('#location').val($(this).text());
            });
        }
    });
});
});
于 2013-10-28T15:30:36.847 に答える