Ajax LIve Search - Onclick Populate Input Value
See my comment concerning avoiding SQL Injection attacks.
When the document becomes ready you are attempting to set event handler so that all <a>
tags within the <div id="#vehicle-output">
tag will respond to a click event. But at that point there are no such <a>
tags because you haven't done any live searches yet. Just because you then subsequently append some <a>
tags to the <div>
doesn't cause an event handler to automatically get attached retroactively.
You need to move the setting of the "click" handlers from the "document ready" handler to the "success" return. The other issue is the call $('#vehicle-output').css('display', 'none');
to hide the results from the PHP script when the input loses focus. The problem is that the <a>
element becomes invisible before the click event can possibly be taken.
You can do one of two things:
- Get rid of the focusin and focusout events altogether
$(document).ready(function(){
/// Live Search ///
$("#vehicle").keyup(function(){
var query = $(this).val();
if (query !="") {
$.ajax({
url:"includes/veh-search.php",
type:"POST",
cache:false,
data:{query:query},
success:function(data){
$("#vehicle-output").html(data);
$('#vehicle-output').css('display', 'block');
/// Click to enter result ///
$("#vehicle-output a").on("click", function(){
$("#vehicle").val($(this).html());
});
}
});
}
else {
$("#vehicle-output").html("");
$('#vehicle-output').css('display', 'none');
}
});
});
- Set a windows timer to change the CSS display value so that you are sure that the click event occurs (just be sure that you use a large enough timer value (500 ms. should do it)
$("#vehicle").focusout(function(){
window.setTimeout(function() {
$('#vehicle-output').css('display', 'none');
}, 500);
});
onClick to get the ID of the clicked button
You need to send the ID as the function parameters. Do it like this:
<button id="1" onClick="reply_click(this.id)">B1</button><button id="2" onClick="reply_click(this.id)">B2</button><button id="3" onClick="reply_click(this.id)">B3</button> <script type="text/javascript"> function reply_click(clicked_id) { alert(clicked_id); }</script>
Echo JS onclick fill function AJAX not working
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();
}
}
});
}
});
});
Related Topics
The Use of the Triple Exclamation Mark
Javascript: Location.Href to Open in New Window/Tab
Javascript Updating Values of Objects Inside List
Horizontal Scrollbar on Top and Bottom of Table
Set Values in Input Type Date and Time in JavaScript
Generate Pdf from HTML in Div Using JavaScript
Open Html5 Date Picker on Icon Click
How to Get Field Value on Change for Formitem in Antd
How Display Selected Item from Bootstrap 4 Drop-Down Item Menu
Bootstrap Slides Lagging While Using Multi Item Carousel Using Angular 6
How to Simulate Key Press Events Programmatically
Angular 2 Concatenate Variable in Interpolation
Javascript String With New Line - But Not Using \N
It Is Possible to Call Class Function from Outside Class
How to Pass 3 Parameters in Onclick Function .The Parameters Are Inside PHP Tag
Creating a Leaderboard in Html/Js