Question

我有一个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>

Answer 1

我建议更改AJAX响应以包围自己<span class='ajaxname'>中的名称。这样可以更加简单地将名称与兄弟节点<span class='uid'>分开定位。否则，要排除<span class='uid'>的值，您需要做一些棘手的事情，比如暂时将其从DOM中移除以获取<li>的文本，然后将其重新放入。这太复杂了。< / p>

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

你知道什么，it works (jsfiddle)。

附录：

其他答案从未实现，因此这是一个可以说是更好的解决方案，在AJAX返回的HTML中使用data-uid属性

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

Jquery将html的值附加到输入框而不是跨度中的文本

1 个答案:

附录：