搜索框结果== Json结果

D. Ister 发表于 Dev

D.旺娜

我有一个可以读取JSON文件的Node.js服务器，并且其中包含很多信息。其中之一是一个人的ID，我在HTML页面中有一个搜索框，我想为客户端设置一个jquery方法（需要使用ajax），以查找用户在搜索框中输入的ID是否与JSON中的ID，如果要返回有关该人的一些信息，则假设用户的名称和用户名。

注意：我100％确定我的server.js文件可以工作。

请帮助我，我是Jquery的新手。

我到目前为止

$(document).ready(function(){
    $("#id_of_the_search_box_button").click(function (any_function_variable_name) {
    $.ajax({
      type: 'GET',
      url: '/url_of_the_related_server_side',
      dataType: 'json'
      })
          .done(function(data){
              console.log(data);
              alert(JSON.stringify(data));

              data.forEach(function (any_function_variable_name) {

                if(any_function_variable_name.search_box_ID == any_function_variable_name.name_in_the_JSON_file_for_one_of_the_searched_ID){

                    $userElement = $("<li>").html("<strong>ID: </strong>" + any_function_variable_name.id); //id is defined in JSON and I was able to use in another part of the jquery
                    $userBlock = $("<ul>")
                        .append(
                            $("<li>").html("<strong>Name: </strong>" + any_function_variable_name.name) //name of the user
                        )
                        .append(
                            $userElement
                        )
                        .append(
                            $("<li>").html("<strong>User User Name: </strong>" + any_function_variable_name.userName)
                        );
                                                                  $any_function_variable_nameBlock.insertAfter("#search");
            }
            });
    });})})

注意：我不知道是否可以正确地括住括号。

提前致谢！

戴夫·阿米特

我想您正在寻找如下所示的内容...

我没有进行ajax调用，而是使用静态数据编写了如下内容……

的HTML

<input id="searchBox" type="text" />
<button id="id_of_the_search_box_button">
Search
</button>

<ul>

</ul>

JS

var data = [
  {
    "id": 37595960858,
    "in_reply_to_screen_name": null,
    "user": {
      "id": 2384451,
      "id_str": "238678",
      "name": "Doga I",
      "screen_name": "IDoga"
    }
  },
  {
    "id": 65739068412,
    "in_reply_to_screen_name": null,
    "user": {
      "id": 2878009,
      "id_str": "235678",
      "name": "Jon Doe",
      "user_name": "JD"
    }
  }
];


$(document).ready(function(){
  $("#id_of_the_search_box_button").click(function (any_function_variable_name) {

    var searchText = parseInt($('#searchBox').val());


    data.forEach(function (any_function_variable_name) {

      if(any_function_variable_name.id === searchText){

        $("ul")
            .append('<li> <strong>ID: </strong>' + any_function_variable_name.user.id)
            .append('<li> <strong>User Name: </strong>' + any_function_variable_name.user.user_name)
            .append('<li> <strong>Name: </strong>' + any_function_variable_name.user.name)
            .append('<li> <strong>Screen Name: </strong>' + any_function_variable_name.user.screen_name);

      } //End if

    }); //End forEach

  });
});

这使您的ajax调用像这样...

$(document).ready(function(){
  $("#id_of_the_search_box_button").click(function (any_function_variable_name) {
    $.ajax({
      type: 'GET',
      url: '/url_of_the_related_server_side',
      dataType: 'json'
    })
    .done(function(data){


      var searchText = parseInt($('#searchBox').val());


      data.forEach(function (any_function_variable_name) {

        if(any_function_variable_name.id === searchText){

          $("ul")
            .append('<li> <strong>ID: </strong>' + any_function_variable_name.user.id)
            .append('<li> <strong>User Name: </strong>' + any_function_variable_name.user.user_name)
            .append('<li> <strong>Name: </strong>' + any_function_variable_name.user.name)
            .append('<li> <strong>Screen Name: </strong>' + any_function_variable_name.user.screen_name);

        } //End if

      }); //End forEach



    });
  });
});

以下是提琴手

https://jsfiddle.net/rrtbz4bo/7/

37595960858在搜索框中输入并点击搜索。

更新：如果它返回数据，则直接调用/ find / id？id = ... api

{
    "id": 37595960858,
    "in_reply_to_screen_name": null,
    "user": {
      "id": 2384451,
      "id_str": "238678",
      "name": "Doga I",
      "screen_name": "IDoga"
    }
  }

然后，下面的应该工作。

$(document).ready(function(){
  $("#id_of_the_search_box_button").click(function (any_function_variable_name) {
    $.ajax({
      type: 'GET',
      //Or whatever your URL structure is
      url: 'http://127.0.0.1:5230/find/id?Id=' + $('#searchBox').val(),
      dataType: 'json'
    })
    .done(function(data){
      $("ul")
      .append('<li> <strong>ID: </strong>' + data.user.id)
      .append('<li> <strong>User Name: </strong>' + data.user.user_name)
      .append('<li> <strong>Name: </strong>' + data.user.name)
      .append('<li> <strong>Screen Name: </strong>' + data.user.screen_name);
    });
  });
});

如果这不起作用，请发布一个提琴手，然后我将尝试使其工作。

希望这可以帮助 ...

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。