Przepraszam, jeśli używam złej terminologii.

Mam działający kod javascript w pliku php, który filtruje dane wyświetlane w tabeli pozycji magazynowych w interfejsie strony WordPress.

Tj. wyszukiwanie według numeru seryjnego i im więcej wpisujesz, tym mniej elementów jest wyświetlanych na interfejsie WordPress, aż do znalezienia jednego unikalnego elementu.

Klient chce mieć możliwość wyszukiwania na różne sposoby - a ja mogę zmienić, który pojedynczy temat jest przeszukiwany, np. Mogę sprawić, że będzie wyszukiwać według numeru wysyłki, numeru seryjnego, rodzaju aktywów, opisu itp., Ale nie mogę uzyskać wyszukiwania obejmującego wszystkie tematy. czyli id w kodzie pozwala mi wybrać tylko jeden z elementów

Jeśli zmienię tutaj „1” na „2” lub „3” itp., Zmieni to fokus wyszukiwania z kolumny 1 na 2 na 3 itd.

td = tr[i].getElementsByTagName("td")[1];

Czy ktoś może podpowiedzieć, jak przeszukiwać wszystkie dane w tym samym czasie?

<script>
    function helloWorld() {
        var input, filter, table, tr, td, sn, ty, own, i, id;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("adminTable");
        tr = table.getElementsByTagName("tr");
        var data = new Array();
        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                if(td.children[0].checked) {
                    sn = tr[i].getElementsByTagName("td")[4];
                    ty = tr[i].getElementsByTagName("td")[9];
                    id = tr[i].getElementsByTagName("td")[10];
                    own = tr[i].getElementsByTagName("td")[11];
                    var record = {serial: sn.textContent || sn.innerText, type: ty.textContent || ty.innerText, id: id.textContent || id.innerText, owner: own.textContent || own.innerText};
                    data.push(record);
                }
            }
        }

        if(data.length > 0) {
            var uri = JSON.stringify(data);
            var res = encodeURIComponent(uri); 
            window.location.href = '../stock?transferData='.concat(res);
        }
    }
function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

wprowadź opis obrazu tutaj

1
designtribe 20 listopad 2019, 19:47

2 odpowiedzi

Ta biblioteka wyszukiwania javascript https://fusejs.io/ może być wszystkim, czego potrzebujesz. Być może będziesz musiał najpierw zmapować dane WP, ale pozwoli ci to wyszukać wszystko, co chcesz.

0
Darbley 20 listopad 2019, 19:56
Doceniam tę sugestię, ale jestem takim nowicjuszem, że naprawdę skorzystałbym, gdyby ktoś, miejmy nadzieję, poprawił to, co już jest! (Po prostu nie mam w tej chwili wystarczającego doświadczenia, aby zacząć korzystać z alternatywnych rozwiązań!)
 – 
designtribe
20 listopad 2019, 20:02

Spróbuj tego:

Zastąpić

 for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }

Przez to

(Ustaw potrzebne numery kolumn na liście [1,4,5])

  var columns = [1,4,5];
  // Loop through all table rows, and hide those who don't match the search query  
  for (var j=0, lenj=columns.length; j < lenj; j++) {     
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[columns[j]];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
  }
0
Snuwerd 25 listopad 2019, 21:02
Dzieki za sugestie. Zakładając, że chcesz dosłownie skopiować i wkleić swój kod do drugiej części sekcji myfunction, to niestety nie zadziałało i zatrzymało działanie filtrowania wyszukiwania.
 – 
designtribe
25 listopad 2019, 20:32
Czy możesz otworzyć go w Google Chrome i otworzyć Narzędzia dla programistów (Ctrl+Shift+i), a następnie kartę Konsola i wkleić tutaj czerwony tekst/błąd? Zakładam również, że wpisałeś prawidłowe numery kolumn na liście [1,4,5].
 – 
Snuwerd
25 listopad 2019, 20:58
Zdaj sobie również sprawę, że mój nowy kod ma teraz 4 }, podczas gdy poprzedni kod miał 3 }. Tak więc po wklejeniu jest na końcu 5 }, tuż przed tagiem </script>.
 – 
Snuwerd
25 listopad 2019, 21:06