javascript - 试图从我的搜索框中显示数据，但看起来它根本不起作用

Question

我正在尝试为我的网站制作一个搜索框，我可以在其中搜索我列出的服务器。我已将 ngrok 隧道链接附加到我的本地主机。这里

现在这是我的搜索栏 HTML 代码：

            <section class="section_sapce">
                <div class="row">
                    <div class="container" style="margin-bottom: 10px">
                        <div class="col-sm-6 com-md-4 center-block">
                            <div class="row no-gutter cta-content">
                                <div class="location-head">
                                    <h2 class="text-uppercase text-center">Search Location</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="container">
                        <div class="col-sm-10 com-md-8 center-block">
                            <form class="form-inline domainsearch bg_white" method="post" action="#">
                                <div class="row no-gutter">
                                    <div class="col-sm-10">
                                        <input type="text" id="searchbar" onkeyup="searchLocation()" class="form-control" name="searchbar" placeholder="Enter your location">
                                    </div>

                                    <div class="col-sm-2">
                                        <button type="submit" class="btn btn-new" style="width:100%">SEARCH</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </section>

这是我的 HTML 位置元素

<div class="location">
                    <div class="row dedicated-box">                 
                        <div class="col-sm-1 dedicated-img">
                        <a href="dedicated-servers-in-atlanta.php">
                            <span>
                                <img src="images/countries/united-states.png" alt="Dedicated Servers in Atlanta">
                            </span>
                            <p id="locationOf">Alaska</p>
                        </a>
                    </div>
                </div>

这是我的 JS 脚本文件的代码：

function searchLocation() {
    let input = document.getElementById('searchbar').value;
    input = input.toLowerCase();
    let location = document.getElementsByClassName('location');
    let locationName = document.getElementById('locationOf');
    for (var i = 0; i < location.length; i++) {
        if (!location[i].innerHTML.toLowerCase().includes(input)) {
            location[i].style.display = "none";
        }
        else if (input == locationName.innerHTML) {
            return location[i].style.display.location.innerHTML;
        }
    }
}

你能检查一下并告诉我我做错了什么吗？您也可以查看 Ngrok 链接以查看它。提前致谢

标签： javascripthtml

Answer 1

问题不在于脚本，而在于您的

<div class="location">嵌套在检查您添加的循环以迭代此名称的 php 代码中。

检查我的片段，我以适当的方式安排它的工作。

function getParent(ele, parentClass="parent"){
   var e = ele;
   while(!e.classList.contains(parentClass)){
      e=e.parentElement;
   }
  // console.log(e);
   return e;
}

function searchLocation() {
    let input = document.getElementById('searchbar').value;
    //console.log(input);
    input = input.toLowerCase();
    let location = document.getElementsByClassName('location');
    
    if(input == ""){
       for (var i = 0; i < location.length; i++) {
           location[i].style.display = "block";
       }
    }
    else{
    
    let locationName = document.getElementsByClassName('locationOf');
    var parent;
    for (var i = 0; i < locationName.length; i++) {
    parent = getParent(locationName[i], "location");
        if (!locationName[i].innerHTML.toLowerCase().includes(input)) {
            parent.style.display = "none";
        }
        else if (input == locationName.innerHTML) {
            return parent.style.display = "block";
        }
    }
    }
}

<section class="section_sapce">
  <div class="row">
    <div class="container" style="margin-bottom: 10px">
      <div class="col-sm-6 com-md-4 center-block">
        <div class="row no-gutter cta-content">
          <div class="location-head">
            <h2 class="text-uppercase text-center">Search Location</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="container">
      <div class="col-sm-10 com-md-8 center-block">
        <form class="form-inline domainsearch bg_white" method="post" action="#">
          <div class="row no-gutter">
            <div class="col-sm-10">
              <input type="text" id="searchbar" onkeyup="searchLocation()" onkeydown="searchLocation()" class="form-control" name="searchbar" placeholder="Enter your location">
            </div>

            <div class="col-sm-2">
              <button type="submit" class="btn btn-new" style="width:100%">SEARCH</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>


<div class="location">
  <div class="row dedicated-box">
    <div class="col-sm-1 dedicated-img">
      <a href="dedicated-servers-in-atlanta.php">
        <span>
								<img src="images/countries/united-states.png" alt="Dedicated Servers in Atlanta">
							</span>
        <p class="locationOf">Arizona</p>
      </a>
    </div>
  </div>
</div>
<div class="location">
  <div class="row dedicated-box">
    <div class="col-sm-1 dedicated-img">
      <a href="dedicated-servers-in-atlanta.php">
        <span>
								<img src="images/countries/united-states.png" alt="Dedicated Servers in Atlanta">
							</span>
        <p class="locationOf">Michigan</p>
      </a>
    </div>
  </div>
</div>
<div class="location">
  <div class="row dedicated-box">
    <div class="col-sm-1 dedicated-img">
      <a href="dedicated-servers-in-atlanta.php">
        <span>
								<img src="images/countries/united-states.png" alt="Dedicated Servers in Atlanta">
							</span>
        <p class="locationOf">Detroit</p>
      </a>
    </div>
  </div>
</div>
<div class="location">
  <div class="row dedicated-box">
    <div class="col-sm-1 dedicated-img">
      <a href="dedicated-servers-in-atlanta.php">
        <span>
								<img src="images/countries/united-states.png" alt="Dedicated Servers in Atlanta">
							</span>
        <p class="locationOf">New York</p>
      </a>
    </div>
  </div>
</div>
<div class="location">
  <div class="row dedicated-box">
    <div class="col-sm-1 dedicated-img">
      <a href="dedicated-servers-in-atlanta.php">
        <span>
								<img src="images/countries/united-states.png" alt="Dedicated Servers in Atlanta">
							</span>
        <p class="locationOf">Atlanta</p>
      </a>
    </div>
  </div>
</div>
<div class="location">
  <div class="row dedicated-box">
    <div class="col-sm-1 dedicated-img">
      <a href="dedicated-servers-in-atlanta.php">
        <span>
								<img src="images/countries/united-states.png" alt="Dedicated Servers in Atlanta">
							</span>
        <p class="locationOf">Atlanta</p>
      </a>
    </div>
  </div>
</div>
<div class="location">
  <div class="row dedicated-box">
    <div class="col-sm-1 dedicated-img">
      <a href="dedicated-servers-in-atlanta.php">
        <span>
								<img src="images/countries/united-states.png" alt="Dedicated Servers in Atlanta">
							</span>
        <p class="locationOf">Atlanta</p>
      </a>
    </div>
  </div>
</div>
<div class="location">
  <div class="row dedicated-box">
    <div class="col-sm-1 dedicated-img">
      <a href="dedicated-servers-in-atlanta.php">
        <span>
								<img src="images/countries/united-states.png" alt="Dedicated Servers in Atlanta">
							</span>
        <p class="locationOf">Atlanta</p>
      </a>
    </div>
  </div>
</div>
<div class="location">
  <div class="row dedicated-box">
    <div class="col-sm-1 dedicated-img">
      <a href="dedicated-servers-in-atlanta.php">
        <span>
								<img src="images/countries/united-states.png" alt="Dedicated Servers in Atlanta">
							</span>
        <p class="locationOf">Atlanta</p>
      </a>
    </div>
  </div>
</div>