JavaScript/jQuery adding anchor tag inside a script

Question

enter image description hereI am new to php and JavaScript/jQuery. Before starting to Learn php I somehow know a little bit of htmL and css.

I have been editing a template I just downloaded and tumbled to this problem that I have been trying to figure out to look for a workaround

My problem is I can't make the result from my searchbox redirect to my update.php page on click of the result and clear the search when no match is found, and that is the output I am trying to accomplish.

I just can't make the same action from the anchor of my table when the user clicks the name do the same with my search bar.

I hope someone can help me.

(by the way, I am a magnifier and screen reader user due to some visual disability.)

Thanks in advance :-)

<?php

$link = mysqli_connect("localhost", "root", "", "ajax_crud");

if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}

if(isset($_REQUEST['term'])){
$search_string = "SELECT * FROM name WHERE name LIKE ?";

if($stmt = mysqli_prepare($link, $sql)){
    mysqli_stmt_bind_param($stmt, "s", $param_term);

    $param_term = $_REQUEST['term'] . '%';

    if(mysqli_stmt_execute($stmt)){
        $result = mysqli_stmt_get_result($stmt);

        if(mysqli_num_rows($result) > 0){

            while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){

echo "<p>" . $row["name"] . "</p>";
            }
        } else{

echo "<p>No matches found!</p>";    

        }
    } else{
        echo "ERROR: Could not able to execute $sql. " . 
mysqli_error($link);
    }
}

 mysqli_stmt_close($stmt);
}

mysqli_close($link);
?>

/* and the script

<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){

    var inputVal = $(this).val();
    var resultDropdown = $(this).siblings(".result");
    if(inputVal.length){
        $.get("backend-search.php", {term: inputVal}).done(function(data){

          resultDropdown.html(data);
        });
    } else{
        resultDropdown.empty();
    }enter image description here
});

$(document).on("click", ".result p", function(){
$(this).parents(".search- 
box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>


/* the part of the table where I can redirect the user to the update.php 
fiLe

echo sprintf('<td><a href="update.php?id=%s">%s</a></td>', $row['id'], 
$row['name']);

this is how my index page Looks Like

this is an exampLe of a search in action

i cLicked on a resuLt from the search

the resuLt is pLaced in the searchbox on cLick

this is the update.php wherein the user shouLd be redirected upon cLicking the resuLt

i am sorry i wasn't abLe to add these Line of codes earLier. i hope this couLd cLear things and make myseLf more understandabLe.

<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
    var inputVal = $(this).val();
    var resultDropdown = $(this).siblings(".result");
    if(inputVal.length){
$.get("backend-search.php", {term: inputVal}).done(function(data){
    resultDropdown.html(data);
        });
    } else{
        resultDropdown.empty();
    }
});

$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>

Answer 1

So you have an auto complete searchbox, and the results should not auto-complete the searchbox, but instead redirect to some other page?

If so, then you have a problem, the default jquery auto complete won't help you here, so your function to add contents to result should be custom and then insert html to an object you provide styling to yourself.

something like this:

 $('input[type="text"]').on("keyup input", function(){ var inputVal = $(this).val(); var resultDropdown = document.getElementById("result"); if(inputVal.length){ //$.get("backend-search.php", {term: inputVal}).done(function(data){ // exmaple data response var data = '<a href="https://stackoverflow.com" target="_blank" onclick="console.log(\\'option 1 got clicked\\'); return true">name1</a><br><a href="https://stackoverflow.com/questions/51924046/javascript-jquery-adding-anchor-tag-inside-a-script/51927190#51927190" target="_blank" onclick="console.log(\\'option 2 got clicked\\'); return true">name2</a>'; resultDropdown.innerHTML = data; } else{ resultDropdown.innerHTML = ""; } }); 

 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <input type="text"> <div id="result"></div> </body>