Jump to content

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


mahenda
 Share

Recommended Posts

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 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.