how to submit data with ajax after clicking one of the listed value on the suggestion box?

mahenda · August 29, 2019

here my sample code

<form>
    <input id="query" type="text" name="query" placeholder="search here..." autocomplete="off">
    <button type="submit" value="query" >search</button>
	<div class="sugbx"></div>
</form>

//php code, assume we already run a whole php code
......
<ul class="list-group list-unstyled" style="cursor:pointer; color: #191919; position:absolute; top:12px;">
<?php
foreach($query as $movie) {
?>
<li class="list-group-item" onClick="searchValue('<?php echo $movie["movie_name"]; ?>'),;"><?php echo $movie["movie_name"]; ?></li>
<?php } ?>
</ul>
<?php } ?>

//ajax here
$('#search').keyup(function(){
		$.ajax({
		type: 'GET',
		url: 'phpcode.php',
		data:'query='+$(this).val(),
		success: function(data){
			$('.sugbx').show();
			$('.sugbx').html(data);
		}
		});
	});
function searchValue(val) {
$('#query').val(val);
$('.sugbx').hide();
}







//ajax

the input accept the value only after selecting one of the listed value on the suggesstion box and then i have to click the submit button the problem is, how to submit the value accepted when a list is clicked

Barand · August 29, 2019

Get your searchValue() function to call the ajax request.

Barand · August 29, 2019

Here's an example which uses the "sakila" film database, displaying film titles for the selected guidance rating

<?php
include 'db_inc.php';                //  DATABASE 
$db = pdoConnect('sakila');          //  CONNECTION STUFF

//
//  PROCESS AJAX REQUESTS
//
    if (isset($_GET['ajax'])) {
        $res = $db->prepare("SELECT title
                             FROM film
                             WHERE rating = ?
                             ORDER BY title
                            ");
        $res->execute( [ $_GET['rating'] ] ) ;
        $films = $res->fetchAll();
        exit(json_encode($films)) ;
    }

//
//  GET LIST OF RATINGS FOR SELECTION
//
    $res = $db->query("SELECT DISTINCT rating
                       FROM film
                       ORDER BY rating
                      ");
    $rating_list = '';
    foreach ($res as $r) {
        $rating_list .= '<li class="w3-light-gray w3-hover-blue">'.$r['rating'].'</li>';
    }
    
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="creation-date" content="05/10/2019">
<title>Movies by Rating</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $().ready( function() {
        
        $("li").click(function() {
            var rating = $(this).html()
            $.get(
                "" ,
                {"ajax":1, "rating":rating} ,
                function (response) {
                    $("#search-results").html("")
                    $.each(response, function(k,v) {
                        $("#search-results").append(v.title+"<br>")
                    })
                } ,
                "JSON"
            )
        })
    })
</script>
</head>
<body>
    <h1>Films by Rating</h1>
    <div class="w3-ul w3-card-4 w3-margin w3-hoverable" style="width:25%; float:left; position: fixed">
        <?=$rating_list?>
    </div>
    <div id="search-results" class="w3-content w3-margin w3-padding "style="float:right; width:70%;">
    
    </div>
</body>
</html>

image.png.cd3c72ca6268e7bbffad877f45a1ea3e.png

Sign In

how to submit data with ajax after clicking one of the listed value on the suggestion box?

Recommended Posts

mahenda

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information