Fatal编程技术网
  • javascript/
  • Javascript 使用onkeyup处理程序的json查询

Javascript 使用onkeyup处理程序的json查询

javascript jquery json

Javascript 使用onkeyup处理程序的json查询,javascript,jquery,json,Javascript,Jquery,Json,我的代码目标是使用textfield来指定位置，执行json查询请求 它是一种基于文本的快速搜索，搜索与位置不同的特定网站 例如： 如果我输入www.calsolum/abc，我希望它在calsolum网站上搜索3个json文件： “a”、“ab”、“abc”最后一个是实际的json文件 我的索引文件如下所示 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=u

我的代码目标是使用textfield来指定位置，执行json查询请求 它是一种基于文本的快速搜索，搜索与位置不同的特定网站

例如： 如果我输入www.calsolum/abc，我希望它在calsolum网站上搜索3个json文件：

“a”、“ab”、“abc”最后一个是实际的json文件

我的索引文件如下所示

<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>

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);
});
到目前为止，似乎我得到了正确的请求，但由于程序在错误的位置查找错误 任何帮助都将不胜感激。如果需要任何澄清，请毫不犹豫地询问

EDIT2：所以我已经实现了建议的编辑，并且在运行时出现了新的错误

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined
及

我建议像这样通过jQuery绑定事件，这样您就有了获取事件数据的标准方法：

$("#location").on("keyup", myFunction);
此外，要执行此操作，必须去掉输入元素上的onkeyup=“myFunction（）”

更改myFunction函数以接受参数：

function myFunction(event) { .... }
然后，您可以通过检查来检查按下了哪个键代码：

var keyCode = event.which; // example usage, returns a number indicating the keycode
希望这能帮助你更接近你所需要的

对于JSON-您需要在事件处理程序中调用$.getJSON，将其放在myFunction（）之外只会在事件之外运行一次。您可能希望它在每次事件触发时都运行。

我建议像这样通过jQuery绑定事件，这样您就有了获取事件数据的标准方法：

$("#location").on("keyup", myFunction);
此外，要执行此操作，必须去掉输入元素上的onkeyup=“myFunction（）”

更改myFunction函数以接受参数：

function myFunction(event) { .... }
然后，您可以通过检查来检查按下了哪个键代码：

var keyCode = event.which; // example usage, returns a number indicating the keycode
希望这能帮助你更接近你所需要的

对于JSON-您需要在事件处理程序中调用$.getJSON，将其放在myFunction（）之外只会在事件之外运行一次。您可能希望它在每次事件触发时都运行。

从您的示例来看，变量“x”在函数“myFunction”中是关闭的，您可能希望将变量移动到函数体中，即：

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);
    });
}
从您的示例来看，变量“x”在函数“myFunction”中是闭合的，您可能希望将该变量移动到函数体中，即：

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);
    });
}
这应该对你有帮助

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);
});
每次用户在
中键入内容时，都会发出
getJSON
请求，其中
X
是输入值。

这应该对您有所帮助

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);
});

function myFunction(){
    $.getJSON('location', {mylocation: $('#location').val()}, function(data) {
        console.log(data);
    });
}
每次用户在
中键入某个内容时，都会发出
getJSON
请求，其中
X
是输入值

function myFunction(){
    $.getJSON('location', {mylocation: $('#location').val()}, function(data) {
        console.log(data);
    });
}
每次用户键入一个单词时，它都会发出如下请求

[your_server]/location?mylocation=[what user typed on location field]
然后在服务器上，只需将“mylocation”作为querystring

每次用户键入一个单词时，它都会发出如下请求

[your_server]/location?mylocation=[what user typed on location field]
然后在您的服务器上，只需将“mylocation”作为querystring。

好吧，您在函数中声明了一个变量
x
。它是一个局部变量，因此在函数外部不可用。是否要为每次击键执行getJSON请求？应在函数外部定义var x或返回它。这是一个局部变量，它的作用域是函数。所以，基本上你是在函数中存储一些数据在一个变量中，这个变量在以后是不可访问的。再加上你的html标签被弄乱了。头部和身体之间有脚本和输入。好吧，根据大家的建议，我将JSON请求移到了函数内部，但存在非法调用错误，我不知道这意味着什么。为了澄清，我希望每个击键都有一个请求，但我也希望它附加以前的击键，例如：如果我键入car，我希望它发出3个请求：c、ca、car。好的，你在函数中声明了一个变量
x
。它是一个局部变量，因此在函数外部不可用。是否要为每次击键执行getJSON请求？应在函数外部定义var x或返回它。这是一个局部变量，它的作用域是函数。所以，基本上你是在函数中存储一些数据在一个变量中，这个变量在以后是不可访问的。再加上你的html标签被弄乱了。头部和身体之间有脚本和输入。好吧，根据大家的建议，我将JSON请求移到了函数内部，但存在非法调用错误，我不知道这意味着什么。为了澄清这一点，我希望每个按键都有一个请求，但我也希望它能附加之前的按键，例如：如果我输入car，我希望它能发出3个请求：c、ca、car。看起来他想快速搜索文本，而不是发送最终用户按下的键。我认为他的问题不太清楚。好的，我已经完全按照你写的那样尝试了代码，但我得到了两个错误：第一个是：未捕获的TypeError：无法调用未定义的方法“toLowerCase”；第二个是：get 404（未找到）我的json文件存储在不同的网站上，因此我认为这会使事情变得复杂，因为它似乎在本地网站上查找该文件website@Calsolum，如果您完全按照我的方式编写代码，您将不会看到
toLowerCase
错误；在我的代码中，该函数不存在。其次，
/location
只是一个示例路径；您必须使用与服务器正在使用的路径匹配的请求路径来处理您的请求并返回JSON。我做了一个编辑，应该让这更清楚一点。@TelvinNguyen，是的，我把它作为我答案的第二部分。我更新了它，让事情变得更清楚了thoguh。谢谢你的帮助，正如你所指出的，这是我这边的一个错误，现在它可以根据需要工作，看起来像他想要快速搜索文本，而不是发送最终用户按下的键。我认为他的问题不太清楚。好吧，我已经完全按照你写的那样尝试了代码，但我得到了两个错误：第一个错误是：uncaughttypeerror：无法调用und的方法“toLowerCase”