json query using onkeyup handler

Question

My goal for my code is to execute a json query request using a textfield to designate the location it is a quick search based text searching a specific website that is different from the location

eg: if i type in www.calsolum/abc i want it to search the website calsolum for 3 json files:

'a', 'ab', 'abc' the last one being the actual json file

my index file looks like this

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
</head>
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <input type="text" id="location" onkeyup="myFunction()">
    <body>
    </body>
</html>

the script.js looks like this

var myFunction = function(event) {

var payload = {location: $(this).val()};

var jqxhr = $.getJSON('/location', payload);

jqxhr.done(function(data) {
   console.log(data); 
});
};

// jQuery on DOM ready
$(function() {
  $("#location").keyup(myFunction);
});

So far it seems as though i get the right requests made but going from the errors the program is looking in the wrong location Any help would be greatly appreciated. If any clarification is required do not hesitate to ask.

EDIT2: so i've implemented the edits suggested and my new error when running it is

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

and

 GET http://mobile.sheridanc.on.ca/location?location=http%3A%2F%2Fwww.sightlineinnovation.com%2Fsyst35288%2FAPI%2Fv1.0%2Fexchanges%2FWSA 404 (Not Found)

Well, you're declaring a variable x inside a function. It's a local variable, so it's not available outside the function. — Lee Taylor
– Lee Taylor, Commented Jul 31, 2013 at 2:04
You should either define var x outside the function or return it. That's a local variable and it's scope is the function. So basically you're function storing some data in a variable which won't be accessible afterwards. Plus your html tags are messed up. You have script and input between head and body. — Samurai
– Samurai, Commented Jul 31, 2013 at 2:12
okay so with everyone's suggestions i moved the JSON requestion to inside the function but theres an Illegal invocation error and ive no idea what that means. and to clarify i'd like the request for each keystroke but i also want it to append the previous keystrokes eg: for if i type car i want it to make 3 requests: c, ca, car. — Calsolum
– Calsolum, Commented Jul 31, 2013 at 2:22

Mulan · Accepted Answer · 2013-07-31 14:55:02Z

2

This should help you

var myFunction = function(event) {

    var payload = {query: $(this).val()};

    var jqxhr = $.getJSON('/path/to/location_query', payload);

    jqxhr.done(function(data) {
       console.log(data); 
    });
};

// jQuery on DOM ready
$(function() {
  $("#location").keyup(myFunction);
});

Each time a user types something in the <input>, this will make a getJSON request with the following payload {query: X} where X is the value of the input.

edited Jul 31, 2013 at 14:55

answered Jul 31, 2013 at 2:18

Mulan

136k35 gold badges240 silver badges276 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Telvin Nguyen Over a year ago

Look like he want to do quick search based text rather than sent out which key end user pressed. I think his question is not quite clear.

Calsolum Over a year ago

ok i've tried the code exactly as youve written but i get 2 errors First is: Uncaught TypeError: Cannot call method 'toLowerCase' of undefined Second is: GET mobile.sheridanc.on.ca/… 404 (Not Found) my json file is stored on different website so i think that complicates things because it seems to be looking for the file on the local website

Mulan Over a year ago

@Calsolum, if you wrote code exactly as I did, you wouldn't see a toLowerCase error; nowhere in my code does that function exists. Second, /location is just an example path; you have to use a request path that matches one your server is using to process your request and return JSON. I made an edit that should make this a little more clear.

Mulan Over a year ago

@TelvinNguyen, yeah I had that as the second part of my answer. I updated it to make things a little more clear thoguh.

Calsolum Over a year ago

Thanks for your help, it was a mistake on my end as you pointed out and it now works as need it to

revlayle · Accepted Answer · 2013-07-31 01:59:23Z

I would recommend binding the event via jQuery like so, so you have a standard way of getting the event data:

$("#location").on("keyup", myFunction);

Also, doing this, you must get rid of the onkeyup="myFunction()" on the input element.

Change your myFunction function to accept an argument:

function myFunction(event) { .... }

Then, you can check which key code is pressed by checking:

var keyCode = event.which; // example usage, returns a number indicating the keycode

Hopefully, this helps you get closer to what you need

For the JSON - you need to call $.getJSON inside the event handler, putting it out side of myFunction() will only run run once outside of the event. You may want it to run every time the event triggers.

A Mind United · Accepted Answer · 2013-07-31 02:05:16Z

1

From your example it looks like the variable 'x' is closed in the function 'myFunction', you might want to move the variable into the function body ie:

function myFunction(){
    var x=document.getElementById("location");

    //Moved getJSON inside 'myFunction' and added 'x' as second JSON param
    $.getJSON('location', x, function(data) {
        console.log(data);
    });
}

answered Jul 31, 2013 at 2:05

A Mind United

3402 silver badges10 bronze badges

Comments

Telvin Nguyen · Accepted Answer · 2013-07-31 02:18:33Z

1

function myFunction(){
    $.getJSON('location', {mylocation: $('#location').val()}, function(data) {
        console.log(data);
    });
}

Each time user type one word, it makes a request such as

[your_server]/location?mylocation=[what user typed on location field]

And then on your server, just get "mylocation" as querystring.

answered Jul 31, 2013 at 2:18

Telvin Nguyen

3,5694 gold badges29 silver badges40 bronze badges

Collectives™ on Stack Overflow

json query using onkeyup handler

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related