0

I am trying to make a little sample dropdown appear when a user enters a certain combination of letters in the form. I think I am having syntax/logic problems because I can't even get the alerts to work.

$(document).ready(function () {

   $("#inputt").keypress(

    function(event) {

        if (event.which == melee || MELEE) {

            alert("You typed MELEE");

        } else if (event.which == knuckle || KNUCKLE) {

            alert("You typed KNUCKLE");

        } else {

            alert("Neither!!!");
            $('.knuckle').hide();
            $('.melee').hide();

        }

   });

});

Here is the sample. https://jsfiddle.net/galnova/snp1hqr7/1/

riotgear
  • 451
  • 1
  • 5
  • 19
  • 2
    You haven't defined the `melee`, `MELEE`, `knuckle` or `KNUCKLE` variables anywhere ...? – Rory McCrossan Dec 21 '15 at 17:28
  • if you look at your browser's console while running your Fiddle, you can see at least part of the problem... `Uncaught ReferenceError: melee is not defined` – devlin carnate Dec 21 '15 at 17:31
  • event.which will return an integer representing the key that was pressed which can be found http://www.asciitable.com/ ... you cannot find the word that was typed by using this alone – Antonio Manente Dec 21 '15 at 17:34
  • Are you trying to detect if the user has typed the string "melee"? You will need to get the contents of the text field and use string comparison. – Draco18s no longer trusts SE Dec 21 '15 at 17:34

2 Answers2

1

So you have error in your code as there is no such event.which, if you see your console of developer mode, you can see error. So it must be either compairing the value of textbox by using $("#inputt").val() with the value 'melee'. It will do the trick

 if (event.which == melee || MELEE) {

must be replaced by

 if ($("#inputt").val() == 'melee'||  $("#inputt").val() =='MELEE') {

and subsequently for

else if (event.which == knuckle || KNUCKLE)

with 

else if ($("#inputt").val() == 'knuckle' || $("#inputt").val() ==KNUCKLE)

https://jsfiddle.net/aadi/2odkq3t8/

Edit :- Also event you are using is keypress so it will be fired if text you have written is greater than melee and type another charatcer then it would be fired . It would be better if you use keyup event which is triggered when any key is released after pressing.

Naruto
  • 4,221
  • 1
  • 21
  • 32
1

There are a few problems with your code.

  • Your code is throwing the error melee is not defined. You're looking for a string value, so melee needs to be in quotes.
  • event.which returns an integer, not a string.
  • I'm not entirely sure you want to tie your event to keypress... because that means it runs with every key stroke. If you're looking for a specific word, you might want to bind to the change event instead. Or, at a minimum, get rid of the alert on every keypress because it's annoying. In my example, I'm using change, which requires the user to press enter after typing the word.
  • What if someone types Melee? Your code is only looking for two instances of the word, but there are a lot of others you might want to account for. One way to handle this is to put the value in lower case and then you only need to compare against melee.

Here is an updated fiddle

   $("#inputt").change(

    function() {

        if ($(this).val().toLowerCase() === "melee") {

            alert("You typed MELEE");

        } else if ($(this).val().toLowerCase() === "knuckle") {

            alert("You typed KNUCKLE");

        } else {

            alert("Neither!!!");
            $('.knuckle').hide();
            $('.melee').hide();

        }

   });
Community
  • 1
  • 1
devlin carnate
  • 8,309
  • 7
  • 48
  • 82
  • I just want to emulate an ajax response for a demo. I want two separate dropdowns two appear depending on a user typing wither melee or knuck but not every character – riotgear Dec 21 '15 at 17:48
  • 1
    I'm not clear how typing emulates your ajax response (I would need to see how you're making the call), but my answer shows how to bind to the textbox change event, which means it only fires when the user presses enter after focusing on the textbox. You could alternately create a button and tie to a click event on the button to detect when the user is done typing and ready to submit their word. – devlin carnate Dec 21 '15 at 17:57
  • https://jsfiddle.net/galnova/5jy7d43u/2/ Thank you. This works. Is there a way for it to show or hide once I am done typing as opposed to clicking off of it? – riotgear Dec 21 '15 at 19:14
  • 1
    @riotgear - I suppose you could add a timer on the keyup event. Something like [this](http://stackoverflow.com/questions/4220126/run-javascript-function-when-user-finishes-typing-instead-of-on-key-up). – devlin carnate Dec 21 '15 at 19:36
  • I just read that over. I am rough at implementation and syntax. Is there a way I could see a working jsfiddle somewhere? What would I search for? – riotgear Dec 21 '15 at 19:49