Jump to content

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

Recommended Posts

here my sample code

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

//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;">
foreach($query as $movie) {
<li class="list-group-item" onClick="searchValue('<?php echo $movie["movie_name"]; ?>'),;"><?php echo $movie["movie_name"]; ?></li>
<?php } ?>
<?php } ?>

//ajax here
		type: 'GET',
		url: 'phpcode.php',
		success: function(data){
function searchValue(val) {


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 

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

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

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

    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)) ;

    $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>
<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()
                "" ,
                {"ajax":1, "rating":rating} ,
                function (response) {
                    $.each(response, function(k,v) {
                } ,
    <h1>Films by Rating</h1>
    <div class="w3-ul w3-card-4 w3-margin w3-hoverable" style="width:25%; float:left; position: fixed">
    <div id="search-results" class="w3-content w3-margin w3-padding "style="float:right; width:70%;">


Share this post

Link to post
Share on other sites

Join the conversation

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

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.

  • 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.