CODEWITHSUNDEEP
javascriptphpjqueryhtml
user3517652
user3517652

Reputation: 94

How to press "Enter" to redirect to other page?

I am working on search function which I did it well to get what result I want. I have a search text field which can allow user to key in the value and JavaScript will help me get the relevant data for the text field value. Now I want my text field can be function when I press on it using button "Enter". Once I press on "Enter" button, it will redirect me to a new page which shows all the relevant data of the keyword I key in in the text field.

This is my JavaScript and HTML code inside HTML page:

<script>
$(document).ready(function() {  

    // Icon Click Focus
    $('div.icon').click(function(){
        $('input#search').focus();
    });

    // Live Search
    // On Search Submit and Get Results
    function search() {
        var query_value = $('input#search').val();
        $('b#search-string').html(query_value);
        if(query_value !== ''){
            $.ajax({
                type: "POST",
                url: "search.php",
                data: { query: query_value },
                cache: false,
                success: function(html){
                    $("ul#results").html(html);
                }
            });
        }return false;    
    }

    $("input#search").live("keyup", function(e) {
        // Set Timeout
        clearTimeout($.data(this, 'timer'));

        // Set Search String
        var search_string = $(this).val();

        // Do Search
        if (search_string == '') {
            $("ul#results").fadeOut();
            $('h4#results-text').fadeOut();
        }else{
            $("ul#results").fadeIn();
            $('h4#results-text').fadeIn();
            $(this).data('timer', setTimeout(search, 0));
        };
    });

});
</script>

SEARCH<input type="text" id="search" autocomplete="off">
                    <ul id="results" style="display:none"></ul>

After keyin value inside the text, JavaScript will call search.php to get all the relevant data. But I can't click on text field to show all value. Hope you guy can give me a solution to work on it. Thanks in advanced.

Upvotes: 0

Views: 2878

Answers (2)

David Corbin
David Corbin

Reputation: 514

You could make it a form so that it would submit when the user hits enter.

<form method="get" action="search page.php" onsubmit="return validate();">
    SEARCH<input type="text" id="search" autocomplete="off">
    <ul id="results" style="display:none"></ul>
</form>

<script type="text/JavaScript">
function validate() {
    //If the form value is "" (nothing)
    if (document.getElementById("search").value == "") {
        return false; //Stop the form from submitting
    }
    return true;
}
</script>

Upvotes: 1

MH2K9
MH2K9

Reputation: 12039

Try this and use jQuery 1.8 or minimum.

$("input#search").live("keyup", function(e)
        if(e.which == 13) {
            //perform your operations
        }
    });

Upvotes: 1

Related Questions