使用 OnKeyUp 处理程序的 JSON 查询

json query using onkeyup handler

本文关键字：JSON 查询 程序 OnKeyUp 处理 使用      更新时间：2023-09-26

我的代码目标是使用文本字段来指定位置来执行 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>

脚本.js看起来像这样

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

和

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

应该对你有所帮助

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

每次用户在<input>中键入某些内容时，这将发出具有以下有效负载{query: X}的getJSON请求，其中X是输入的值。

我建议像这样通过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);
    });
}

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

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

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

然后在您的服务器上，只需获取"mylocation"作为查询字符串。

相关文章：