CODEWITHSUNDEEP
jquery
user1434156
user1434156

Reputation:

Instant Search: Function is not defined error

I have a built a basic php/MySQL search. My form uses a jQuery function that capture keystrokes and then performs an Ajax call that ultimately should give results that are relevant to the keystrokes. I am receiving an error of function searchquery is not defined. I then went and verified the syntax and it appears to me to be correct. DEMO

<script type="text/javascript">
    $(document).ready(function() {
        (function($) {
            $.fn.searchquery = function() {
                $.post("insta_search.php", {searchVal: searchTxt}), function(output) {
                    $("#output").html(output);
                });
            };
        });
    });
</script>
</head>
<body>
    <h2>Search</h2>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <input type="text" name="search" placeholder="Search for stuff" onkeydown="searchquery();"/>
        <input name="submit" value=">>" type="submit">
        <br />
        <div id="output" name="output">
        </div>

Upvotes: 0

Views: 579

Answers (2)

Robin Rizvi
Robin Rizvi

Reputation: 5183

$(document).ready(function () {
     searchquery = function() {
        $.post("insta_search.php", {searchVal: $("input[name='search']").val()}, function(output) {
        $("#output").html(output);
        });
     };
});

A better approach would be not to mix behaviour in content (ie. do not mix js in html)

<script type="text/javascript">
    $(document).ready(function() {
        $("input[name='search']").keydown(function(){
            $.post("insta_search.php", {searchVal: $("input[name='search']").val()}, function(output) {
                $("#output").html(output);
            });
        });
    });
</script>
</head>
<body>
    <h2>Search</h2>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <input type="text" name="search" placeholder="Search for stuff" />
        <input name="submit" value=">>" type="submit">
        <br />
        <div id="output" name="output">
        </div>

Upvotes: 1

oldhomemovie
oldhomemovie

Reputation: 15129

Seems that you had a redundant parentheses. Try this piece:

$(document).ready(function() {
  (function($) {
    $.fn.searchquery = function() {
      $.post("insta_search.php", { searchVal: searchTxt }, function(output) {
        $("#output").html(output);
      });
    };
  });
});

Upvotes: 0

Related Questions