Question

我有以下脚本通过数据库异步获取数据（分支名称）：

$(document).ready(function () {
    $("#pickup").on('keyup',function () {
        var key = $(this).val();

        $.ajax({
            url:'modal/fetch_branch.php',
            type:'GET',
            data:'keyword='+key,
            beforeSend:function () {
                $("#results").slideUp('fast');
            },
            success:function (data) {
                $("#results").html(data);
                $("#results").slideDown('fast');
                // use `on` as elements are added dynamically
                $( "#results" ).on("click", "a", function() {
                // take `text` of a clicked element and set it as `#pickup` value
                 $( "#pickup" ).val( $( this ).text() );
                // return false to prevent default action
              return false;
                });
            }
        });
    });
});

HTML

<input type="text" class="form-control empty" name="keyword" id="pickup" placeholder="&#xf041;"/>

一切都运行良好，当用户点击链接时，数据（分支名称）会被添加到text input field，这正是需要发生的事情，但是......

我的问题

用户点击了所需的链接（分支名称）后，我需要删除剩余的链接（数据/分支名称）......

从上图可以看出斯泰伦博斯被选中，因此我需要删除其他链接......

任何建议我如何能够实现以下目标非常感谢。

更新

以下是请求的fetch_branch.php文件：

if(mysqli_num_rows($result) < 1 ) // so if we have 0 records acc. to keyword display no records found
{
    echo '<div id="item">Ah snap...! No results found :/</div>';
} else {

    while ($row = mysqli_fetch_array($result)) //outputs the records
    {
        $branch = $row['location'];
        echo '<a style="cursor:pointer">'.$brach.'</a>';
        echo'<br />';
    }//while
}//else
}//if

Answer 1

我在这里做出了与其他答案不同的假设，因为我无法理解为什么你要点击一个 删除下拉列表中的其他链接！

从上图可以看出斯泰伦博斯被选中，因此我需要其他链接被删除...

如果确实如此，你会想接受@ acontell的回答。

但是，如果您希望点击的链接从列表中消失，您可以在点击处理程序中尝试这样的操作：

$("#results").on("click", "a", function() { $this = $(this); $("#pickup").val($this.text()); // Remove the linebreaks output by modal/fetch_branch.php $this.next('br').remove(); // Remove the clicked <a> tag itself $this.remove(); // return false to prevent default action return false; });

如果您希望整个下拉列表在点击时消失，请执行以下操作:(我认为这是常见的，不是吗？）

$("#results").on("click", "a", function() { $("#pickup").val($(this).text()); $("#results").slideUp(); return false; });

Answer 2

在点击事件中尝试$(this).siblings().remove();。所以你的功能应该是这样的，

$(document).ready(function () {
    $("#pickup").on('keyup',function () {
        var key = $(this).val();

        $.ajax({
            url:'modal/fetch_branch.php',
            type:'GET',
            data:'keyword='+key,
            beforeSend:function () {
                $("#results").slideUp('fast');
            },
            success:function (data) {
                $("#results").html(data);
                $("#results").slideDown('fast');
                // use `on` as elements are added dynamically
                $( "#results" ).on("click", "a", function() {
                    // take `text` of a clicked element and set it as `#pickup` value
                    $( "#pickup" ).val( $( this ).text() );
                    //------------------
                    //only this line is newly added
                    //------------------
                    $(this).siblings().remove();
                    //------------------
                    // return false to prevent default action
                    return false;
                });
            }
        });
    });
});

Answer 3

选择项目并将文本设置为输入后，添加以下代码段

 $(this).siblings().remove();

这将删除所选项目的所有兄弟姐妹

或

$( "#results a" ).not(this).remove();

Answer 4

如果我没有弄错的话，我认为可以通过对代码进行一些修改来完成：

...
success:function (data) {
    $("#results").html(data);
    $("#results").slideDown('fast');
    // use `on` as elements are added dynamically
    $( "#results" ).on("click", "a", function() {
        // take `text` of a clicked element and set it as `#pickup` value
        $( "#pickup" ).val( $( this ).text() );

        // --MODIFICATION-- Remove all elements except this.
        $("#results").html(this);

        // return false to prevent default action
        return false;
    });
}
...

我们的想法是将链接容器的html（它包含所有链接）替换为所单击链接的HTML。从本质上讲，它将删除所有内容，只留下被点击的内容。

这里有fiddle（没有AJAX）代表这个想法。希望它有所帮助。

Answer 5

请查看此链接以获取有效的演示。 Click Here 我使用虚拟数据并将更改后的keyup事件用于focus进行测试，您可以对其进行更多修改（如果这有帮助）。

我希望这会对你有所帮助。

谢谢，

Answer 6

我不明白你。但是，如果您的意思是在点击链接后隐藏结果，则可以使用

$("#results").slideUp('fast');

在onclick事件中。您也可以删除其他链接并实时点击。

$("#results").on("click", "a", function() {
    $("#pickup" ).val($(this).text());
    $(this).addClass('selected');
    $("#results a:not(.selected)").remove();
    $(this).removeClass('selected');
    return false;
});

Ajax / Javascript - 单击1个链接后删除链接

我的问题

6 个答案: