I have the following script which fetches data (branch names) asynchronously via database:

$(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;"/>

Everything is working perfectly, When user clicks link the data (branch name) gets added to the text input field, which is exactly what needs to happen, however...

My Problem

After user has clicked on desired link (branch name) I need the remaining links (data / branch names) to get removed...

As can be seen from above image Stellenbosch was selected, thus I need the other links to get removed...

Any advice how I can achieve the following greatly appreciated.

UPDATE

Here is the fetch_branch.php file as requested:

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

I have the following script which fetches data (branch names) asynchronously via database:

$(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;"/>

Everything is working perfectly, When user clicks link the data (branch name) gets added to the text input field, which is exactly what needs to happen, however...

My Problem

After user has clicked on desired link (branch name) I need the remaining links (data / branch names) to get removed...

As can be seen from above image Stellenbosch was selected, thus I need the other links to get removed...

Any advice how I can achieve the following greatly appreciated.

UPDATE

Here is the fetch_branch.php file as requested:

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

• javascript
• php
• jquery
• ajax
• html

• Some html would be great – Alex Commented Oct 6, 2016 at 8:23
• Sorry about that just added the input field – Tim C Commented Oct 6, 2016 at 8:23
• 1 Please add the html for the links like Stellenbosch , Strand – brk Commented Oct 6, 2016 at 8:24
• Inside click handler, which btw shouldn't be set inside success callback nor nested inside keyup event, use $( "#results a" ).not(this).remove(); – A. Wolff Commented Oct 6, 2016 at 8:25
• @user2181397 That gets fetched in a separate file via, PHP from DB, will update Now – Tim C Commented Oct 6, 2016 at 8:25

6 Answers 6

I'm making a different assumption from the other answers here, because I can't understand why you'd want to remove the other links in the dropdown, after clicking one!

As can be seen from above image Stellenbosch was selected, thus I need the other links to get removed...

If that is indeed the case, you'll want to accept @acontell's answer.

However, if you'd like the clicked link to disappear from your list, you might try something like this in the click handler:

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

In case you'd like the whole dropdown to disappear when clicked, do this: (which, I think is common, no?)

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

try $(this).siblings().remove(); inside your click event. so your function should look like this,

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

After selecting the item and setting the text to input add the following code snippet

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

This removes all the sibling li s of the selected item

or

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

If I'm not mistaken, I think it could be done with a little modification to your code:

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

The idea is to substitute the html of the link container (it contains all the links) with the HTML of the clicked link. In essence, it will remove all and leave only the clicked one.

Here's a fiddle (without AJAX) that represents the idea. Hope it helps.

Please check this link for a working demo. Click Here I used dummy data and use changed keyup event to focus for testing you can modify it more (if this helps).

I hope this will help you.

Thanks,

I don't understand you. However, if you mean hide result after link clicked, you can use

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

within onclick event. Also you can remove other links and live clicked.

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