1

I'm trying to implement a search bar on my website. I already have the back end processing working correctly, and I have the html and CSS in place for the search bar, all I have left to do is get my JavaScript to trigger the search to execute. Here is the html for the search bar:

<div id="search_field_container">
    <input type="text" name="search_field" id="search_field" maxlength="100" placeholder="Search by item name or #tag" value="Search by item name or #tag" onclick="value=''" />
    <button id="search" name="search_button">s</button>
</div>

What I'm trying to do is set up jQuery event handlers to trigger a JavaScript function called search when the user either presses enter while the text bar is focused or when they click the search button. However, I absolutely cannot seem to get the event handlers to trigger. Here is my JavaScript:

//Search function
$(document).ready(function(){
    console.log("In anonymous function.");
    $("#search").on('click', function(event){
        alert("In click handler");
        search();
    });
});

$("#search_field").bind('keyup', function(event){
    alert("In keyup handler");
    if(event.keyCode == 13){
        alert("In enter handler");
        search();
    }
});

function search(){
    alert("Something happened!");
    var searchTerm = $("#search_field").val();
    alert("You're trying to search for "+searchTerm);
}

Currently, nothing happens when I either hit enter with the cursor in the text bar or press the search button. I know it isn't JavaScript errors preventing execution of everything, because all of the other JavaScript on the page executes perfectly fine.

I know the search function works and that the at least the search_field id on the text input is correct because if I add an onclick to the button and call search through that, it executes correctly and it always echoes the value from the text field correctly.

The search bar is in a separate header file so I don't have to include it in the html of every page, but that shouldn't make a difference because I'm including the file with PHP, so it should already be in place before the file even gets to the user. Just in case though, I've already tried using .bind and document.ready as you can see, as well as .on and an anonymous wrapper function, to no avail.

I don't get any error messages in the console or anything, it just silently fails. I know there are tons of similar questions on this site, but I've already tried every solution I could find to about a dozen of them. If anyone knows what the problem is and how to fix it, or even just additional tests to help figure out why this is failing so I can narrow my searches down, that would be greatly appreciated.

EDIT: Huangism created this JSfiddle using my code and showed that the code works properly, so there must be something about the context of my site causing it to not function.

Fiddle - http://jsfiddle.net/3m5Mp/

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user1623484
  • 23
  • 1
  • 7

2 Answers2

2

I added a fiddle to your question. You should move #search_field handler inside of doc ready. In fiddle it works because it is already assuming doc ready. The click works for me in the fiddle. Which browser are you testing on?

For enter

code= (e.keyCode ? e.keyCode : e.which);
if (code == 13) alert('Enter key was pressed.');

Got this from another question

Here is a fiddle with the handlers all in doc ready and not assuming doc ready

http://jsfiddle.net/PFcnx/2/

It seems to work in FF, please test in other browsers and see if it works

Your js error probably has something to do with the extra comma at the end

  $("#grid").masonry({
    itemSelector : '.entry', 
    isFitWidth : 'true',
    isResizable : 'true',   
  });

remove comma after the last 'true'

Huangism
  • 16,278
  • 7
  • 48
  • 74
  • That's weird, I tried adding doc ready to my javascript file and it still isn't working. Could it be because it is in a separate file? It seems that my code itself is fine, and it's just something to do with the context that is causing the errors. You can see it in action at completeset.us if you want a look at it. – user1623484 Oct 05 '12 at 14:40
  • @user1623484 there is a js error on your site something to do with $('#grid').ImagesLoaded, type error – Huangism Oct 05 '12 at 14:43
  • The comma didn't fix the javascript error, but my handlers are working now! I'm not sure why exactly it didn't work the first time, but the document ready seems to have been the difference after all, it was one of those weird bugs where after you copy and paste something enough times it suddenly starts working. – user1623484 Oct 05 '12 at 15:00
  • I would imagine the comma should give you a syntax error, which prevents it from working. If you use firebug you can goto the script tab and reload doc and set breakpoints to see where the code stops working – Huangism Oct 05 '12 at 15:08
1

Use event.which instead. I'm also not 100% sure, but you may want to try .keydown or .keypress instead. I am looking at some JS code on a site of mine where I trap enter key presses and I only use those two. I remember having trouble with .keyup for some stuff.

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • The alerts in the handlers aren't showing up at all, so it's not even getting to a point where this would matter. I used this question as a guide to the enter handler http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box. In the comments under the main answer, they said that you should use keyup instead of keydown because keydown would trigger multiple times if you hold it. Does keypress have that same problem, or would it only happen once? – user1623484 Oct 05 '12 at 14:28
  • @user1623484 I think keypress would only do it once. Also try moving everthing inside of the `.ready` -- it's possible `#search_field` does not exist when you attempt to bind. – Explosion Pills Oct 05 '12 at 14:29