Search without having to SUBMIT

Asked

Viewed 235 times

2

I have the following code and I don’t know how to make it search without I need to give Ubmit, someone can help me?

HTML

<html>
<head>
    <title>Data Searching Without Page Refresh</title>
</head>
<body>
<!-- 
we will preload the loader image 
to show it instantly on search 
-->
<div style='display:none;'>
    <img src="images/ajax-loader.gif" />
</div>

<form name = "form">

    <div>Enter name then click the Search Button or just press Enter</div>

    <!-- where our search value will be entered -->
    <input type="text" name="name" id="fn" />

    <!-- This button will call our JavaScript Search functions -->
    <input type="submit" value="Search" id="search-btn" />
</form>

<div id = "s-results">
    <!-- This is where our search results will be displayed -->
</div>

<!-- import jQuery file -->
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>

<script type = "text/javascript">
$(document).ready(function(){
    //load the current contents of search result
    //which is "Please enter a name!"
    $('#s-results').load('search_results.php').show();


    $('#search-btn').click(function(){
        showValues();
    });

    $(function() {
        $('form').bind('submit',function(){
            showValues(); 
            return false; 
        });
    });

    function showValues() {
        //loader will be show until result from
        //search_results.php is shown
        $('#s-results').html('<p><img src="images/ajax-loader.gif" /></p>');  

        //this will pass the form input
        $.post('search_results.php', { name: form.name.value },

        //then print the result
        function(result){
            $('#s-results').html(result).show();
        });
    }

});
</script>
</body>
</html>

PHP FILE

<?php
include_once("config_open_db.php");

//define index
isset( $_REQUEST['name'] ) ? $name=$_REQUEST['name'] : $name='';

// just to escape undesirable characters
$name = mysql_real_escape_string( $name );

if( empty( $name )){
    // this will be displayed if search value is blank
    echo "Please enter a name!";
}else{
    // this part will perform our database query
    $sql = "select * from TBL where COLUMN like '%$name%'";

    $rs = mysql_query( $sql ) or die('Database Error: ' . mysql_error());
    $num = mysql_num_rows( $rs );

    if($num >= 1 ){
        // this will display how many records found
        // and also the actual record
        echo "<div style='margin: 0 0 10px 0; font-weight: bold;'>$num record(s) found!</div>";

        while($row = mysql_fetch_array( $rs )){
            echo "<div>" . $row['firstname'] . " " . $row['lastname'] ."</div>";
        }
    }else{
        // if no records found
        echo "<b>Name not found!</b>";
    }
}
?>
php javascript mysql ajax

  • You want the function showValues() run without having to click the button? What event should I search for? Can you explain better?

  • What I want is that while I’m writing, it automatically searches without me having to Ubmit or clicking on the Ubmit button.. Just write..

1 answer

2


You can assign a function to the eventp KeyUp textbox:

$("#fn").keyup(function() {
    if($(this).val().length >= 3) // só começa a pesquisa após digitar três caracteres
        showValues();
});

I added a check if the number of characters typed is greater than three, so as not to "force" the server too much. If you want to change the quantity or remove the if completely according to your need.

  • The javascript keyup in this case replaces Submit. Congratulations Marcusvinicius

Browser other questions tagged php javascript mysql ajax

You are not signed in. Login or sign up in order to post.