1

我有一个 ajax 查询，它带回搜索到的名称和 id：

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();
    });

上面的 jquery 不起作用，因为我觉得我错误地使用了 'not' 属性。是否可以拆分这些值？

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 响应会向<li>您的 DOM 发送一个新的，因此您需要使用它.on()来绑定 click 事件。

$('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-uidAJAX 返回的 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 回答