1

検索された名前と ID を返す ajax クエリがあります。

if($result)
{
    while($row=mysqli_fetch_array($result))
    {
    extract($row);
    echo "<li>".$row['first_name']." ".$row['last_name']."<span class='uid'>".$row['user_id']."</span></li>";
    }
}

私がやろうとしているのは、名前と姓を検索ボックスに追加してから、ユーザー ID を取得して別の検索ボックスに配置することです。

$('li').click(function(){
    $('.client_name').not('span.uid').val($(this).text());
    $('.listbox').hide();
    });

「not」プロパティを間違って使用していると感じるため、上記のjqueryは機能しません。これらの値を分割することは可能ですか?

htmlは次のとおりです

<div class="form_align">
        <label>
        Client Name
        </label>
        <input type="text" class="client_name" />

        <label>
        Client Account No.
        <span class="small">This is important !</span>
        </label>
        <input type="text" class="client_account_no" />
        <div class="listbox">
            <div class="nameslist">
            </div>
        </div>
        </div>
4

1 に答える 1

1

AJAX応答を変更して、名前を独自の名前で囲むことをお勧めします<span class='ajaxname'>。これにより、兄弟ノードとは別に名前をターゲットにすることが非常に簡単になります<span class='uid'>。それ以外の場合、の値を除外するには<span class='uid'>、DOMから一時的に削除してテキストを取得し、元に戻すなどのトリッキーな操作を行う必要があります<li>。非常に複雑です。

echo "<li><span class='ajaxname'>".$row['first_name']." ".$row['last_name']."</span><span class='uid'>".$row['user_id']."</span></li>";

AJAX応答は新しいものをDOMに送信するため、クリックイベントをバインドする<li>ためにを使用する必要があります。.on()

$('li').on('click', function(){
    // Get the name from its <span> and put it into the input
    $('.client_name').val($(this).find('.ajaxname').text());
    // Get the uid and put it inot .client_account_no
    $('.client_account_name').val($(this).find('.uid').text());
    $('.listbox').hide();
});

そして、あなたは何を知っていますか、それは動作します（jsfiddle）。

補遺：

他の答えは実現しなかったのでdata-uid、AJAXで返されたHTMLの属性を使用した間違いなくより良い解決策があります

// PHP supplies the user_id in an HTML attribute data-uid
echo "<li data-uid='" . $row['user_id'] . "'>".$row['first_name']." ".$row['last_name'] . "</li>";

JavaScriptの方がはるかに簡単です。

$('li').on('click', function(){
    // Get the name, which is just the <li>'s text content...
    $('.client_name').val($(this).text());
    // Get the uid from the data-uid attribute
    $('.client_account_name').val($(this).attr('data-uid'));
    $('.listbox').hide();
});
于 2012-12-01T22:24:39.703 に答える