2

Tenho o seguinte código e nao sei como fazer ele pesquisar sem eu precisar de dar submit, alguem me pode ajudar?

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>";
    }
}
?>
2
  • Você quer que a função showValues() seja executada sem que tenha que clicar no botão? Em qual evento então deveria realizar a pesquisa? Pode explicar melhor? Commented 1/05/2015 às 17:31
  • O que quero é que, enquanto estou a escrever, ele vai pesquisando automaticamente sem eu ter que fazer submit ou clicar no botao do submit.. Apenas escrever..
    – thecreator
    Commented 1/05/2015 às 17:33

1 Resposta 1

2

Pode atribuir uma função ao eventp KeyUp do textbox:

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

Eu adicionei uma verificação se a quantidade de caracteres digitados é maior que três, para não "forçar" demais o servidor. Se quiser altere a quantidade ou remova o if completamente conforme sua necessidade.

1
  • O Keyup do javascript nesse caso substitui o submit. Parabéns MarcusVinicius Commented 5/07/2015 às 23:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .