Question

在此处输入图片描述我是php和JavaScript / jQuery的新手。在开始学习php之前，我以某种方式知道htmL和CSS。

我一直在编辑我刚刚下载的模板，发现这个问题是我一直在努力寻找解决方法的问题

我的问题是，单击结果后，我无法从搜索框将结果重定向到update.php页面，并且在找不到匹配项时清除搜索，这就是我要完成的输出。 / p>

当用户单击名称时，我只是无法通过表的锚点执行相同的操作。

我希望有人能帮助我。

（顺便说一句，由于某些视觉障碍，我是放大镜和屏幕阅读器用户。）

预先感谢：-）

<?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

对不起，我不愿意添加这些代码行earLier。我希望这可以帮助我理解一切。

<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

因此，您有一个自动完成的搜索框，结果不应自动完成该搜索框，而应重定向到其他页面？

如果是这样，那么您就遇到问题了，默认的jquery自动完成功能对您无济于事，因此添加内容到结果中的函数应该是自定义的，然后将html插入到您提供样式的对象中。

类似这样的东西：

$('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>

JavaScript / jQuery在脚本内添加锚标记

1 个答案: