Javascript通过对象搜索电话数据并显示在表格中

Question

在输入keyup时，Js从JSON对象中获取数据，并在html表格中显示数据
我需要帮助：

1：按电话对数据进行排序，只显示输入有数字的表格行，隐藏其他

2：点击表格行 -> 打开模式，我想显示其他数据 {"card_number": "1234 1234 4444 5555","anydata": " something ","anydata2 ": "hello"} from res 正好属于这个带有电话号码的对象

这是我的代码：

function SearchPhone() {
  var phone = $('#phonesearch').val();
  var res = {
    "2": {
      "name": "Sardor",
      "surname": "Aliev",
      "patronym": "Begmatovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "2",
      "phone": "85673454534",
      "card_number": "1234 1234 4444 5555",
      "anydata": " something ",
      "anydata2": "hello"

    },
    "3": {
      "name": "Akbar",
      "surname": "Valiev",
      "patronym": "Sharipovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "2",
      "phone": "85672312335",
      "card_number": "1234 6543 4444 5555",
      "anydata": " something ",
      "anydata2": "hello"
    },
    "4": {
      "name": "Mansur",
      "surname": "Bakirov",
      "patronym": "Maksutovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "1",
      "phone": "85657652311",
      "card_number": "1234 6543 1111 5535",
      "anydata": " something ",
      "anydata2": "hello"
    },
    "5": {
      "name": "Xamid",
      "surname": "Saliev",
      "patronym": "Aripovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "4",
      "phone": "85672115535",
      "card_number": "1234 2353 5444 2345",
      "anydata": " something ",
      "anydata2": "hello"
    },
    "6": {
      "name": "Bobur",
      "surname": "Qobilov",
      "patronym": "Axmetovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "3",
      "phone": "85672612664",
      "card_number": "1287 3853 4734 5475",
      "anydata": " something ",
      "anydata2": "hello"
    }
  };
  var sttr = '<tr class="" style="cursor: pointer;" data-toggle="modal" data-target="#myModal1"><th  scope="row" id="listnum_fp">';
  endtr = '</tr>';
  stth = '<th style="white-space: nowrap">';
  endth = '</th>';
  sttd = '<td style="white-space: nowrap">';
  endtd = '</td>';
  for (const key in res) {

    var f_i_sh = stth + res[key].surname + ' ' + res[key].name + ' ' + res[key].patronym + '' + endth;
    publicated = sttd + res[key].date_pub + endtd;
    willget = sttd + res[key].date_get + endtd;
    status = sttd + res[key].status + endtd;
    phone = sttd + res[key].phone + endtd;
    datarowout = sttr + (key - 1) + f_i_sh + publicated + willget + status + phone + endtr;
    document.getElementById('cardmod_fp').innerHTML += datarowout;

  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table table-lg table-bordered shadow bg-light ">
    <thead>
      <tr>
        <div class="card-header text-right">
          <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3">
              Phone input: <input id="phonesearch" onkeyup="SearchPhone()" type="text" class="form-control">
            </div>
          </div>

        </div>

        <tr>
          <th style="width: 40px;" scope="col">№</th>
          <th scope="col">Name</th>
          <th scope="col">Post Date</th>
          <th scope="col">Get Date</th>
          <th scope="col">Status</th>
          <th scope="col">Phone number</th>
        </tr>
    </thead>

    <tbody id="cardmod_fp">

    </tbody>
  </table>
</div>


<div class="modal resizable draggable fade" data-backdrop="false" id="myModal1" role="dialog">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content rounded-0 shadow-lg">
      <div class="modal-header bg-light">
        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>
      <div class="modal-body">
        <p class="moredata"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-refuse " data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-default " data-dismiss="modal">Send</button>
      </div>
    </div>
  </div>
</div>

Answer 1

先将 res 移到搜索之外，然后在输入时清除

这是一个工作版本

var res = {
  "2": {
    "name": "Sardor",
    "surname": "Aliev",
    "patronym": "Begmatovich",
    "date_pub": "12.02.2019",
    "date_get": "12.03.2019",
    "status": "2",
    "phone": "85673454534",
    "card_number": "1234 1234 4444 5555",
    "anydata": " something ",
    "anydata2": "hello"

  },
  "3": {
    "name": "Akbar",
    "surname": "Valiev",
    "patronym": "Sharipovich",
    "date_pub": "12.02.2019",
    "date_get": "12.03.2019",
    "status": "2",
    "phone": "85672312335",
    "card_number": "1234 6543 4444 5555",
    "anydata": " something ",
    "anydata2": "hello"
  },
  "4": {
    "name": "Mansur",
    "surname": "Bakirov",
    "patronym": "Maksutovich",
    "date_pub": "12.02.2019",
    "date_get": "12.03.2019",
    "status": "1",
    "phone": "85657652311",
    "card_number": "1234 6543 1111 5535",
    "anydata": " something ",
    "anydata2": "hello"
  },
  "5": {
    "name": "Xamid",
    "surname": "Saliev",
    "patronym": "Aripovich",
    "date_pub": "12.02.2019",
    "date_get": "12.03.2019",
    "status": "4",
    "phone": "85672115535",
    "card_number": "1234 2353 5444 2345",
    "anydata": " something ",
    "anydata2": "hello"
  },
  "6": {
    "name": "Bobur",
    "surname": "Qobilov",
    "patronym": "Axmetovich",
    "date_pub": "12.02.2019",
    "date_get": "12.03.2019",
    "status": "3",
    "phone": "85672612664",
    "card_number": "1287 3853 4734 5475",
    "anydata": " something ",
    "anydata2": "hello"
  }
};

function SearchPhone() {
  var phone = $('#phonesearch').val();
  document.getElementById('cardmod_fp').innerHTML = ""
  var sttr = '<tr class="" style="cursor: pointer;" data-toggle="modal" data-target="#myModal1"><th  scope="row" id="listnum_fp">';
  endtr = '</tr>';
  stth = '<th style="white-space: nowrap">';
  endth = '</th>';
  sttd = '<td style="white-space: nowrap">';
  endtd = '</td>';
  for (const key in res) {
    if (phone === "" || res[key].phone.indexOf(phone) === 0) {
      var f_i_sh = stth + res[key].surname + ' ' + res[key].name + ' ' + res[key].patronym + '' + endth;
      publicated = sttd + res[key].date_pub + endtd;
      willget = sttd + res[key].date_get + endtd;
      status = sttd + res[key].status + endtd;
      phoneCell = sttd + res[key].phone + endtd;
      datarowout = sttr + (key - 1) + f_i_sh + publicated + willget + status + phoneCell + endtr;
      document.getElementById('cardmod_fp').innerHTML += datarowout;
    }
  }
}
SearchPhone()

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table table-lg table-bordered shadow bg-light ">
    <thead>
      <tr>
        <div class="card-header text-right">
          <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3">
              Phone input: <input id="phonesearch" oninput="SearchPhone()" type="text" class="form-chttps://stackoverflow.com/questions/59200666/javascript-search-by-phone-data-through-the-object-and-display-in-the-table#ontrol" value="">
            </div>
          </div>

        </div>

        <tr>
          <th style="width: 40px;" scope="col">№</th>
          <th scope="col">Name</th>
          <th scope="col">Post Date</th>
          <th scope="col">Get Date</th>
          <th scope="col">Status</th>
          <th scope="col">Phone number</th>
        </tr>
    </thead>

    <tbody id="cardmod_fp">

    </tbody>
  </table>
</div>


<div class="modal resizable draggable fade" data-backdrop="false" id="myModal1" role="dialog">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content rounded-0 shadow-lg">
      <div class="modal-header bg-light">
        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>
      <div class="modal-body">
        <p class="moredata"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-refuse " data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-default " data-dismiss="modal">Send</button>
      </div>
    </div>
  </div>
</div>

Answer 2

我已经对您的代码进行了一些简单的必要更改和一些更好的指导（但不完全），并在必要时添加了 cmets 以便更好地理解。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   
   // Created a separate function to filter out the required phone numbers
   function filter(phoneNumber, data){

    // If the search string is not there, then simply return all data to display
    if(phoneNumber == "" || phoneNumber == undefined || phoneNumber == null){
        return data;
    }

    let resultData = {}
    // as you did previously, just iterating through all of individual data set using keys
     for(var key in data){
         let personData = data[key]
         // if the input string present in  any of the phoneNumber, then simply add this data to the result data.
        if(personData.phone.indexOf(phoneNumber) >= 0){
            resultData[key] = personData;
        }
     }

     // atlast return the result data.
     return resultData;
   }
  
// Always try to seperate the method of getting data. In real worl application it could be from anywhere. I
//If you move it to separate method like this. You can replace this dummy data method with another source of data may be from real database without changing other sections of code.
function getAllPhoneNumbers(){
    var res = {
    "2": {
      "name": "Sardor",
      "surname": "Aliev",
      "patronym": "Begmatovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "2",
      "phone": "85673454534",
      "card_number": "1234 1234 4444 5555",
      "anydata": " something ",
      "anydata2": "hello"

    },
    "3": {
      "name": "Akbar",
      "surname": "Valiev",
      "patronym": "Sharipovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "2",
      "phone": "85672312335",
      "card_number": "1234 6543 4444 5555",
      "anydata": " something ",
      "anydata2": "hello"
    },
    "4": {
      "name": "Mansur",
      "surname": "Bakirov",
      "patronym": "Maksutovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "1",
      "phone": "85657652311",
      "card_number": "1234 6543 1111 5535",
      "anydata": " something ",
      "anydata2": "hello"
    },
    "5": {
      "name": "Xamid",
      "surname": "Saliev",
      "patronym": "Aripovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "4",
      "phone": "85672115535",
      "card_number": "1234 2353 5444 2345",
      "anydata": " something ",
      "anydata2": "hello"
    },
    "6": {
      "name": "Bobur",
      "surname": "Qobilov",
      "patronym": "Axmetovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "3",
      "phone": "85672612664",
      "card_number": "1287 3853 4734 5475",
      "anydata": " something ",
      "anydata2": "hello"
    }
  };
   return res;
}

function SearchPhone() {
   var phone = $('#phonesearch').val();

  var allPhoneNumbers = getAllPhoneNumbers();
  var sttr = '<tr class="" style="cursor: pointer;" data-toggle="modal" data-target="#myModal1"><th  scope="row" id="listnum_fp">';
  endtr = '</tr>';
  stth = '<th style="white-space: nowrap">';
  endth = '</th>';
  sttd = '<td style="white-space: nowrap">';
  endtd = '</td>';
  // Clear out the existing records in HTML page
  document.getElementById('cardmod_fp').innerHTML = "";
  
  //call filter method with the input from user along with original data set.
  for (const key in filter(phone, allPhoneNumbers)) {

    var f_i_sh = stth + res[key].surname + ' ' + res[key].name + ' ' + res[key].patronym + '' + endth;
    publicated = sttd + res[key].date_pub + endtd;
    willget = sttd + res[key].date_get + endtd;
    status = sttd + res[key].status + endtd;
    phone = sttd + res[key].phone + endtd;
    datarowout = sttr + (key - 1) + f_i_sh + publicated + willget + status + phone + endtr;
    document.getElementById('cardmod_fp').innerHTML += datarowout;

  }
}
</script>

<div class="table-responsive">
  <table class="table table-lg table-bordered shadow bg-light ">
    <thead>
      <tr>
        <div class="card-header text-right">
          <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3">
              Phone input: <input id="phonesearch" onkeyup="SearchPhone(this.value)" type="text" class="form-control">
            </div>
          </div>

        </div>

        <tr>
          <th style="width: 40px;" scope="col">№</th>
          <th scope="col">Name</th>
          <th scope="col">Post Date</th>
          <th scope="col">Get Date</th>
          <th scope="col">Status</th>
          <th scope="col">Phone number</th>
        </tr>
    </thead>

    <tbody id="cardmod_fp">

    </tbody>
  </table>
</div>