Echo JS onclick fill function AJAX not working

问题: I have a search bar with AJAX, MySQL, PHP, and JS. The search bar gives live search results in a div in a list and works in that respect. My problem is the live search re...

问题:

I have a search bar with AJAX, MySQL, PHP, and JS. The search bar gives live search results in a div in a list and works in that respect.

My problem is the live search results in the div list when clicked on do not fill the search bar's input. Nothing happens and the list just stays open unless I click out of it. I used to have it working in my old code where when you click on any result it fills the search bar's input, but ever since I rewrote the whole code I can't figure out why the onclick and fill functions aren't working now.

How can I fix this code so that when a user clicks on one of the results in the live search result list it fills the search bar's input?

Here is what I've tried and currently have as my code in the following files:

index.php

<form>  
 <input type="text" id="search" class="search" data-js="form-text" 
 placeholder="Search Over 100+ Resources..." autocomplete="off">
 <button type="submit" class="Button" value="Submit"><i class="fa fa- 
 search"></i></button>
 <div id="display"></div>
 <div id="backspace" style="display:none"></div>
</form>

script.js

//Getting value from "ajax.php".
function fill(Value) {
//Assigning value to "search" div in "index.php" file.
$('#search').val(Value);
//Hiding "display" div in "index.php" file.
$('#display').hide();
}
$(document).ready(function() {
//On pressing a key on "Search box" in "indexd.php" file. This function will 
be called.
$("#search").keyup(function() {
//Assigning search box value to javascript variable named as "name".
$('#display').hide();
$('#backspace').css("display", "none");
var name = $('#search').val();
//Validating, if "name" is empty.
if (name == "") {
   //Assigning empty value to "display" div in "index.php" file.
   $('#backspace').css("display", "block");
}
//If name is not empty.
else {
    //AJAX is called.
    $.ajax({
        //AJAX type is "GET".
        type: "GET",
        //Data will be sent to "ajax.php".
        url: "ajax.php",
        //Data, that will be sent to "ajax.php".
        data: {
            //Assigning value of "name" into "search" variable.
            search: name
        },
        //If result found, this funtion will be called.
        success: function(html) {
            //Assigning result to "display" div in "index.php" file.
            $("#display").html(html).show();
        }
    });
   }
 });
});

ajax.php

<?php
//Including Database configuration file.
include "db.php";
//Getting value of "search" variable from "script.js".
if (isset($_GET['search'])) {
//Search box value assigning to $Name variable.
$Name = $_GET['search'];
//Search query.
$Query = "SELECT Name FROM search WHERE Name LIKE '$Name%' LIMIT 5";
//Query execution
$ExecQuery = MySQLi_query($con, $Query);
//Creating unordered list to display result.
    if ($ExecQuery->num_rows > 0) {
          echo "<ul>";
          while ($Result = MySQLi_fetch_array($ExecQuery)) {
            echo "<li onclick='fill".$Result['Name']."'>".$Result['Name']." 
     </li>";
     }
    echo "</ul>";
   }
  }
 die();
?>

回答1:

you can use the ` sign instead of the single and double quotation for javascript.

Here you should just update the line 16 at ajax.php file like this.

echo "<li onclick='fill(`".$Result['Name']."`)'>".$Result['Name']." 

Complete code ajax.php file

<?php
//Including Database configuration file.
include "db.php";
//Getting value of "search" variable from "script.js".
if (isset($_GET['search'])) {
//Search box value assigning to $Name variable.
$Name = $_GET['search'];
//Search query.
$Query = "SELECT Name FROM search WHERE Name LIKE '$Name%' LIMIT 5";
//Query execution
$ExecQuery = MySQLi_query($con, $Query);
//Creating unordered list to display result.
    if ($ExecQuery->num_rows > 0) {
          echo "<ul>";
          while ($Result = MySQLi_fetch_array($ExecQuery)) {
            echo "<li onclick='fill(`".$Result['Name']."`)'>".$Result['Name']." 
     </li>";
     }
    echo "</ul>";
   }
  }
 die();
?>

JS codes.

//Getting value from "ajax.php".
function fill(Value) {
//Assigning value to "search" div in "index.php" file.
$('#search').val(Value);
//Hiding "display" div in "index.php" file.
$('#display').hide();
}
$(document).ready(function() {
//On pressing a key on "Search box" in "indexd.php" file. This function will be called.
$("#search").keyup(function() {
//Assigning search box value to javascript variable named as "name".
$('#display').hide();
$('#backspace').css("display", "none");
var name = $('#search').val();
//Validating, if "name" is empty.
if (name == "") {
   //Assigning empty value to "display" div in "index.php" file.
   $('#backspace').css("display", "block");
}
//If name is not empty.
else {
    //AJAX is called.
    $.ajax({
        //AJAX type is "GET".
        type: "GET",
        //Data will be sent to "ajax.php".
        url: "ajax.php",
        //Data, that will be sent to "ajax.php".
        data: {
            //Assigning value of "name" into "search" variable.
            search: name
        },
        //If result found, this funtion will be called.
        success: function(html) {
          if (html == '<ul><li>No Result Found!</li></ul>') {
             $('#no-results').css("display", "block");
          }else{
             //Assigning result to "display" div in "index.php" file.
             $("#display").html(html).show();
           }
        }
    });
   }
 });
});
  • 发表于 2019-03-26 18:21
  • 阅读 ( 316 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除